JQuery常见节点操作实例分析

2019-11-19 11:34:02

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.VeVB.COm/code/HtmlJsRun 测试上述代码运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery操作DOM节点方法总结》、《jQuery页面元素操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

上一篇：pm2发布node配置文件ecosystem.json详解

下一篇：JS算法题之查找数字在数组中的索引位置