|
1、選擇器+遍歷 $('div').each(function (i){ i就是索引值 this 表示獲取遍歷每一個(gè)dom對(duì)象 }); 2、選擇器+遍歷 $('div').each(function (index,domEle){ index就是索引值 domEle 表示獲取遍歷每一個(gè)dom對(duì)象 }); 3、更適用的遍歷方法 1）先獲取某個(gè)集合對(duì)象 2）遍歷集合對(duì)象的每一個(gè)元素 var d=$("div"); $.each(d,function (index,domEle){ d是要遍歷的集合 index就是索引值 domEle 表示獲取遍歷每一個(gè)dom對(duì) }); 案例： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>屬性選擇器學(xué)習(xí)</title> <script language="JavaScript" type="text/javascript" src="../include/jQuery.js"></script> <script language="javascript" type="text/javascript"> //使用jquery加載事件 $(document).ready(function (){ //<input id="btn0" type="button" value="利用jquery對(duì)象實(shí)現(xiàn) 修改表單中可見(jià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對(duì)象實(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對(duì)象實(shí)現(xiàn) 獲取選中的復(fù)選框的個(gè)數(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對(duì)象實(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="可見(jiàn)元素1" /> <input type="text" value="不可見(jiàn)元素1" disabled="disabled" /> <input type="text" value="可見(jiàn)元素2" /> <input type="text" value="不可見(jiàn)元素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開(kāi)發(fā)工程師</option> <option>數(shù)據(jù)庫(kù)管理員</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對(duì)象實(shí)現(xiàn) 修改表單中可修改的文本域的值 $('input[type=text]:enabled')" /><br> <input id="btn1" type="button" value="利用jquery對(duì)象實(shí)現(xiàn) 修改表單中不可修改的文本域的值 $('input[type=text]:disabled')" /><br> <input id="btn2" type="button" value="利用jquery對(duì)象實(shí)現(xiàn) 獲取選中的復(fù)選框的個(gè)數(shù) $('input[type=checkbox]:checked')" /><br> <input id="btn3" type="button" value="利用jquery對(duì)象實(shí)現(xiàn) 獲取選中的下拉菜單的內(nèi)容 $('select option:selected')" /><br> </div> </body> </html> |
|
|
