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中clone()函数实现表单中增加和减少输入项
May 13 jQuery
Angular2使用jQuery的方法教程
May 28 jQuery
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
jQuery实现拖动效果的实例代码
Jun 25 jQuery
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
jQuery 实现扁平式小清新导航
Jul 07 jQuery
jquery插件实现代码雨特效
Apr 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
新闻分类录入、显示系统
2006/10/09 PHP
php使用ereg验证文件上传的方法
2014/12/16 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
Prototype使用指南之form.js
2007/01/10 Javascript
写得不错的jquery table鼠标经过变色代码
2013/09/27 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
js拼接html注意问题示例探讨
2014/07/14 Javascript
JavaScript随机生成信用卡卡号的方法
2015/04/07 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
javascript实现可拖动变色并关闭层窗口实例
2015/05/15 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
jQuery中each遍历的三种方法实例分析
2018/09/07 jQuery
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
2019/09/27 Javascript
微信小程序swiper使用网络图片不显示问题解决
2019/12/13 Javascript
python对指定目录下文件进行批量重命名的方法
2015/04/18 Python
Python实现识别手写数字大纲
2018/01/29 Python
python切片及sys.argv[]用法详解
2018/05/25 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
python3.6使用urllib完成下载的实例
2018/12/19 Python
python读取csv和txt数据转换成向量的实例
2019/02/12 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
python 下 CMake 安装配置 OPENCV 4.1.1的方法
2019/09/30 Python
Anconda环境下Vscode安装Python的方法详解
2020/03/29 Python
python3通过udp实现组播数据的发送和接收操作
2020/05/05 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
跑鞋、网球鞋、网球拍、服装及装备:Holabird Sports
2016/09/19 全球购物
中学生关于梦想的演讲稿
2014/08/22 职场文书
感谢信怎么写
2015/01/21 职场文书
晚会开幕词范文
2016/03/04 职场文书
php中pcntl_fork详解
2021/04/01 PHP
js之ajax文件上传
2021/05/13 Javascript
Python实现照片卡通化
2021/12/06 Python