JQuery常见节点操作实例分析


Posted in jQuery onMay 15, 2019

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

实现一个用户自己列计划的网页

JQuery常见节点操作实例分析

<!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.3water.com/code/HtmlJsRun 测试上述代码运行效果。

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

jQuery 相关文章推荐
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
jQuery返回定位插件详解
May 15 jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
jquery实现手风琴案例
May 04 jQuery
JQuery获得内容和属性方法解析
May 30 jQuery
JQuery属性操作与循环用法示例
May 15 #jQuery
jquery+css实现Tab栏切换的代码实例
May 14 #jQuery
jquery实现二级导航下拉菜单效果实例
May 14 #jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 #jQuery
jquery 验证用户名是否重复代码实例
May 14 #jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 #jQuery
JQuery animate动画应用示例
May 14 #jQuery
You might like
用PHP 快速生成 Flash 动画的方法
2007/03/06 PHP
PHP UTF8中文字符截断函数代码
2012/09/11 PHP
域名和cookie问题(域名后缀)
2012/10/10 PHP
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
php定时计划任务与fsockopen持续进程实例
2014/05/23 PHP
浅谈php命令行用法
2015/02/04 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
PHP设计模式之装饰器模式定义与用法简单示例
2018/08/13 PHP
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
2012/05/23 Javascript
关于div自适应高度/左右高度自适应一致的js代码
2013/03/22 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
2014/01/13 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
jQuery的animate函数实现图文切换动画效果
2015/05/03 Javascript
JS实现来回出现文字的状态栏特效代码
2015/10/31 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
原生JS控制多个滚动条同步跟随滚动效果
2017/12/22 Javascript
vue以组件或者插件的形式实现throttle或者debounce
2019/05/22 Javascript
Java 生成随机字符的示例代码
2021/01/13 Javascript
python多线程抓取天涯帖子内容示例
2014/04/03 Python
Python如何实现守护进程的方法示例
2017/02/08 Python
python 自动去除空行的实例
2018/07/24 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
Python浮点数四舍五入问题的分析与解决方法
2019/11/19 Python
python中numpy数组与list相互转换实例方法
2021/01/29 Python
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
美术专业个人自我评价
2014/01/18 职场文书
总经理秘书岗位职责
2014/03/17 职场文书
2014年保卫部工作总结
2014/11/21 职场文书
党员证明模板
2015/06/19 职场文书
幼儿教师三分钟演讲稿
2019/06/21 职场文书
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技