023_遍历过滤
1. first()方法
1.1. first()方法將匹配元素集合縮減為集合中的第一個元素。
1.2. 語法
$(selector).first()1.3. 例子
1.3.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>first()方法</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$("li").first().css({"color":"red","border":"2px solid red"});});});</script><style type="text/css">.ancestors ul{width: 300px; float: left;}.ancestors ul, .ancestors ul *{ display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}</style></head><body class="ancestors"> <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><ul><li>list item 1</li><li class="myLi">list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li></ul><span style="display: block; clear: left;"><button id="btn1">第一個元素</button></span></body> </html>1.3.2. 效果圖
2. last()方法
2.1. last()方法將匹配元素集合縮減為集合中的最后一個元素。
2.2. 語法
$(selector).last()2.3. 例子
2.3.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>last()方法</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$("li").last().css({"color":"red","border":"2px solid red"});});});</script><style type="text/css">.ancestors ul{width: 300px; float: left;}.ancestors ul, .ancestors ul *{ display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}</style></head><body class="ancestors"> <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><ul><li>list item 1</li><li class="myLi">list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li></ul><span style="display: block; clear: left;"><button id="btn1">最后一個元素</button></span></body> </html>2.3.2. 效果圖
3. eq()方法
3.1. eq()方法將匹配元素集縮減值指定index上的一個。
3.2. 語法
$(selector).eq(index)3.3. 參數
3.4. 負數索引
3.4.1. 如果提供負數, 則指示從集合結尾開始的位置, 而不是從開頭開始。
3.4.2. 例如:
<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" src="jquery.js"></script> <script type="text/javascript">$(document).ready(function(){$('li').eq(-2).css('background-color', 'red');}); </script>3.4.3. 項目4的背景變為紅色, 這是因為它是集合結尾開始的第二個。
3.5. 如果無法根據指定的index參數找到元素, 則該方法構造帶有空集的jQuery對象, length屬性為0。
3.6. 例子
3.6.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>eq()方法</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$("li").eq(6).css({"color":"red","border":"2px solid red"});});$('#btn2').click(function(){$("li").eq(-6).css({"color":"blue","border":"2px solid blue"});});$('#btn3').click(function(){$("li").eq(16).css({"color":"green","border":"2px solid green"});});});</script><style type="text/css">.ancestors ul{width: 300px; float: left;}.ancestors ul, .ancestors ul *{ display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}</style></head><body class="ancestors"> <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><ul><li>list item 1</li><li class="myLi">list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li></ul><span style="display: block; clear: left;"><button id="btn1">索引元素</button> <button id="btn2">負數索引元素</button> <button id="btn3">無法找到的索引</button></span></body> </html>3.6.2. 效果圖
4. filter()方法
4.1. filter()方法將匹配元素集合縮減為匹配指定選擇器的元素。
4.2. 語法 1
$(selector).filter(selector)4.3. 通過函數而不是選擇器來篩選元素。對于每個元素, 如果該函數返回true, 則元素會被包含在已篩選集合中; 否則, 會排除這個元素。
4.4. 參數
4.5. 語法 2
$(selector).filter(function(index))4.6. 參數
4.7. 例子
4.7.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>filter()方法</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$("li").filter(".myLi").css({"color":"red","border":"2px solid red"});});$('#btn2').click(function(){$("li").filter(function(index) {return $(this).hasClass('myLi');}).css({"color":"red","border":"2px solid red"});});});</script><style type="text/css">.ancestors ul{width: 300px; float: left;}.ancestors ul, .ancestors ul *{ display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}</style></head><body class="ancestors"> <ul><li>list item 1</li><li class="myLi">list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li></ul><ul><li>list item 1</li><li class="myLi">list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li></ul><span style="display: block; clear: left;"><button id="btn1">過濾元素</button> <button id="btn2">函數過濾元素</button></span></body> </html>4.7.2. 效果圖
5. not()方法
5.1. not()方法返回不匹配標準的所有元素。
5.2. not()方法與filter()相反。
5.3. 語法 1
$(selector).not(selector)
5.4. 參數
5.5. 語法 2
$(selector).not(element)
5.6. 參數
5.7. 語法 3
$(selector).not(function(index))
5.8. 參數
5.9. 例子
5.9.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>not()方法</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$("li").not(".myLi").css({"color":"red","border":"2px solid red"});});$('#btn2').click(function(){$("li").not($(".myLi")).css({"color":"red","border":"2px solid red"});});$('#btn3').click(function(){$("li").not(document.getElementsByClassName("myLi")).css({"color":"red","border":"2px solid red"});});$('#btn4').click(function(){$("li").not(function(index){return index > 4;}).css({"color":"red","border":"2px solid red"});});});</script><style type="text/css">.ancestors ul{width: 300px; float: left;}.ancestors ul, .ancestors ul *{ display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}</style></head><body class="ancestors"> <ul><li>list item 1</li><li class="myLi">list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li></ul><ul><li>list item 1</li><li class="myLi">list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li></ul><span style="display: block; clear: left;"><button id="btn1">不匹配元素</button> <button id="btn2">不匹配元素(jQuery對象)</button><button id="btn3">不匹配元素(DOM節點)</button> <button id="btn4">不匹配元素(函數)</button></span></body> </html>5.9.2. 效果圖
?
總結
