一、筛选

1、过滤

        （1）first()：获取匹配的第一个元素

 代码：

$(function(){

        // 获取ul中所有的li元素，然后找到第一个元素

    $("ul>li:first").css("background","yellow")

$("ul>li").first().css("background","yellow")

})

html代码： 

<body>

<h2>jQuery03：筛选、文档处理</h2>

<!-- 筛选和查找案例 -->

<ul>

<li>1</li>

<li title="a">2</li>

<li title="b">3</li>

<li title="a"><span><b>4</b></span></li>

<li title="b"><span>5</span></li>

<ol>

<li>6</li>

<li>7</li>

</ol>

<span>8</span>

</ul>

<button type="button" id="btn">返回顶部</button>

</body>

注意：下面大部分效果图html代码与此一致，为方便浏览，下文相同的地方就不写了。

两种方式效果一致。

效果图： 

 

        （2）last()：获得匹配的最后一个元素

代码：

$(function(){

        // 找到最后一个元素

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

})

和上面的first() 类似

效果图：

 

        （3）eq(N)：获取匹配的第N或-N个元素

代码：

$(function(){

       // 找到指定的某一个元素，例如第3个

$("ul>li:eq(2)").css("background","yellow")

$("ul>li").eq(-2).css("background","yellow");//倒着数

})

效果图：

 

 

        （4）filter(selector)：筛选出与指定表达式匹配的元素集合

代码：

$(function(){

       // 找到属性title为a的元素

    $("ul>li").filter("[title=a]").css("background","yellow");

 

// 找到属性title不为a的元素

    // $("ul>li").filter("[title][title!=a]").css("background","yellow");

 

// 筛选出有title属性的元素集合

// $("ul>li").filter("[title]").css("background","yellow")

})

效果图：

 

 

        （5）has(selector)：筛选出包含特定特点的元素的集合

代码：

$(function(){

        // 筛选出有<span>标签的元素集合

$("ul>li").has("span").css("background","yellow");

 

})

效果图： 

 

        （6）not(selector)：筛选出不包含特定特点的元素的集合

代码：

$(function(){

        // 筛选出没有title属性的元素集合

     $("ul>li").not("[title]").css("background","yellow");

})

效果图：

 

 

2、查找

        （1）children()：子标签中找

代码：

$(function(){

       // 查找ul的所有子标签,并且指定为li子标签

    // $("ul>li").css("background","yellow");

$("ul").children().css("background","yellow");

})

效果图：

 

        （2）find()：后代标签中找

代码：

$(function(){

      // 查找ul下面所有的span标签

// $("ul span").css("background","yellow");

$("ul").find("span").css("background","yellow");

})

效果图：

 

        （3）parent()：父标签

代码：

$(function(){

     // 查找b标签的父元素标签

$("b").parent().css("background","yellow");

})

效果图：

 

        （4）prevAll()：前面所有的兄弟标签

代码：

$(function(){

    // 查找第三个li标签前面所有的兄弟标签

$("ul>li").eq(2).prevAll().css("background","yellow");

})

效果图：

 

        （5）nextAll()：后面所有的兄弟标签

代码：

$(function(){

    // 查找第三个li标签后面所有的兄弟标签,并且只能是li标签

// $("ul>li").eq(2).nextAll().css("background", "yellow");

$("ul>li").eq(2).nextAll("li").css("background", "yellow");

})

效果图：

 

        （6）siblings()：前后所有的兄弟标签

代码：

$(function(){

   // 查找第三个li标签所有的兄弟标签

$("ul>li").eq(2).siblings().css("background","yellow");

})

效果图：

 

二、文档处理

1.增加

（1）内部插入

        1、append()：将内容添加到指定的元素后面

代码：

$(function(){

   $("ul>li").last().append("<a href='http://www.baidu.com'>嘿嘿嘿</a>")

})

效果图：

 

        2、appendTo()：和append()颠倒

代码：

$(function(){

   $("<a href='http://www.baidu.com'>嘿嘿嘿</a>").appendTo($("ul>li").last())

})

效果图：

 

        3、prepend()：将内容添加到指定元素前面

代码：

$(function(){

  $("ul>li").first().prepend("<a href='http://www.baidu.com'>哈哈哈</a>")

})

效果图：

 

        4、prependTo():和prepend()颠倒

代码：

$(function(){

   $("<a href='http://www.baidu.com'>哈哈哈</a>").prependTo($("ul>li").first())

})

效果图：

（2）外部插入

        1、after()：在匹配元素之后插入内容

代码：

$(function(){

   //   在属性title为b的li后面插入一个a标签

    $("ul>li").filter("[title=b]").after("<a href='www.baidu.com'>嗨嗨</a>")

})

效果图：

 

        2、before()：在匹配元素之前插入内容

代码：

$(function(){

   //   在属性title为b的li后面插入一个a标签

    $("ul>li").filter("[title=b]").before("<a href='www.baidu.com'>嗨嗨</a>")

})

效果图：