jQuery之筛选
Posted 小伍前端
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery之筛选相关的知识，希望对你有一定的参考价值。
1
1、eq(index|-index)获取第N个元素
index:一个整数，指示元素基于0的位置开始算起
例：
html:
<p>this is a test</p>
<p>so is this</p>
js:
$("p").eq(1);
结果:
[<p>so is this</p>]
-index：一个整数，指示元素从最后一个元素开始倒数
例：
html:
<p>this is a test</p>
<p>so is this</p>
js:
$("p").eq(-2);
结果:
[<p>this is a test</p>]
2、first()获取第一元素
例：
html:
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
js:
$("li").first();
结果：
[<li>list item 1</li>]
3、last()获取第一元素
例：
html:
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
js:
$("li").last();
结果：
[<li>list item 5</li>]
4、hasClass() 检查是否含有特定的类；有，则返回true
例：
html:
<ul>
<li class="item">item1</li>
<li>item2</li>
<li class="item">item3</li>
<li>item4</li>
<li class="item">item5</li>
</ul>
js:
$("ul li").click(function(){
if($(this).hasClass("item")){
$(this).css("background","red");
}
});
结果：
5、filter() 筛选出指定表达式匹配的元素集合
例：
html:
<p>Hello</p>
<p>Hello Again</p>
<p class="selected">And Again</p>
js:
$("p").filter(".selected").css("background","red");
结果：
6、is(expr|obj|ele|fn) 根据选择器、DOM元素或Jquery对象来检测匹配元素集合，如果其中至少有一个元素符合给定的表达式，就返回true
例：
html:
<form><input type="checkebox"></form>
js:
$("input[input='checkbox']").parent().is("form");
结果：
true
7、map(callback) 将一组元素转换成其他数组（不论是否是元素数组）
例：
html:
<p><b>Values: </b></p>
<form>
<input type="text" name="name" value="John"/>
<input type="text" name="password" value="password"/>
<input type="text" name="url" value="http://ejohn.org/"/>
</form>
js:
$("p").append($("input").map(function(){
return $(this).val();
}).get().join(", "));
结果：
[ <p>John, password, http://ejohn.org/</p>]
8、has(expr|ele) 保留包含特定后代的元素，去掉那些不含有特定后代的元素
例：
html:
<ul>
<li>list item 1</li>
<li>list item 2
<ul>
<li>list item 2-a</li>
<li>list item 2-b</li>
</ul>
</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>
js:
$("li").has("ul").css("background","red");
结果：
9、not(expr|ele|fn) 排除与指定表达式匹配的元素
例：
html:
<h1>欢迎来到我的主页</h1>
<p>我的名字叫 davada。</p>
<p class="intro">我住在 davada。</p>
<p class="intro">我爱 davada。</p>
<p>我最好的朋友是 davada。</p>
js:
$("p").not(".intro").css("background","yellow");
结果：
10、slice(start,[end]) 选取一个匹配的子集,含头不含尾
start:开始选取子集的位置。第一个是0；负数则从集合的尾部开始选取；
end:结束选取自己的位置，不指定，则是本身的结尾
例：
html:
<p>Hello</p>
<p>cruel</p>
<p>World</p>
js:
$("p").slice(0,1).wrapInner("<b></b>");
2
1、children([expr]) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合
例：
html:
<div>
<span>Hello</span>
<p class="selected">Hello Again</p>
<p>And Again</p>
</div>
js:
$("div").children().css("color","red");
$("div").children(".selected").css("background","green");
结果：
2、find() 搜索所有与指定表达式匹配的元素。（这个函数是找出正在处理的元素的后代元素的好方法）
例：
html:
<p><span>Hello</span>,how are you?</p>
js:
$("p").find("span");
结果：
[<span>Hello</span>]
3、next() 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合
例：
html:
<p>Hello</p>
<p>Hello Again</p>
<div>
<span>And Again</span>
</div>
js:
$("p").next().css("background","green");
结果:
5、nextall() 查找当前元素之后所有的同辈元素。
例：
html:
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
js:
$("div:first").nextAll().addClass("after");
结果：
<div>1</div>
<div class="after">2</div>
<div class="after">3</div>
<div class="after">4</div>
6、nextUntil() 查找当前元素之后的同辈元素,直到遇到匹配的那个元素为止。
例：
html:
<dl>
<dt id="term-1">term 1</dt>
<dd>definition 1-a</dd>
<dd>definition 1-b</dd>
<dd>definition 1-c</dd>
<dd>definition 1-d</dd>
<dt id="term-2">term 2</dt>
<dd>definition 2-a</dd>
<dd>definition 2-b</dd>
<dd>definition 2-c</dd>
<dt id="term-3">term 3</dt>
<dd>definition 3-a</dd>
<dd>definition 3-b</dd>
</dl>
js:
$('#term-2').nextUntil('dt').css('background-color', 'red');
var term3 = document.getElementById("term-3");
$("#term-1").nextUntil(term3, "dd").css("color", "green");
结果：
7、offsetParent() 返回父元素中第一个其position设为relative的元素。此方法仅对可见元素有效。
例：
html:
<div style="width:70%;position:absolute;left:100px;top:100px">
<div style="margin:50px;background-color:yellow">
<p>点击下面的按钮可以设置本段落的最近的父（祖先）元素的背景色。</p>
<div>
</div>
<button>点击这里</button>
js:
$("button").click(function(){
$("p").offsetParent().css("background","red");
});
结果：
点击之后效果：
8、parent() 取得一个包含着所有匹配元素的唯一父元素的元素集合。
例：
html:
<div>
<p>Hello</p>
<p>Hello</p>
</div>
js:
$("p").parent().css("border","1px solid red");
结果：
9、parents() 取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。
例：
html:
<html>
<body>
<div>
<p>
<span>Hello</span>
</p>
<span>Hello Again</span>
</div>
</body>
</html>
js:
$("span").parents().css("border","1px solid red");
结果：
10、parentUntil() 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
例：
html:
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
js:
$('li.item-a').parentsUntil('.level-1').css('background','red');
结果：
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii" style="border: 1px solid red;">II
<ul class="level-2" style="border: 1px solid red;">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
11、prev() 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合
例：
html:
<p>Hello</p>
<div>
<span>Hello Again</span>
</div>
<p>And Again</p>
js:
$("p").prev().css("background","red");
结果：
12、prevall() 查找当前元素之前所有的同辈元素
例：
html:
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
js:
$("div:last").prevAll().addClass("before");
结果：
<div class="before">1</div>
<div class="before">2</div>
<div class="before">3</div>
<div>4</div>
13、prevUntil() 查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。
例：
html:
<dl>
<dt>term 1</dt>
<dd>definition 1-a</dd>
<dd>definition 1-b</dd>
<dd>definition 1-c</dd>
<dd>definition 1-d</dd>
<dt id="term-2">term 2</dt>
<dd>definition 2-a</dd>
<dd>definition 2-b</dd>
<dd>definition 2-c</dd>
<dt>term 3</dt>
<dd>definition 3-a</dd>
<dd>definition 3-b</dd>
</dl>
js:
$('#term-2').prevUntil('dt').css('background-color', 'red');
结果：
14、siblings() 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。
例：
html:
<p>Hello</p>
<div>
<span>Hello Again</span>
</div>
<p>And Again</p>
js:
$("div").siblings();
结果：
[ <p>Hello</p>,<p>And Again</p> ]
以上是关于jQuery之筛选的主要内容，如果未能解决你的问题，请参考以下文章