jQuery筛选函数总结
1) 串联函数
1. addSelf()
将之前匹配元素集合增加到当前匹配元素集合中,返回匹配元素集合
Test case: <div><p>test</p></div>
Example: $(‘div’).find(‘p’).andSelf().addClass(‘class1’);
Result: <div><p class=”class1”>test</p></div>
2. end()
回到最近的一个"破坏性"操作之前。如果之前没有破坏性操作,则返回一个空集。所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作。(相当于undo()函数)
2) 查找函数
1. add(exp)
把与表达式匹配的元素添加到jQuery对象中。可以用于连接分别与两个表达式匹配的元素结果集。
Test case: <p>test1</p><a>test2</a>
Example: $(‘p’).add(‘a’)
Result: [<p>test1</p>,<a>test2</a>]
2. children([expr])
取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。可以通过可选的表达式来过滤所匹配的子元素。注意:parents()将查找所有祖辈元素,而children()之考虑子元素而不考虑所有后代元素。
Test case: <div></span>Hello Again</span></div>
Example: $(‘div’).children()
Result: <span>Hello Again</span>
3. find(expr)
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。
Test case: <p><span>Hello</span>, How are you? </p>
Example: $(‘p’).find(‘span’)
Result: <span>Hello</span>
4. next([expr])
取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。这个函数只返回后面那个紧邻的同辈元素,而不是后面所有的同辈元素(可以使用nextAll)。可以用一个可选的表达式进行筛选。
Test case: <p><span>Hello</span><a>h1</a></p>
Example: $(‘span’).next()
Result: <a>h1</a>
5. nextAll([expr])
查找当前元素之后所有的同辈元素。
Test case: <div>h1</div><div>h2</div><div>h3</div>
Example: $(‘div:first’).nextAll()
Result: <div>h2</div><div>h3</div>
6. offsetParent()
返回第一个匹配元素用于定位的父节点。这返回父元素中第一个其position设为relative或者absolute的元素。(仅对可见元素有效)
7. parent([expr])
取得一个包含着所有匹配元素的唯一父元素的元素集合。
Test case: <div><p>Hello</p><p>Hello</p></div>
Example: $(‘p’).parent();
Result: <div><p>Hello</p><p>Hello</p></div>
8. parents([expr])
取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。
Test case: <body><div><p><span>Hello</span></p><span>Hello Again</span></div> </body>
Example: $(“span”).parents(“p”);
Result: <p><span><Hello></span></p>
9. prev([expr])
取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到,而不是前面所有的同辈元素。
Test case: <div><span>Hello Again</span></div><p>And Again</p>
Example: $(“p”).prev()
Result: <div><span>Hello Again</span></div>
10. prevAll([expr])
查找当前元素之前所有的同辈元素
Test case: <div></div><div></div><div></div><div></div>
Example: $(“div:last”).prevAll()
Result: <div></div><div></div><div></div>
11. siblings([expr])
取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。
Test case: <p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
Example: $("div").siblings()
Result: [ <p>Hello</p>, <p>And Again</p> ]
3) 过滤函数
1. eq(insex)
获取第N个元素.这个元素的位置是从0算起。
Test case: <p> This is just a test.</p> <p> So is this</p>
Example: $(“p”).eq(1)
Result: <p> So is this</p>
2. filter(expr) / filter(fn)
筛选出与指定表达式匹配的元素集合。用于缩小匹配的范围,用逗号分隔多个表达式
Test case: <p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>
Example: $("p").filter(".selected");
Result: <p class="selected">And Again</p>
Test case: <p><ol><li>Hello</li></ol></p><p>How are you?</p>
Example:
$("p").filter(function(index) {
return $("ol", this).length == 0;
});
Result: <p>How are you?</p>
3. hasClass(class)
检查当前的元素是否含有某个特定的类,如果有,则返回true。这其实就是 is("." + class)。
Test case: <div class="protected"></div><div></div>
Example: $(“div”).hasClass("protected")
Result: true
4. is(expr)
用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。
Test case: <form><input type="checkbox" /></form>
Example: $("input[type='checkbox']").parent().is("form")
Result: true
5. map(callback)
将一组元素转换成其他数组(不论是否是元素数组)
Test case:
<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>
Example:
$("p").append( $("input").map(function(){
return $(this).val();
}).get().join(", ") );
Result:
<p>John, password, http://ejohn.org/</p>
6. not(expr)
删除与指定表达式匹配的元素
Test case: <p>Hello</p><p id="selected">Hello Again</p>
Example: $("p").not( $("#selected")[0] )
Result: <p>Hello</p>
7. slice(start, [end])
选取一个匹配的子集
Test case: <p>Hello</p><p>cruel</p><p>World</p>
Example: $("p").slice(0, 1).wrapInner("<b></b>")
Result: <p><b>Hello</b></p>