jQuery 筛选选择器

卡尔特斯
135 阅读1分钟 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="jquery-3.4.1.js"></script>
  <script>
    $(function () {

      // 获得ul
      var jqUl = $('ul');

      // find(selector)；找到父元素里面的所有子元素
      // 必须指定参数，如果不指定获取不到元素，length为0
      var jqLi = jqUl.find('li');
      jqLi.css('background', 'pink')

      // children(selector)；从jquery对象的子代里面查找，亲儿子层级。
      // 不写参数默认获取所有子元素
      // jqUl.children().css('background', 'green');
      jqUl.children('li').css('background', 'green');

      // eq(索引值)；从jquery对象的子代里面查找该索引值的元素
      // 要求该数组中的第几个。
      jqUl.children().eq(0).css('background', 'red');

      // next(); 该元素的下一个兄弟元素
      jqUl.children().eq(0).next().css('background', 'yellow');

      // siblings(); 该元素的所有兄弟元素（不包括本身）
      jqUl.children().eq(0).next().siblings().css('border', '1px solid blue');

      // parent(); 该元素的父元素（和定位没有关系）
      jqUl.children().eq(0).parent().css('border', '1px solid orange');
    })
  </script>
</head>
<body>
  <ul>
    <li>DZMeBookRead-DZMeBookRead-DZMeBookRead-DZMeBookRead</li>
    <li class="box">DZMeBookRead-DZMeBookRead-DZMeBookRead-DZMeBookRead</li>
    <span>DZMeBookRead-DZMeBookRead-DZMeBookRead-DZMeBookRead</span>
    <i>DZMeBookRead-DZMeBookRead-DZMeBookRead-DZMeBookRead</i>
    <li>DZMeBookRead-DZMeBookRead-DZMeBookRead-DZMeBookRead</li>
    <a id="box" href="#">DZMeBookRead-DZMeBookRead-DZMeBookRead-DZMeBookRead</a>
    <ol>
      <li>ol-DZMeBookRead</li>
      <li>ol-DZMeBookRead</li>
      <li>ol-DZMeBookRead</li>
    </ol>
  </ul>
</body>
</html>
  • demo效果

avatar
文章
阅读
粉丝