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和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
jquery dataTable 获取某行数据
May 05 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jQuery操作cookie的示例代码
Jun 05 jQuery
jquery实现简单拖拽效果
Jul 20 jQuery
jQuery实现增删改查
Dec 22 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截取字符串并保留完整xml标签的函数代码
2013/02/06 PHP
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
php字符串截取函数用法分析
2014/11/25 PHP
WordPress中用于更新伪静态规则的PHP代码实例讲解
2015/12/18 PHP
DOM相关内容速查手册
2007/02/07 Javascript
js获取url参数的使用扩展实例
2007/12/29 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
2014/02/11 Javascript
html文本框提示效果的示例代码
2014/06/28 Javascript
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
Jquery实现仿腾讯微博发表广播
2014/11/17 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
详解angular 中的自定义指令之详解API
2017/06/20 Javascript
JavaScript中错误正确处理方式小结你用对了吗
2017/10/10 Javascript
Angular2 父子组件通信方式的示例
2018/01/29 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
JavaScript中变量提升机制示例详解
2019/12/27 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
使用Python对Access读写操作
2017/03/30 Python
python之从文件读取数据到list的实例讲解
2018/04/19 Python
pyshp创建shp点文件的方法
2018/12/31 Python
Python常用模块之requests模块用法分析
2019/05/15 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
Django实现跨域请求过程详解
2019/07/25 Python
python实现超市商品销售管理系统
2019/11/22 Python
pyinstaller打包单文件时--uac-admin选项不起作用怎么办
2020/04/15 Python
Python爬虫抓取论坛关键字过程解析
2020/10/19 Python
台湾三立电视电商平台:电电购
2019/09/09 全球购物
如何通过jdbc调用存储过程
2012/04/19 面试题
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
高校学生干部的自我评价分享
2013/11/04 职场文书
2014审计局领导班子民主生活会对照检查材料思想汇报
2014/09/20 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
2015年实习单位评语
2015/03/25 职场文书