jQuery选择器 :

1、基本选择
2、 层级选择
3、过滤选择
4、筛选选择器(方法

html样式

<body>
  &lt;header id="header1" class="header1"&gt;我是头部标签</header&gt;
  <div class="header1"&gt;我是盒子</div&gt;
  <p&gt;我是p标签</p&gt;
  <ul>
    <li>我是li第1行</li>
    <li>我是li第2行</li>
    <li id="list3">我是li第3行</li>
    <li id="list4">我是li第4行</li>
    <li>我是li第5行</li>
    <div>
      <ol>
        <li>我是liol第1行</li>
        <li>我是liol第2行</li>
        <li>我是liol第3行</li>
      </ol>
    </div>
    <p>我是p标签</p>
  </ul>
  <button id="btn" style="font-size:20px">设置</button>
</body>

一、基本选择

1、Id选择器
2、类名选择器
3、标签选择器
4、并集选择器
5、交集选择器

js代码片段

  // 1、Id选择器
  $('#btn').click(function () {
    $('#header').css('background-color', 'red')
  })

  // 2、类名选择器
  $('#btn').click(function() {
    console.log($('.header1'));


    $('.header1').css('background-color','red')
  })

  // 3、标签选择器
  $('#btn').click(function() {
    $('p').css('background-color','red')
    $('p').css('font-size','20px')
  })

  // 4、并集选择器
  $('#btn').click(function() {
    // 使用逗号隔开
    $('div,p,#header1').css('background-color','red')
  })

  // 5、交集选择器
  $('#btn').click(function() {
    $('#header1.header1').css('background-color','red')
  })
  $('#btn').click(function() {
    $('div.header1').css('background-color','red')
  })

二、层级选择器

1、子代选择器
2、后代选择器

js代码片段

  // 1、子代选择器
  $('#btn').click(function () {
    $('ul>li').css('background-color', 'red')
  })

  // // 2、后代选择器
  $('#btn').click(function () {
    $('ul li').css('background-color', 'red')
  })

三、过滤选择器

1、:eq(index) 获取到的li元素中,选择索引号为index元素索引index从0开始
2、:odd 获取到的li元素中,选择索引号为奇数的元素
3、:even 获取到的li元素中,选择索引号偶数的元素

js代码片段

  // 1、:eq(index)  获取到的li元素中,选择索引号index的元素,索引号index从0开始
  $('#btn').click(function () {
    $('li:eq(2)').css('background-color', 'red')
  })

  // 2、:odd  获取到的li元素中,选择索引号奇数的元素
  $('#btn').click(function () {
    $('li:odd').css('background-color', 'red')
  })

  // 3、:even 获取到的li元素中,选择索引号为偶数的元素
  $('#btn').click(function () {
    $('li:even').css('background-color', 'red')
  })

四、筛选选择器

1、children() 相当于子代选择器 没有参数获取所有的子元素 加参数 获取指定选择器的元素
2、find() 相当于后代选择器 必须加参数
3、siblings() 查找兄弟节点,不包括自己本身
4、parent() 查找父亲 parents() 查找祖先
5、eq(index) 相当于 :eq(index)
6、next() 找下一个兄弟
7、prev() 找上一个兄弟
8、not() 方法返回指定元素之外的元素。

js代码片段

// 1、children() 相当于子代选择器 没有参数获取所有的子元素  加参数 获取指定选择器的元素
  $('#btn').click(function () {
  console.log($('ul').children());
    $('ul').children().css('background-color', 'red')
  })
  // 有参数
  $('#btn').click(function () {
  console.log($('ul').children('li'));
    $('ul').children('li').css('background-color', 'red')
  })

  // 2、find() 相当于后代选择器 必须加参数
  $('#btn').click(function () {
    console.log($('ul').find('li'));
    $('ul').find('li').css('background-color', 'red')
  })

  // 3、siblings() 查找兄弟节点,不包括自己本身
  $('#btn').click(function () {
    console.log($('#list3').siblings('li'));
    $('#list3').siblings('li').css('background-color', 'red')
  })

  // 4、parent() 查找父亲  parents() 查找祖先
  $('#btn').click(function () {
    $('#list4').parent().css('background-color', 'red')
  })
  $('#btn').click(function () {
    console.log($('#list4').parents());
    $('#list4').parents().css('background-color', 'red')
  })

  // 5、eq(index)  相当于 :eq(index)
  $("#btn").click(function () {
    console.log($('li').eq(2));
    $('li').eq(2).css('background-color', 'red')
  })

  // 6、next() 找下一个兄弟
  $("#btn").click(function () {
    console.log($('#list3').next());
    $('#list3').next().css('background-color', 'red')
  })

  // 7、prev() 找上一个兄弟
  $('#btn').click(function () {
    console.log($('#list4').prev());
    $('#list4').prev().css('color', 'red')
  })
  // 8、not() 方法返回指定元素之外的元素。
  console.log($('ul').children('p'));
  console.log($('ul').children().not('li'));

原文地址:https://blog.csdn.net/weixin_50370865/article/details/128070814

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_26170.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注