jquery——5筛选和查找

过滤案例：

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>jquery_05_dom</title>
   <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
   <script type="text/javascript">
       $(function(){
           /* 过滤
               eq:返回值是Jquery对象,下标值从0开始算
               get(index):返回值是Dom元素
           */
           console.info("==eq==" + $("li").eq(1) + "====" + $("li").eq(1).html());
           /* 判断当前元素是否包含class为demo1
               如果包含返回true,不包含返回false
           */
           console.info("==hasClass==" + $("li").eq(2).hasClass("demo1"));

   /* filter:过滤,查找
               查询出所有的li,将包含class=demo1的留下来
           */
           console.info("==filter==" + $("li").filter(".demo1").html());
           /* has:li下面有ul的

并且改变样式：红色的背景色

   */
           console.info("==has==" + $("li").has("ul").html() + "===>" + $("li").has("ul").css("background-color","red"));

   /* not:删除class=demo1的元素
               Jquery是一个数组,原来在数组中放了有5个元素,
               not:将class=demo1的从数组中删除了.
           */
           console.info("==has==" + $("li").not( $(".demo1") ).length);

           /*
               Jquery是一个数组,slice:从第几个到第几个取出来;
               toArray():是把Jquery对象变成js的数组;(js的数组和java的数组使用方法一样)
               join:将数组里面的元素用参数链接起来;调用的是元素的toString()
           */
           console.info("==slice==" + $("li").slice(1,3).length + "==" +
                   $("li").slice(1,3).toArray().join(","));
           $("li").slice(1,3).each(function(count)
           {
               /*
                   each:第二个参数是一个dom元素,
                   如果不传,$(this):就是将dom元素变成jquery对象
               */
               console.log(count + "===" + $(this).html());
           });

       });
   </script>
</head>
<body>
   <ul id="ul">
       <li>li_1</li>
       <li id="li1">
           li_2
           <div>
               这是div
           </div>
           <ul>
               <li class="demo1">li_2_1</li>
               <li>li_2_2</li>
           </ul>
       </li>
       <li class="demo2">li_3</li>
       <li class="demo2">li_4</li>
   </ul>
</body>
</html>

显示结果：

jquery——5筛选和查找

查找案例：

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>jquery_05_dom</title>
   <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
   <script type="text/javascript">
       $(function(){
           /*--------------查找-------------*/
           /* 取到所有li的子标签
               li的子标签是ul标签,取的是ul标签的html
           */
           console.log("=children==" + $("li").children().html());

           /* li的标签有两个,我只想取其中的div标签
               只能取子标签
           */
           console.log("=children==" + $("li").children("ul").html());

/* children:取的是子标签,参数是一个选择器 */
console.log("=children==" + $("#ul").children(".demo2").html());

/* find找元素的时候找的是孩子和孙子(所有的后代) */
console.log("=find==" + $("#ul").find("li").length);

/* next:后面后面一个弟弟 */
console.log("=next==" + $("#li1").next().length + "--->" + $("#li1").next().html());

           /* next:后面后面所有弟弟 */
           console.log("=nextAll==" + $("#li1").nextAll().length + "--->" + $("#li1").nextAll().html());

           /* prev:往前找一个哥哥
               prevAll:往前找所有哥哥
           */

/* parent:找的是父元素 */
console.log("=parent==" + $("#li1").parent().length + "--->" + $("#li1").parent().html());

/* 找的是所有的祖宗 */
console.log("=parent==" + $("#li1").parents().length + "--->" + $("#li1").parents().html());

   $("#li1").parents().each(function()
           {
               console.info("==parents==each===" + $(this).html())
           });

/* 祖宗有好多,取包含ul的 */
console.info("==parents==" + $("#li1").parents("ul").html())

/* */
console.info("==siblings==" + $("#li1").siblings().length);

           /* 取到所有的哥哥和弟弟 */
           $("#li1").siblings().each(function()
           {
               console.info("==siblings=each==" + $(this).html())
           });
       });
   </script>
</head>
<body>
   <ul id="ul">
       <li>li_1</li>
       <li id="li1">
           li_2
           <div>
               这是div
           </div>
           <ul>
               <li class="demo1">li_2_1</li>
               <li>li_2_2</li>
           </ul>
       </li>
       <li class="demo2">li_3</li>
       <li class="demo2">li_4</li>
   </ul>
</body>
</html>

显示结果：

jquery——5筛选和查找

/* 找的是所有的祖宗 */
console.log("=parent==" + $("#li1").parents().length + "--->" + $("#li1").parents().html());

   $("#li1").parents().each(function()
           {
               console.info("==parents==each===" + $(this).html())
           });

jquery——5筛选和查找

jquery——5筛选和查找

过滤案例：

查找案例：

相关推荐