您好,登錄后才能下訂單哦!
text()、html()是相對(duì)粗獷的方法,直接讀取或設(shè)置元素的內(nèi)容;
另外一些較為細(xì)致的操作是對(duì)某一個(gè)jQuery對(duì)象的增加、刪除。
后面講到的替換節(jié)點(diǎn)、包裹節(jié)點(diǎn)用到的比較少。
1、text(), html()
(1)使用html()方法讀取或者設(shè)置元素的innerHTML
(2)使用text()方法讀取或設(shè)置元素的innerText
2、動(dòng)態(tài)創(chuàng)建和添加、刪除DOM節(jié)點(diǎn)
2.1、創(chuàng)建DOM節(jié)點(diǎn)
使用$(html字符串)來(lái)創(chuàng)建DOM節(jié)點(diǎn),并且返回一個(gè)jQuery對(duì)象,然后調(diào)用append等方法將新創(chuàng)建的節(jié)點(diǎn)添加到DOM中。$()創(chuàng)建的就是一個(gè)jQuery對(duì)象,可以完全進(jìn)行操作
創(chuàng)建radio,使用$('<input name=""/>');,而不要在創(chuàng)建好后通過(guò)attr('name','gender')//通過(guò)attr()設(shè)置name,在IE6下面有問(wèn)題
2.2、添加和刪除DOM節(jié)點(diǎn)
append 方法用來(lái)在元素的末尾追加元素(最后一個(gè)子節(jié)點(diǎn))
prepend,在元素的開始添加元素(第一個(gè)子節(jié)點(diǎn))
after 在元素之后添加元素
before 在元素之前添加元素
其他追加方法(將自己追加到某元素)
子元素.appendTo(父元素);
主動(dòng)追加到最后一個(gè)
子元素.prependTo(父元素)
主動(dòng)追加到第一個(gè)
A.insertBefore(B)
將A加到B前面,等同于B.before(A)
X.insertAfter(Y)
將X追加到Y(jié)的后面,等同于Y.after(X)
刪除節(jié)點(diǎn)
empty() 清空某元素下的所有子節(jié)點(diǎn)
內(nèi)部實(shí)現(xiàn):while(ele.firstChild){ele.removeChild(ele.firstChild);}
remove(selector) 刪除當(dāng)前元素,返回值為被刪除的元素。還可以繼續(xù)使用被刪除的節(jié)點(diǎn)。比如重新添加到其他節(jié)點(diǎn)下。
2.3、案例
示例:創(chuàng)建一個(gè)層
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>jQuery測(cè)試</title> <script type="text/javascript" src="js/jquery-1.12.3.js"></script> <script type="text/javascript"> $(function () { $('#btn').click(function () { //創(chuàng)建一個(gè)層,并把該層添加到body中 var divObj = $('<div id="dv"></div>').appendTo($('body')); //divObj.css('width','300px').css('height','50px').css('border','solid 1px red').css('margin','5px'); divObj.css({"width":"300px","height":"50px","border":"solid 1px red","margin":"5px"}); }); }); </script> </head> <body> <input type="button" id="btn" value="創(chuàng)建一個(gè)層"/> </body> </html>
效果圖
示例:從json中取數(shù)據(jù),動(dòng)態(tài)創(chuàng)建表格
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>jQuery測(cè)試</title> <script type="text/javascript" src="js/jquery-1.12.3.js"></script> <script type="text/javascript"> var data = {"百度":"http://www.baidu.com","新浪":"http://www.sina.com","谷歌":"http://www.google.com"}; $(function(){ $('#btn').click(function () { //創(chuàng)建table var tableObj = $('<table border="1"></table>'); for(var key in data) { var value=data[key]; //創(chuàng)建tr var trObj = $('<tr><td>'+key+'</td><td><a href="'+value+'">'+key+'</a></td></tr>'); //將tr添加到table內(nèi) tableObj.append(trObj); } //將table添加到body當(dāng)中 $('body').append(tableObj); }); }); </script> </head> <body> <input type="button" id="btn" value="按鈕"/> </body> </html>
效果圖
示例:無(wú)刷新評(píng)論
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>jQuery測(cè)試</title> <script type="text/javascript" src="js/jquery-1.12.3.js"></script> <script type="text/javascript"> $(function () { $('#btn').click(function () { var uname = $('#txt').val(); var umsg = $('#msg').val(); var trObj = $('<tr><td>'+uname+'</td><td>'+umsg+'</td></tr>'); //$('#tb').append(trObj);//append trObj.appendTo($('#tb'));//appendTo }); }); </script> </head> <body> <table id="tb" border="1" > <tr><td>小明</td><td>你好啊</td></tr> </table> <br/> <input type="text" id="txt"/><br/> <textarea id="msg" rows="5" cols="50"></textarea><br/> <input type="button" id="btn" value="發(fā)表"/><br/> </body> </html>
效果圖
示例:刪除元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>jQuery測(cè)試</title> <script type="text/javascript" src="js/jquery-1.12.3.js"></script> <style type="text/css"> .cls{ width:300px; height:200px; border:solid 1px red; } </style> <script type="text/javascript"> $(function () { $('#btn').click(function () { // $('#dv').empty();//清空層中的元素 // $('#dv').remove();//層沒(méi)了,相當(dāng)于自殺 $('input').remove('.mycls');//移除應(yīng)用了cls樣式的層 }); }); </script> </head> <body> <input type="button" id="btn" value="刪除"/> <div id="dv" class="cls"> <input type="text" class="mycls" value="mycls"/> <input type="text" value="沒(méi)有樣式"/> </div> </body> </html>
效果圖
示例:權(quán)限選擇案例:一個(gè)下拉框中的選項(xiàng)放置另一個(gè)下拉列表框選項(xiàng)中
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>jQuery測(cè)試</title> <script type="text/javascript" src="js/jquery-1.12.3.js"></script> <script type="text/javascript"> $(function () { $('#toRight').click(function () { $('#se1 :selected').appendTo($('#se2')); $('select option').attr('selected',false); }); $('#toLeft').click(function () { $('#se2 :selected').appendTo($('#se1')); $('select option').attr('selected',false); }); $('#toAllRight').click(function () { $('#se1 option').appendTo($('#se2')); $('select option').attr('selected',false); }); $('#toAllLeft').click(function () { $('#se2 option').appendTo($('#se1')); $('select option').attr('selected',false); }); }); </script> </head> <body> <div > <select multiple="multiple" id="se1"> <option>添加</option> <option>刪除</option> <option>修改</option> <option>查詢</option> <option>打印</option> </select> <div > <input type="button" value=">" id="toRight"/> <input type="button" value="<" id="toLeft"/> <input type="button" value=">>" id="toAllRight"/> <input type="button" value="<<" id="toAllLeft"/> </div> <select multiple="multiple" id="se2"></select> </div> </body> </html>
效果圖
3、替換節(jié)點(diǎn)和包裹節(jié)點(diǎn)
3.1、替換節(jié)點(diǎn)
$("br").replaceWith("<hr/>");
用<hr/>替換br
$('<br/>').replaceAll('hr');
用<br/>元素替換所有的hr
調(diào)用者也得是選擇器選擇到的元素
3.2、包裹節(jié)點(diǎn)
wrap()方法用來(lái)將所有元素逐個(gè)用指定標(biāo)簽包裹
wrapAll()
wrapInner()//在內(nèi)部圍繞
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。