jQuery中each遍歷的三種方法實(shí)例分析
本文實(shí)例講述了jQuery中each遍歷的三種方法。分享給大家供大家參考,具體如下:
1、選擇器+遍歷
$('div').each(function (i){ //i就是索引值 //this 表示獲取遍歷每一個dom對象 });
2、選擇器+遍歷
$('div').each(function (index,domEle){ //index就是索引值 //domEle 表示獲取遍歷每一個dom對象 });
3、更適用的遍歷方法
1)先獲取某個集合對象
2)遍歷集合對象的每一個元素
var d=$("div"); $.each(d,function (index,domEle){ //d是要遍歷的集合 //index就是索引值 //domEle 表示獲取遍歷每一個dom對 });
案例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.dbjr.com.cn 屬性選擇器學(xué)習(xí)</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script language="javascript" type="text/javascript"> //使用jquery加載事件 $(document).ready(function (){ //<input id="btn0" type="button" value="利用jquery對象實(shí)現(xiàn) 修改表單中可見的文本域的值 $('input[type=text]:enabled')" /> $("#btn0").click(function (){ //當(dāng)點(diǎn)擊按鈕后,設(shè)置id=two的div的背景顏色是綠色 $("input[type=text]:enabled").each(function(index,domEle){ //domEle.value="xxxxx"; $(domEle).val("xxxxxxxx"); }); }); //<input id="btn1" type="button" value="利用jquery對象實(shí)現(xiàn) 修改表單中不可修改的文本域的值 $('input[type=text]:disabled')" /> $("#btn1").click(function (){ //當(dāng)點(diǎn)擊按鈕后,設(shè)置id=two的div的背景顏色是綠色 $("input[type=text]:disabled").each(function(index,domEle){ //domEle.value="xxxxx"; $(domEle).val("xxxxxxxx"); }); }); //<input id="btn2" type="button" value="利用jquery對象實(shí)現(xiàn) 獲取選中的復(fù)選框的個數(shù) $('input[type=checkbox]:checked')" /> $("#btn2").click(function (){ //當(dāng)點(diǎn)擊按鈕后,設(shè)置id=two的div的背景顏色是綠色 alert($("input[type=checkbox]:checked").length); /* $("input[type=checkbox]:checked").each(function(index,domEle){ //alert(domEle.value); //alert(this.value); //alert($(this).val()); }); */ }); //<input id="btn3" type="button" value="利用jquery對象實(shí)現(xiàn) 獲取選中的下拉菜單的內(nèi)容 $('select option:selected')" /> $("#btn3").click(function (){ //當(dāng)點(diǎn)擊按鈕后,設(shè)置id=two的div的背景顏色是綠色 $("select option:selected").each(function(index,domEle){ //domEle.value="xxxxx"; alert($(domEle).text()); }); }); }); </script> </head> <body> <form method="post" action=""> <input type="text" value="可見元素1" /> <input type="text" value="不可見元素1" disabled="disabled" /> <input type="text" value="可見元素2" /> <input type="text" value="不可見元素2" disabled="disabled" /><br> <input type="checkbox" value="美女" />美女 <input type="checkbox" value="美男" />美男 <input type="checkbox" value="大爺" />大爺 <input type="checkbox" value="大媽" />大媽 <br> <input type="radio" value="男" />男 <input type="radio" value="女" />女 <br> <select id="zhiwei" size="5" multiple="multiple"> <option>PHP開發(fā)工程師</option> <option>數(shù)據(jù)庫管理員</option> <option>系統(tǒng)分析師</option> <option>保安</option> </select> <select id="xueli"> <option>大專</option> <option>中專</option> <option>小學(xué)</option> </select> </form> <div style="clear:both;"> <input id="btn0" type="button" value="利用jquery對象實(shí)現(xiàn) 修改表單中可修改的文本域的值 $('input[type=text]:enabled')" /><br> <input id="btn1" type="button" value="利用jquery對象實(shí)現(xiàn) 修改表單中不可修改的文本域的值 $('input[type=text]:disabled')" /><br> <input id="btn2" type="button" value="利用jquery對象實(shí)現(xiàn) 獲取選中的復(fù)選框的個數(shù) $('input[type=checkbox]:checked')" /><br> <input id="btn3" type="button" value="利用jquery對象實(shí)現(xiàn) 獲取選中的下拉菜單的內(nèi)容 $('select option:selected')" /><br> </div> </body> </html>
運(yùn)行結(jié)果:
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。
更多關(guān)于jQuery相關(guān)內(nèi)容還可查看本站專題:《jQuery操作DOM節(jié)點(diǎn)方法總結(jié)》、《jQuery遍歷算法與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
jQuery插件zTree實(shí)現(xiàn)刪除樹節(jié)點(diǎn)的方法示例
這篇文章主要介紹了jQuery插件zTree實(shí)現(xiàn)刪除樹節(jié)點(diǎn)的方法,結(jié)合實(shí)例形式分析了jQuery樹插件zTree針對節(jié)點(diǎn)的遍歷與刪除操作相關(guān)技巧,需要的朋友可以參考下2017-03-03jquery實(shí)現(xiàn)可自動判斷位置的彈出層效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)可自動判斷位置的彈出層效果代碼,可實(shí)現(xiàn)根據(jù)鼠標(biāo)位置進(jìn)行合理的判斷并顯示彈出層的功能,涉及jQuery鼠標(biāo)事件及頁面元素位置屬性的相關(guān)判定技巧,需要的朋友可以參考下2015-10-10jQueryUI Datepicker組件設(shè)置日期高亮
這篇文章主要介紹了jQueryUI Datepicker組件設(shè)置日期高亮的相關(guān)方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-10-10jQuery實(shí)現(xiàn)輸入框的放大和縮小功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)輸入框的放大和縮小功能,涉及jQuery基于事件響應(yīng)的頁面元素屬性動態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2018-07-07jquery內(nèi)置驗(yàn)證(validate)使用方法示例(表單驗(yàn)證)
這篇文章主要介紹了jquery內(nèi)置驗(yàn)證(validate)使用方法示例,在做表單驗(yàn)證的時候可以用到,下面看代碼使用方法2013-12-12JQuery對class屬性的操作實(shí)現(xiàn)按鈕開關(guān)效果
頁面中的按鈕開關(guān)效果想必大家都有見到過吧,接下來為大家詳細(xì)介紹下如何使用JQuery對class屬性的操作方法實(shí)現(xiàn),感興趣的朋友不要錯過2013-10-10AspNet中使用JQuery boxy插件的確認(rèn)框
Boxy是一個基于JQuery的彈出層插件,它有相對漂亮的外觀,功能齊全,支持iframe,支持模式窗口但相對于同樣的彈出層插件BlockUI它明顯笨重,但使用不那么方便。 兼容瀏覽器:IE6+/Firefox/Google Chrome2015-05-05jquery 校驗(yàn)中國身份證號碼實(shí)例詳解
這篇文章主要介紹了jquery 校驗(yàn)中國身份證號碼實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04