jQuery 筛选（过滤、查找、串联）

1. 过滤操作

first()
last()
eq()
not()
filter()
slice()
has()
demo

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery筛选操作</title>
  <style>
    .my-list{
      width: 600px;
      list-style: none;
    }
    .my-list li{
      margin-bottom: 10px;
      padding: 20px;
      border: 2px dashed orange;
    }
  </style>
</head>
<body>
  <h1>jQuery筛选操作</h1>
  <hr>
  <ul class="my-list">
    <li>a</li>
    <li>b</li>
    <li class="item">c</li>
    <li>d<span class="item">item</span></li>
    <li>e</li>
  </ul>

  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      // $(".my-list li:first").css("border-color", "red");
      $(".my-list li").first().css("border-color", "red");
      $(".my-list li").last().css("border-color", "red");
      $(".my-list li").eq(1).css("border-color", "red");
      $(".my-list li").not(".item").css("background-color", "yellow");
      $(".my-list li").not(":first").css("color", "red");
      $(".my-list li").filter(".item").css("background-color", "pink");
      // 截取其中一部分
      // $(".my-list li").slice(2).css("background-color", "green");
      // $(".my-list li").slice(1,3).css("background-color", "green");

      // 包含子元素属性为item时满足条件
      $(".my-list li").has(".item").css("border", "5px solid purple");
    });
  </script>

</body>
</html>

2. 查找

children([selector]) 获取子元素
find(selector) 获取后代元素
parent([selector]) 获取父元素
parents([selector]) 获取所有的祖先元素（满足条件）
parentsUntil([selector]) 获取祖先元素的集合（从父元素到选择器指定的祖先元素，但是指定的祖先排除掉）
offsetParent() 获取第一个定位的祖先元素
next([selector]) 紧邻在后面的兄弟元素
nextAll([selector]) 后面所有的兄弟元素
nextUntil([selector]) 直到selector
prev([selector]) 紧邻在前面的兄弟元素
prevAll([selector]) 前面所有的兄弟元素
prevUntil([selector]) 直到selector
sibilings([selector]) 所有的兄弟元素
closest([selector]) 从所有的祖先元素和本身里面找出第一个满足条件

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery查找操作</title>
  <style>
    #firstList{
      position: relative;
      width: 600px;
      list-style: none;
    }
   li{
      margin-bottom: 10px;
      padding: 20px;
      border: 2px dashed orange;
      list-style: none;
    }
  </style>
</head>
<body>
  <h1>jQuery查找操作</h1>
  <hr>
  <ul id="firstList">
    <li>a</li>
    <li>b</li>
    <li>c
      <ul>
        <li>c1</li>
        <li id="myItem">c2</li>
        <li>c3</li>
        <li>c4</li>
        <li>c5</li>
      </ul>
    </li>
    <li class="item">d</li>
    <li>e</li>
    <li>f</li>
    <p>aha</p>
  </ul>

  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      // 子元素
      // $("#firstList").css("border","5px solid red");
      // 选取子元素，除了子元素，其他后代元素不会被选中
      // $("#firstList").children().css("border","5px solid red");
      // $("#firstList").find("li").css("border","5px solid red");

      // 获取 祖先元素系列
      $("#myItem").css("background-color","pink");
      // $("#myItem").parent().css("border", "5px solid red");
      // 选取祖先里面的ul
      // $("#myItem").parents("ul").css("border", "5px solid red");
      // 从它自己直到找到body标签内所有祖先之后停下
      // $("#myItem").parentsUntil("body").css("border", "5px solid red");
      // 返回第一个定位的祖先元素
      // $("#myItem").offsetParent().css("border", "5px solid red");

      // 获取 兄弟元素
      $(".item").css("background-color", "pink");
      // 后面的兄弟元素操作
      // 仅临的一个兄弟元素
      // $(".item").next("li").css("border", "5px solid red");
      // 后面所有的li标签的兄弟元素
      // $(".item").nextAll("li").css("border", "5px solid red");
      // 后面所有直到p标签的兄弟元素
      // $(".item").nextUntil("p").css("border", "5px solid red");

      // 前面的兄弟元素操作
      // $(".item").prev().css("border", "5px solid red");
      // $(".item").prevAll().css("border", "5px solid red");
      //$(".item").prevUntil("li:first").css("border", "5px solid red");
      
      //所有兄弟元素
      $(".item").siblings().css("border", "5px solid red");
    });
  </script>

</body>
</html>

3. 串联

add() 把选中的元素加入当前集合
addBack() 把调用该方法的元素加入当前集合
end() 返回最后一次破坏性操作之前的DOM
contents() 返回所有子节点的集合
demo

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>串联操作</title>
  <style>
    ul {
      width: 600px;
      list-style: none;
    }
    li {
      margin-bottom: 20px;
      padding: 20px;
      border: 2px dashed orange;
    }
    p {
      width: 500px;
      padding: 20px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <h1>串联操作</h1>
  <hr>
  <ul id="myList">
    <li>a b c d</li>
    <li>a b c d</li>
    <li>a b c d</li>
    <li>a b c d</li>
    <li>a b c d</li>
  </ul>
  <hr>
  <p>a b c d</p>
  <div id="box">
    你好
    <br>
    <p>a b c d</p>
    abc
    <!--emm-->
  </div>

  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      // add() 把选中的元素 加入当前的集合中，所以p标签也变粉色了
      // $("#myList").find("li").add("p").css("background-color","pink");

      //addBack()把#myList也加进去了
      // $("#myList").children("li").addBack().css("border", "5px solid red");
      //addBack()把body也加进去了
      // $("body").find("li").addBack().css("border", "5px solid red");
      //addBack()把ul也加进去了
      // $("body").find("ul").find("li").addBack().css("border", "5px solid red");

      // end()返回前面的前面的一次DOM操作，也就是说，end()现在指向的是#myList li
      // $("#myList li").eq(2).end().css("border", "5px solid red");
      // end()现在指向的是#myList
      $("#myList").find("li").end().css("border", "5px solid red");

      console.log($("#box").contents());
    });
  </script>
</body>
</html>

4. jQuery DOM对象操作

each() 遍历
map() 返回新的集合
length 集合中元素的数量
index() 返回该元素在父元素中的索引位置
get([index]) 返回集合中指定索引的dom对象，还可以把jquery dom集合转为类数组
is(selector) 判断该jquery dom是否满足某个条件返回布尔值

demo

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery DOM 对象的方法</title>
  <style>
    #myList {
      width: 600px;
      list-style: none;
    }
    #myList li {
      margin-top: 10px;
      padding: 20px;
      border: 2px dashed orange;
    }
  </style>
</head>
<body>
  <h1>jQuery DOM 对象的方法</h1>
  <hr>
  <ul id="myList">
    <li>a b c d</li>
    <li>a b c d</li>
    <li>a b c d</li>
    <li>a b c d</li>
    <li>a b c d</li>
    <li>a b c d</li>
  </ul>

  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      // 遍历
      $("#myList li").each(function (index, ele) {
        // console.log(index, ele);
        // ele.innerHTML += " e f";
        $(ele).append(" e f");
      })

      // map
      var list = $("#myList li").map(function (index, ele) {
        // return $(ele).html();
        return index;
      })
      // 产生一个返回的集合
      console.log(list);


      console.log($("#myList li").length);

      //返回某个元素 在父元素中的索引
      // console.log($("#myList li").index());
      $("#myList li").click(function () {
        console.log($(this).index());
      });

      console.log($("#myList li").get(1));
      console.log($("#myList li").get());
    });
  </script>
</body>
</html>

痴心的萝卜

发布了56 篇原创文章 · 获赞 20 · 访问量 7381

私信关注

jQuery 筛选（过滤、查找、串联）

1. 过滤操作

2. 查找

3. 串联

4. jQuery DOM对象操作

猜你喜欢