jQuery实现对网页节点的增删改查功能示例


Posted in jQuery onSeptember 18, 2017

本文实例讲述了jQuery实现对网页节点的增删改查功能。分享给大家供大家参考,具体如下:

前面介绍过《JavaScript针对网页节点的增删改查用法》,其实JavaScript对DOM的操作已经总结了很久的,而对于jQuery对网页节点的操作,虽然一直在用,但一直没有好好总结一下,实在是不应该。

下面举同样的例子来说明这个问题:

jQuery实现对网页节点的增删改查功能示例

如上图,提供3个按钮,1个下拉列表,1个输入框,提供增删改查的操作。

网页中最多10个节点,最少0个节点,多了不让加,少了不让减。

首先是本网页的基本布局:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jQuery对网页节点的增删改查</title>
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
  </head>
  <body>
    <button>增加节点</button>
    选择节点
    <select id="nodeList"></select>
    <button>删除节点</button>
    <input type="text" />
    <button>修改节点</button>
    <div></div>
  </body>
</html>

首先引入jQuery资源,之后,除了下拉列表以外其余节点没有ID,以展示两个Jquery获取节点的方式,一种通过id直接获取,一种通过获取子节点的方式的获取。

这里没什么特别的,关键是下面的jQuery编程:

<script type="text/javascript">
  var i = 1;//定义一个节点的id
  $("body>div").css("border","1px solid #cccccc");//先把body下面的所有div的上style="border:1px solid #cccccc"属性。此乃jQuery对节点的css操作。
  $("body>button:eq(0)").click(function(){//body下面的第0个按钮的onclick事件
    if (i < 11) {//如果节点数少于在1-10之间
      $("body>div").append("<p id='p" + i + "'>text" + i + "</p>");//则在body下面的所有div,也就是唯一一个div中添加上id=p1,p2,p3...的节点,且文本为text1,2,3...
      $("#nodeList").append("<option id='option" + i + "' value='" + i + "'>text" + i + "</p>");//同时在下拉列表中加上id=option1,option2....,value=1,2,3...的选项,一会儿,供下面的修改、删除使用
      i++;//节点数加1
      $("body>div").css("border","1px solid #cccccc");//如果符合要求,使边框变灰
    }
    else {//如果不符合要求,弹出警告,使边框变红
      alert("最多10个节点!");
      $("body>div").css("border","1px solid #ff0000");
    }
  });
  $("body>button:eq(1)").click(function(){//body下面的第1个按钮的onclick事件
    if (i > 1) {
      var removeId = $("#nodeList").val();//获取要下拉列表中的值
      $("#option" + removeId).remove();//删除相应的选项、p节点
      $("#p" + removeId).remove();
      i--;//节点数减1
      $("body>div").css("border","1px solid #cccccc");
    }
    else{
      alert("最少0个节点!");
      $("body>div").css("border","1px solid #ff0000");
    }
  });
  $("body>button:eq(2)").click(function(){//body下面的第2个按钮的onclick事件
    if (i > 1) {
      var updateText = $("body>input[type='text']").val();//获取文本框的输入内容
      var updateId = $("#nodeList").val();//获取下拉拉列表中的值
      var updateFlag = true;//用来验证是否有同名节点的flag
      $("body>div>p").each(function(){//遍历div下的所有p节点
        if(updateText==$(this).html()){//如果输入的值等于p节点的值
          alert("已有同名节点,不得修改!");//则弹出警告
          $("body>div").css("border", "1px solid #ff0000");
          updateFlag = false;//收起flag
        }
      });
      if (updateFlag) {
        if (updateText != "") {
          $("#option" + updateId).html(updateText);//修改下拉列表中的值
          $("#p" + updateId).html(updateText);//修改相应p节点的值
          $("body>input[type='text']").val("");//清空输入框
          $("body>div").css("border", "1px solid #cccccc");
        }
        else {
          alert("修改内容不得为空!");
          $("body>div").css("border", "1px solid #ff0000");
        }
      }
    }
    else{
      alert("没有节点,修改毛线!");
      $("body>div").css("border", "1px solid #ff0000");
    }
  });
</script>

可以看到,这里jQuery设置css是先指明要修改的css属性,再写上要修改的内容,Javascript修改css则是对节点的style修改。

jQuery对节点的遍历,用each方法则可以。Javascript则要对要遍历的节点,赋予name,然后利用document.getElementbyName将所有name拿下,则进行遍历。

jQuery删除一个节点,比Javascript简便多了,一个remove()搞掂一切,Javascript则要找自己的父节点测能删除自己。

jQuery找子节点,可以直接用>符号来查看,Javascript则要通过xx.getElementsByTagName去查找。

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

jQuery 相关文章推荐
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
基于jquery实现五星好评
Nov 18 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
jQuery实现聊天对话框
Feb 08 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
jQuery实现带进度条的轮播图
Sep 13 jQuery
jQuery+ajax实现文件上传功能
Dec 22 jQuery
jQuery treeview树形结构应用
Mar 24 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 #jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 #jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 #jQuery
jQuery plugin animsition使用小结
Sep 14 #jQuery
jquery 键盘事件的使用方法详解
Sep 13 #jQuery
React中jquery引用的实现方法
Sep 12 #jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 #jQuery
You might like
利用PHP扩展vld查看PHP opcode操作步骤
2013/03/04 PHP
php CI框架插入一条或多条sql记录示例
2014/07/29 PHP
JavaScript实现删除电脑的关机键
2016/07/26 PHP
PHP getNamespaces()函数讲解
2019/02/03 PHP
理解JavaScript中的对象 推荐
2011/01/09 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
2013/01/24 Javascript
javascript中JSON.parse()与eval()解析json的区别
2016/05/19 Javascript
对象转换为原始值的实现方法
2016/06/06 Javascript
分享一个原生的JavaScript拖动方法
2016/09/25 Javascript
深入理解javascript的getTime()方法
2017/02/16 Javascript
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
2018/09/19 Javascript
JavaScript的词法结构精华篇
2018/10/17 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
2019/08/26 Javascript
vue.js实现双击放大预览功能
2020/06/23 Javascript
js实现抽奖功能
2020/11/24 Javascript
Unicode和Python的中文处理
2017/03/19 Python
Python 正则表达式实现计算器功能
2017/04/29 Python
Python Flask-web表单使用详解
2017/11/18 Python
Python Xml文件添加字节属性的方法
2018/03/31 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
详解python编译器和解释器的区别
2019/06/24 Python
使用python实现对元素的长截图功能
2019/11/14 Python
Pycharm添加虚拟解释器报错问题解决方案
2020/10/13 Python
Charlotte Tilbury美国官网:英国美妆品牌
2017/10/13 全球购物
荷兰本土平价百货:HEMA
2017/10/23 全球购物
什么是事务?为什么需要事务?
2012/01/09 面试题
生日寿宴答谢词
2014/01/19 职场文书
服务标语大全
2014/06/18 职场文书
爱祖国爱家乡演讲稿
2014/09/02 职场文书
2016年高校自主招生自荐信范文
2015/03/24 职场文书
离婚律师函范本
2015/05/27 职场文书
2016优秀员工先进事迹材料
2016/02/25 职场文书
2019年思想汇报
2019/06/20 职场文书
Nginx 匹配方式
2022/05/15 Servers