首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

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常见节点操作实例分析

- Author -

SpecYue

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
简单实现jQuery弹幕效果
May 06 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
jquery实现下载图片功能
Jul 18 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 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
Lifecycle(1) ResNet50(1) tensorflow(2) 内存泄露(1) Inception(2) 微信(2) Xception(1) PostMapping(1) Spring(9) Seaborn(1)
You might like
php 随机生成10位字符代码
2009/03/26 PHP
深入PHP运行环境配置的详解
2013/06/04 PHP
php利用cookies实现购物车的方法
2014/12/10 PHP
typecho插件编写教程（一）:Hello World
2015/05/28 PHP
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
JS获取页面input控件中所有text控件并追加样式属性
2013/02/25 Javascript
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
解析jquery中的ajax缓存问题
2013/12/19 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
2015/01/05 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
javascript实现简单的全选和反选功能
2016/01/05 Javascript
下雪了 javascript实现雪花飞舞
2020/08/02 Javascript
JS产生随机数的几个用法详解
2016/06/22 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
2016/07/19 Javascript
80%应聘者都不及格的JS面试题
2017/03/21 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
2017/05/08 Javascript
jQuery实现用户信息表格的添加和删除功能
2017/09/12 jQuery
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
[58:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第一场 1月31日
2021/03/11 DOTA
Python里隐藏的“禅”
2014/06/16 Python
零基础写python爬虫之urllib2使用指南
2014/11/05 Python
Python的Asyncore异步Socket模块及实现端口转发的例子
2016/06/14 Python
Python使用pickle模块报错EOFError Ran out of input的解决方法
2018/08/16 Python
python3爬虫怎样构建请求header
2018/12/23 Python
幼师专业求职推荐信
2013/11/08 职场文书
奶茶店创业计划书
2014/08/14 职场文书
查摆问题自我剖析材料
2014/08/18 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书
销售经理岗位职责
2015/01/31 职场文书
神农溪导游词
2015/02/11 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书
Node实现搜索框进行模糊查询
2021/06/28 Javascript