JQuery常见节点操作实例分析
SpecYue 人气:0本文实例讲述了JQuery常见节点操作。分享给大家供大家参考,具体如下:
插入节点
append()
和appengTo()
:在现存元素内部,从后面插入
prepend()
和prependTo()
:在现存元素外部,从前面插入
after()
和insertAfter()
:在现存元素外部,从后面插入
before()
和insertBefore()
:在现存元素外部,从前面插入
新建节点的插入
<!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('')这种用字符串的方式塞进去的性能是最高的, // 但是有点时候不方便用,因为这样会重写div1里面的元素 $a=$('<a href="#" rel="external nofollow" >链接</a>>'); $('#div1').append($a);/*在最后加入字符串,append从现成的元素的后面插入元素*/ $a.appendTo($('#div1'));/*和append效果相同*/ $p=$('<p>这是一个p标签</p>'); $("#div1").prepend($p); $h2=$('<h2>这是一个h2</h2>'); $('#div1').after($h2); $h3=$('<h3>这是一个h3</h3>'); $('#div1').before($h3); }) </script> </head> <body> <div id="div1"> <h1> 这是一个h1元素</h1> </div> </body> </html>
已有节点的插入
<!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"));/*换两个节点顺序*/ }) </script> </head> <body> <h1 id="title01">这是一个h1元素</h1> <p id="p1">这是一个p元素</p> <span id="span01">这是一个span元素</span> </body> </html>
删除节点
remove()
:删除节点
<!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"));/*换两个节点顺序*/ $('#p1').remove(); }) </script> </head> <body> <h1 id="title01">这是一个h1元素</h1> <p id="p1">这是一个p元素</p> <span id="span01">这是一个span元素</span> </body> </html>
关于a标签的问题
<a href="javascript:alert('ok?');" rel="external nofollow" >链接</a>
如果这样写就是插入JavaScript语句,弹出ok,如果是写#就是连接到页面顶部。
todolist网页
实现一个用户自己列计划的网页
<!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("请输入内容"); 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>学习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>学习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>学习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>
希望本文所述对大家jQuery程序设计有所帮助。
加载全部内容