jQuery的过滤
jQuery的过滤分共为九种方法
1. .eq(): 减少匹配元素的集合为指定的所索引的哪一个元素。
- .eq(index): 一个整数，指示元素的位置，以0为基数。
- .eq(-index): 一个整数，指示元素的位置，从集合中的最后一个元素开始倒数。
2. .filter(): 筛选元素集合中匹配表达式 或通过传递函数测试的 那些集合。
- .filter(selector): 一个用于匹配元素的选择器字符串。
<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>
<script type="text/javascript">
$("li").filter(':even').css('background-color', 'red');
</script>
- .filter( function(index)): 一个函数用作测试集合中的每个元素。this是当前DOM元素。
<body>
<ul>
<li>list <strong>item 1</strong></li>
<li><strong>list</strong> <strong>item 2</strong></li>
<li>list item 3</li>
</ul>
</body>
<script type="text/javascript">
$('li').filter(function(index){
return $('strong', this).length==1;
}).css('color', 'red');
</script>
//该代码是只改变有一个strong标签的li
- .filter(element)： 一个匹配当前元素集合的元素。
$('div').filter($('#unique'));
- .filter(jQuery object): 现有jQuery对象，用于进一步筛选当前元素集合。
$("div").filter(document.getElementById("unique"));
3. .first(): 获取匹配元素集合中的第一个元素。
- .first(): 该方法不接受任何参数。
4. .has(): 筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素。
- .has(selector)： 一个用于匹配元素的选择器字符串。
<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>
<script>
$('li').has('ul').css('background-color', 'red');
</script>
5. is(): 判断当前匹配的元素集合中的元素，是否为一个选择器， DOM元素， 或者jQuery对象， 如果这些元素至少匹配一个给定的参数， 那么返回true
- .is(selector): 一个字符串，包含一个用来匹配元素的选择器表达式
- .is(element): 一个用于匹配元素的DOM元素
- .is(jquery object):现有的jQuery对象， 以匹配当前元素
<ul>
<li>list <strong>item 1</strong></li>
<li><span>list item 2</span></li>
<li>list item 3</li>
</ul>
<script>
$("ul").click(function(event) {
var $target = $(event.target);
if ( $target.is("li") ) {
$target.css("background-color", "red");
}
});
</script>
- .is(function(index)): 一个函数，用来测试集合中元素， 它接受一个参数，index， 这是元素在jQuery集合中的索引位置， 在函数中， this指的是当前的DOM元素
<ul>
<li><strong>list item 1</strong></li>
<li><strong>list</strong> <strong> item 2</strong></li>
<li>list item 3</li>
</ul>
<script>
$(document).ready(function() {
$("li").click(function() {
var isWithTwo = $(this).is(function() {
return $('strong', this).length===2;
})
if(isWithTwo) {
$(this).css("background-color",'red');
} else {
$(this).css("background-color",'green');
}
})
})
</script>
6. .last():获取匹配元素集合中的最后一个元素
- .last(): 该方法不接受任何参数。
7. .map(): 通过一个函数匹配当前集合中的每一个元素， 产生一个包含新的jQuery对象。
- .map(callback(index, domElement)): 一个函数对象， 会在处理集合中的每一个元素时被调用。
<div id="1">1</div>
<div id="2">1</div>
<div id="3">1</div>
<div id="4">1</div>
<p></p>
<script>
$("p").append( $("div").map(function() {
return this.id;
}).get().join(", ") );
//这里不能采用$(this).id， 因为jQuery对象并没有这个方法
//这里的this指向每次迭代时当前的DOM元素
</script>
8. .not(): 从匹配的元素集合中移除指定的元素
- .not(selector): 一个用于匹配元素的选择器字符串
- .not(function(index)): 一个函数用作测试集中的每个元素
9. .slice(): 根据指定的元素集合，过滤匹配的元素集合，并生成一个新的jQuery对象
- .slice(start, end): 这里的start指的是起始坐标， end指的是结束坐标。这里包含start，不包含end。
- .slice(start): 指从开始到结束。
网友评论