过滤
查找
串联

过滤

eq(index|-index) ：获取第N个元素
first() ：获取第一个元素
last() ：获取最后一个元素
hasClass(class) ：判断是否有元素拥有指定的类
filter(expr|obj|ele|fn) ：筛选出指定表达式匹配的元素集合
is(expr|obj|ele|fn) ：判断是否有元素满足指定的表达式
map(callback) ：所有指定元素的列表，callback是给每个元素执行的函数
has(expr|ele) ：筛选拥有指定后代的元素
not(expr|ele|fn) ：筛选不满足表达式的所有元素
slice(start, [end]) ：选取从第几个到第几个的子集

示例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>过滤</title>
 6     <script src="js/jquery-1.8.3.min.js"></script>
 7     <style>
 8
 9     </style>
10 </head>
11 <body>
12     <p>line1</p>
13     <p id="line2">line2</p>
14     <p class="line3">line3</p>
15     <p><b>line4</b></p>
16     <p>line5</p>
17     <button>按钮</button>
18     <script>
19         // 第二个p标签
20         $("p:eq(1)").css("color","red");
21         // 倒数第二个p标签
22         $("p:eq(-2)").css("color","red");
23         // 第一个p标签
24         $("p:first").css("color","blue");
25         // 最后一个p标签
26         $("p:last").css("color","blue");
27
28         // 是否含有class=line3的p标签
29         alert($("p").hasClass("line3"));
30         // 含有class=line3的p标签
31         $("p").filter(".line3").css("background-color","#aaa");
32         // 是否含有id=line2的p标签，也可以查找class等属性
33         alert($("p").is("#line2"));
34
35         // 把匹配到的元素依次遍历
36         var str = $("p").map(function () {
37            return $(this).html();
38         }).get().join();
39         alert(str); // 结果：line1,line2,line3,line4,line5
40
41         // has
42         $("p").has("b").css("background","#aaa");
43         // not
44         $("p").not("#line2").css("font-weight","800");
45         // slice 选取从第几个到第几个的子集
46         $("p").slice(0,2).css("font-style","italic");
47
48     </script>
49 </body>
50 </html>

View Code

查找

children([expr]) ：获取所有子元素
closest(expr,[context]|object|element) ：逐级向上查找符合条件的元素
find(expr|obj|ele) ：查找满足条件的子元素
next([expr]) ：查找满足条件的下一个兄弟元素
nextAll([expr]) ：查找满足条件的下面的所有兄弟元素
nextUntil([exp|ele][,fil]) ：查找满足条件的下面的所有兄弟元素，直到某一个为止
prev([expr]) ：查找满足条件的前一个兄弟元素
prevAll([expr]) ：查找满足条件的前面的所有兄弟元素
prevUntil([exp|ele][,fil]) ：查找满足条件的前面的所有兄弟元素，直到某一个为止
parent([expr]) ：查找父级元素
parents([expr]) ：查找满足条件的祖先元素
parentsUntil([expr|element][,filter]) ：查找祖先元素，直到某一个为止

示例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>查找</title>
 6     <script src="js/jquery-1.8.3.min.js"></script>
 7 </head>
 8 <body>
 9     <p>line0</p>
10     <div id="box">
11         <span>
12             <p>line1</p>
13             <p>line2</p>
14             <p class="line3">line3</p>
15             <p>line4</p>
16             <p class="line5">line5</p>
17             <p>line6</p>
18         </span>
19     </div>
20     <p>line7</p>
21     <script>
22         // span标签的所有子元素
23         $("span").children().css("font-size","12px");
24         // line2 的祖先级div标签
25         $("p:eq(2)").closest("div").css("border","1px solid #ccc");
26         // span的指定子元素
27         $("span").find(".line3").css("color","red");
28         // line3的下一个兄弟元素
29         $(".line3").next().css("color","blue");
30         // line3的下面所有兄弟元素
31         $(".line3").nextAll().css("color","blue");
32         // line3的下面直到line5的所有兄弟元素
33         $(".line3").nextUntil(".line5").css("font-weight","800");
34         // line3的所有兄弟元素
35         $(".line3").siblings().css("font-style","italic");
36
37         // line3的父级元素
38         alert($(".line3").parent().html());
39
40     </script>
41 </body>
42 </html>

View Code

串联

add(expr|ele|html|obj[,con]) ：把与表达式匹配的元素添加到jQuery对象中
andSelf() ：加入先前所选的加入当前元素中
contents() ：查找匹配元素内部所有的子节点（包括文本节点）
end() ：将匹配的元素列表变为前一次的状态

转载于:https://www.cnblogs.com/agmj117/p/7804113.html

007-JQuery 筛选相关推荐

JQuery基本操作 JQueryCSS操作 JQuery筛选选择器 JQuery筛选方法 JQuery效果
JQuery 基本使用原生JS获取的对象就是DOM对象 JQuery方法获取的元素是JQuery对象 (伪数组形式存储) 不能使用原生Js的属性和方法 DOM对象转换为 JQuery 对象 $ ...
Jquery筛选hasclass（）的方法
Hasclass():检查当前元素是否含有某个特定的类,如果有,则返回true值. 第一步先创建一个div,给这个div添加一个类 <div class="protected" ...
jQuery筛选器常用总结
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
JQuery筛选选择器之内容筛选
基本筛选选择器针对的都是元素DOM节点,如果我们想要通过内容来过滤一些东西,该怎么办呢? jQuery是相当强大的,这一点它当然想到了啊,JQuery专门为此提供了一组内容筛选选择器,当然其规则也会体 ...
jQuery 筛选
筛选 1.过滤 1.1 eq(index|-index) 获取第N个元素 index 从0开始算 -index 从最后一个元素算,从1开始 $( ...
jquery 筛选元素 (3)
.addBack() 添加堆栈中元素集合到当前集合中,一个选择性的过滤选择器. .addBack([selector]) selector 一个字符串,其中包括一个选择器表达式,匹配当前元素集合,不包 ...
jQuery (筛选文档处理)
大家好,我是小陽,我又来了,今天我给大家带来的是jQuery的筛选and文档处理,希望能给大家带来一些知识上的帮助! 目录一.思维导图二.jQuery的筛选三.jQuery的文档处理一.思维导 ...
JQuery筛选器全系列介绍
基本选择器: #id 根据Id匹配一个元素 $("#div1").css("background-color","red"); //匹配id ...
jQuery筛选-文档处理
1.过滤案例过滤:在jQuery对象数组中,过滤出一部分元素 : // 1).首先获取ul中所有的li子元素,即会产生一个li数组uls.然后://空格选择器在后台里面查找//>:在所有子标 ...
使用Jquery筛选包含readonly属性的input标签
下午在项目中遇到了这个问题,只知道通过属性来筛选,但是具体如何实现却一点没有头绪,于是请教大神,分分钟敲出了一下优美的代码,崇拜的不行不行的,加油吧,菜鸟! $(function(){ $(" ...

007-JQuery 筛选

过滤

查找

串联

007-JQuery 筛选相关推荐

最新文章

热门文章