本文實(shí)例講述了JQuery常見節(jié)點(diǎn)操作。分享給大家供大家參考，具體如下：
插入節(jié)點(diǎn)
append()和appengTo()：在現(xiàn)存元素內(nèi)部，從后面插入prepend()和prependTo()：在現(xiàn)存元素外部，從前面插入after()和insertAfter()：在現(xiàn)存元素外部，從后面插入before()和insertBefore():在現(xiàn)存元素外部，從前面插入
新建節(jié)點(diǎn)的插入
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(function () { // $('#div1').html('')這種用字符串的方式塞進(jìn)去的性能是最高的， // 但是有點(diǎn)時(shí)候不方便用，因?yàn)檫@樣會(huì)重寫div1里面的元素 $a=$('<a href="#" rel="external nofollow" >鏈接</a>>'); $('#div1').append($a);/*在最后加入字符串，append從現(xiàn)成的元素的后面插入元素*/ $a.appendTo($('#div1'));/*和append效果相同*/ $p=$('<p>這是一個(gè)p標(biāo)簽</p>'); $("#div1").prepend($p); $h2=$('<h2>這是一個(gè)h2</h2>'); $('#div1').after($h2); $h3=$('<h3>這是一個(gè)h3</h3>'); $('#div1').before($h3); }) </script></head><body> <div id="div1"> <h1> 這是一個(gè)h1元素</h1> </div></body></html>已有節(jié)點(diǎn)的插入
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(function () { $('#p1').insertBefore($("#title01"));/*換兩個(gè)節(jié)點(diǎn)順序*/ }) </script></head><body> <h1 id="title01">這是一個(gè)h1元素</h1> <p id="p1">這是一個(gè)p元素</p> <span id="span01">這是一個(gè)span元素</span></body></html>刪除節(jié)點(diǎn)
remove()：刪除節(jié)點(diǎn)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(function () { $('#p1').insertBefore($("#title01"));/*換兩個(gè)節(jié)點(diǎn)順序*/ $('#p1').remove(); }) </script></head><body> <h1 id="title01">這是一個(gè)h1元素</h1> <p id="p1">這是一個(gè)p元素</p> <span id="span01">這是一個(gè)span元素</span></body></html>關(guān)于a標(biāo)簽的問題
<a href="javascript:alert('ok?');" rel="external nofollow" >鏈接</a>如果這樣寫就是插入JavaScript語(yǔ)句，彈出ok，如果是寫#就是連接到頁(yè)面頂部。
todolist網(wǎng)頁(yè)
實(shí)現(xiàn)一個(gè)用戶自己列計(jì)劃的網(wǎng)頁(yè)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>todolist</title> <style type="text/css"> .list_con { width: 400px; margin: 50px auto 0; } .inputtxt { width: 350px; height: 30px; border: 1px solid #ccc; padding: 0px; text-indent: 10px; } .inputbtn { width: 40px; height: 32px; padding: 0px; border: 1px solid #ccc; } .list { margin: 0; padding: 0; list-style: none; margin-top: 20px; } .list li { height: 30px; line-height: 30px; border-bottom: 1px solid #ccc; } .list li span { float: left; } .list li a { float: right; text-decoration: none; margin: 0 10px; } </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(function () { var $inputtxt = $('#txt1'); var $btn = $('#btn1'); var $ul = $('#list'); $btn.click(function () { var $val = $inputtxt.val(); /*獲取input框的值*/ if ($val == "") { alert("請(qǐng)輸入內(nèi)容"); return; } else { alert(1); var $li=$('<li><span>'+$val+'</span><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="up"> ↑ </a><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="down"> ↓ </a><a/n' + ' href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="del">刪除</a></li>'); $li.appendTo($ul); $inputtxt.val("");/*獲取到值之后，清空*/ var $a=$li.find('.del'); $a.click(function () { $(this).parent().remove(); }); $li.find('.up').click(function () { $(this).parent().insertBefore($(this).parent().prev()); }); $li.find('.down').click(function () { $(this).parent().insertAfter($(this).parent().next()); }); } }); $del=$(".del"); $del.click(function () { $(this).parent().remove(); }); $('.up').click(function () { $(this).parent().insertBefore($(this).parent().prev()); }); $('.down').click(function () { $(this).parent().insertAfter($(this).parent().next()); }); }) </script></head><body><div class="list_con"> <h2>To do list</h2> <input type="text" name="" id="txt1" class="inputtxt"> <input type="button" name="" value="增加" id="btn1" class="inputbtn"> <ul id="list" class="list"> <li><span>學(xué)習(xí)html</span><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="up"> ↑ </a><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="down"> ↓ </a><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="del">刪除</a></li> <li><span>學(xué)習(xí)css</span><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="up"> ↑ </a><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="down"> ↓ </a><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="del">刪除</a></li> <li><span>學(xué)習(xí)javascript</span><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="up"> ↑ </a><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="down"> ↓ </a><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="del">刪除</a></li> </ul></div></body></html>感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.VeVB.COm/code/HtmlJsRun 測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery操作DOM節(jié)點(diǎn)方法總結(jié)》、《jQuery頁(yè)面元素操作技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
