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 相关文章推荐
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
jQuery返回定位插件详解
May 15 jQuery
最常用的jQuery表单验证(简单)
May 23 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
jQuery zTree插件使用简单教程
Aug 16 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将数据库导出成excel的方法
2010/05/07 PHP
PHP内核探索之变量
2015/12/22 PHP
php自定义函数转换html标签示例
2016/09/29 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
JavaScript弹出窗口方法汇总
2014/08/12 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
javascript比较语义化版本号的实现代码
2016/09/09 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
2017/01/18 Javascript
React props和state属性的具体使用方法
2018/04/12 Javascript
jQuery中将json数据显示到页面表格的方法
2018/05/27 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
2019/05/30 jQuery
js常见遍历操作小结
2019/06/06 Javascript
详解Element-UI中上传的文件前端处理
2019/08/07 Javascript
jdk1.8+vue elementui实现多级菜单功能
2020/09/24 Javascript
jquery简易手风琴插件的封装
2020/10/13 jQuery
python遍历目录的方法小结
2016/04/28 Python
Python Flask前后端Ajax交互的方法示例
2018/07/31 Python
python得到windows自启动列表的方法
2018/10/14 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
PyQt5实现类似别踩白块游戏
2019/01/24 Python
对Python3中dict.keys()转换成list类型的方法详解
2019/02/03 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
tensorflow保持每次训练结果一致的简单实现
2020/02/17 Python
给keras层命名,并提取中间层输出值,保存到文档的实例
2020/05/23 Python
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
html5 input输入实时检测以及延时优化
2018/07/18 HTML / CSS
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
护理学毕业生自荐信
2013/10/02 职场文书
幼儿园教研活动方案
2014/01/19 职场文书
2014年学生会工作总结
2014/11/07 职场文书
实习生个人总结范文
2015/02/28 职场文书
Java实现带图形界面的聊天程序
2022/06/10 Java/Android