關於each()、find()、filter()遍歷節點的操作方法 each語法: each(fn) ; 返回值:jQuery fn:代表對於每個匹配元素所要執行的函數 each()方法共有三種形式 第一種(不帶參數): $('img').each(function(){ }); 註意:此時的thi ...
關於each()、find()、filter()遍歷節點的操作方法
each語法:
each(fn) ;
返回值:jQuery
fn:代表對於每個匹配元素所要執行的函數
each()方法共有三種形式
第一種(不帶參數):
$('img').each(function(){
$(this).toggleClass("example");
});
註意:此時的this代指的是DOM對象而不是jQuery對象
如果想得到jQuery對象,可以使用$(this)函數
第二種(帶一個參數):
$('img').each(function(i){
this.src="test"+i+"jpg";
});
第三種(帶兩個參數):
$('img').each(function(i,element){
this.src="test"+i+"jpg";
// element.src="test"+i+"jpg";
});
概述:以每一個匹配元素作為上下文來執行一個函數
每次執行傳遞進來的函數時,函數中的this關鍵字都指向一個不同的DOM元素(每次都是一個不同的匹配元素).而且在每次執行函數時,都會給函數傳遞一個表示作為執行環境的元素在匹配的元素集合總所處的位置的數字值作為參數(從0開始的整型)。返回‘false’將停止迴圈(就像在普通的迴圈中使用‘break’)。返回‘true’跳至下一個迴圈(就像在普通迴圈中使用‘continue’)。
最常用的形式是第二種,接下來我們寫一個示例
<title>關於each</title> <script src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript"> $(function () { $("[type=button]").click(function () { var hobby = ""; $(":checkbox:checked").each(function (i,element) { //$(element).val(); hobby += (++i) +"." + $(this).val()+"<br/>"; }); $("#hobby").html(hobby); }); }); </script> </head> <body> <div>請選擇您的愛好</div> <ul> <li><input type="checkbox" value="登山" /> 登山</li> <li> <input type="checkbox" value="游泳" /> 游泳</li> <li><input type="checkbox" value="跳高"/> 跳高</li> <li><input type="checkbox" value="彈吉他"/> 彈吉他</li> <li><input type="checkbox" value="小提琴"/> 小提琴</li> <li><input type="checkbox" value="葫蘆絲"/> 葫蘆絲</li> </ul> <hr /> <input type="button" value="查看我的愛好"/> <div id="hobby"></div> </body> </html>
查找方法--------------------------------find()
搜索所有與指定表達式匹配的元素
示例:
$('p').find('span'); //在所有p元素的後代節點中查找span元素
註意:find()是不允許空參的(即必須要跟一個選擇器)
情景:如果我就想拿p標簽里的所有後代,那應該怎麼辦?
解決方案:那就用到了我們之前學習的全局選擇器(*) 一般情況不會用到
----------------------------------------filter()
篩選出與指定表達式匹配的元素集合
這個方法用於縮小匹配的範圍。用逗號分隔多個表達式
示例如下: