筛选案例：

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>

一、jQuery的筛选
1.1筛选

1.1.1
first( ):获取匹配的第一个元素
eg:
获取ul中所有的li元素，然后找到第一个元素
$("ul>li").first().css("background","gray");
1.1.2
last( ):获得匹配的最后一个元素
eg:
获取ul中所有的li元素，然后找到最后一个元素
$("ul>li").last().css("background","gray");
1.1.3
eq( )：获取匹配的第N或负N个元素
eg:
找到指定的某一个元素，例如li第三个
$("ul>li").eq(2).css("background","gray");
$("ul>li").eq(-2).css("background","gray");//负数代表倒数

1.1.4
filter(selector):筛选出与指定表达式匹配的元素集合
eg:
找到属性title为a的元素
   $("ul>li").filter("[title=a]").css("background","gray");
筛选出有title属性的元素集合
   $("ul>li").filter("[title]").css("background","gray");
找到属性title不为a的元素
   $("ul>li").filter("[title!=a]").css("background","gray");

1.1.5
has(selector)：筛选出包含特定特点的元素的集合
eg:
筛选出有<span>标签的元素集合
$("ul li").has("span").css("background","gray");

1.1.6
not(selector)：筛选出不包含特定特点的元素集合
eg:
筛选出没有title属性的元素集合
$("ul>li").not("[title]").css("background","gray");

2.1查找

1.2.1
children( )：子标签中找
eg:
查找ul的所有子标签,并且指定为li子标签
$("ul").children("li").css("background","gray");

1.2.2
find( )：后代标签中找
eg:
查找ul下面所有的span标签
$("ul").find("span").css("background","gray");

1.2.3
parent( )：父标签
eg: 查找b标签的父元素标签
$("b").parent().css("background","gray");

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

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

1.2.6
sibling( )：前后所有的兄弟标签
eg:
查找第三个li标签所有的兄弟标签
$("ul>li").eq(2).siblings().css("background","gray");

二、jQuery的文档处理
2.1增(内部插入和外部插入)
内部插入：
append( )：将内容添加到指定的元素后面；
appendTO( )：和append( )颠倒；
eg:
插入到最后面(给ul中最后一个li中插入一个a标签)
$("ul>li").last().append("<a href='http://www.baidu.com'>嘿嘿嘿</a>")
$("<a href='http://www.baidu.com'>嘿嘿嘿</a>").appendTo($("ul>li").last());

插入到最前面(给ul中第一个li中插入一个a标签)
$("ul>li").first().append("<a href='http://www.baidu.com'>嘿嘿嘿</a>")
$("<a href='http://www.baidu.com'>嘿嘿嘿</a>").appendTo($("ul>li").first());

外部插入：
after( )：在匹配元素之后插入内容
before( )：在匹配元素之前插入内容
eg:
在属性title为b的li前面插入一个a标签
   $("ul>li").filter("[title=b]").before("<a href=href='http://www.baidu.com'>加自习</a>");

在属性title为b的li后面插入一个a标签
   $("ul>li").filter("[title=b]").after("<a href=href='http://www.baidu.com'>加自习</a>")

2.2删
empty( )：删除匹配的元素集合中所有的子节点（不包含匹配的元素）
eg:
清空ul中所有li的内容
$("ul li").empty();

remove( ):删除匹配的元素集合中所有的子节点（包含匹配的元素）
eg:
移除ul中所有的li
$("ul li").remove();

原文链接：https://blog.csdn.net/qq_65345936/article/details/123582902

一、jQuery的筛选 1.1筛选

2.1查找

一、jQuery的筛选
1.1筛选