jQuery选择器

等归,

于 2022-11-27 22:14:22 发布

阅读量1.1k

点赞数 1

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_50370865/article/details/128070814

版权

jquery选择器

- jQuery选择器：

jQuery选择器：

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

html样式：

<body>
  <header id="header1" class="header1">我是头部标签</header>
  <div class="header1">我是盒子</div>
  <p>我是p标签</p>
  <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'));