jQuery3----筛选&文档处理

（首先让我们来看的一部分内容）

一、筛选内容包括过滤和查看

1.过滤：在jQuery对象数组中，筛选出一部分元素

代码展示

1.1 first()匹配第一个元素 例：

                $("ul li:first").css("background","orange");
                $("ul li").first().css("background","orange");
                

1.2 last()匹配最后一个元素  例：

                $("ul >li:last").css("background","orange");
                $("ul > li").last().css("background","orange");

1.3 eq() 找到指定的某一个元素，例：

                $("ul>li").eq(2).css("background","orange");
                $("ul>li").eq(-2).css("background","orange");//倒数第3个

  1.4 filter()过滤出指定表达式匹配的元素集合  例：

               a. 找到属性title为a的元素
                    $("ul>li").filter("[title=a]").css("background","orange");
               b. 筛选出有title属性的元素集合
                $("ul>li").filter("[title]").css("background","orange");
               c.筛选出有<span>标签的元素集合
                    $("ul>li").has("span").css("background","orange");
               d.筛选出没有title属性的元素集合
                $("ul>li").not("[title]").css("background","orange");
 

2.查找

2.1 children() :找子标签 例如：

                     // 查找ul的所有子标签,并且指定为li子标签
                    // $("ul").children("li").css("background","orange");
                

 2.2 find():找后代标签  例如：

                 // 查找ul下面所有的span标签
                // $("ul").find("span").css("background","orange");

 2.3 parent():找父元素标签（即前者）例如：

                     // 查找b标签的父元素标签
                    // $("b").parent().css("background","orange");

 2.4 prevAll() :找前面兄弟标签（即同级标签） 例如：

                 // 查找第三个li标签前面所有的兄弟标签
                    // $("ul>li").eq(2).prevAll().css("background","orange");

2.5 nextAll() :找后面兄弟标签 例如：

                 // 查找第三个li标签后面所有的兄弟标签,并且只能是li标签
                // $("ul>li").eq(2).nextAll("li").css("background","orange");

 2.6 siblings()：指的是找到前后所有兄弟标签  例如：

                 查找第三个li标签所有的兄弟标签
                  $("ul>li").eq(2).siblings().css("background","orange");

（其次是第二部分内容） 

二、 文档处理 

关于的内容有增加、删除、修改、查看
                

（1）增 加
                --1.1  内部插入(前面和后面)
              

               插入到最后面(给ul中最后一个li中插入一个a标签)
                    $("ul>li").last().append("<a>哈哈</a>").css("background","orange");
                    $("<a>哈哈</a>").appendTo($("ul>li").last());

               插入到最前面(给ul中第一个li中插入一个a标签)
                     $("ul>li").first().append("<a>哈哈</a>").css("background","orange");

                    
                --1.2  外部插入(之前和之后)
              

                在属性title为b的li前面插入一个a标签
                    $("ul>li").filter("[title=b]").before("<a>笑死了</a>");

                在属性title为b的li后面插入一个a标签
                    $("ul>li").filter("[title=b]").after("<a>哎嘿嘿</a>");

      （2）修 改                
                

           把li下面所有的span标签替换为<a>标签
                $("li span").replaceWith("<a>紫薇</a>");

     （3)   删 除                
                

          a: 清空ul中所有li的内容
                $("ul li").empty("li");

           b:移除ul中所有的li remove
                $("ul li").remove("li");

               

补充知识点: 位置
              
               1.父容器和大容器的区别：

-----大容器 offset()
                var a=$("#aa").offset();
                console.info(a.top,a.left);

-----父容器 position()
                var b=$("#bb").position()；
                console.info(b.top,b.left);
                2.获取顶部距离=返回顶部
                $("#btn").click(function(){
                  $("body,html").scrollTop(0);赋值
                })