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轻松实现无缝轮播效果
Mar 22 jQuery
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
jquery拖动改变div大小
Jul 04 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
jquery实现直播视频弹幕效果
Feb 25 jQuery
jQuery实现容器间的元素拖拽功能
Dec 01 jQuery
jQuery实现简单轮播图效果
Dec 27 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数据库连接
2006/10/09 PHP
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
在命令行下运行PHP脚本[带参数]的方法
2010/01/22 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
PHP发送短信代码分享
2015/08/11 PHP
javascript:void(0)的真正含义实例分析
2008/08/20 Javascript
javascript 写类方式之三
2009/07/05 Javascript
javascript中不等于的代码是什么怎么写
2013/12/29 Javascript
jquery scroll()区分横向纵向滚动条的方法
2014/04/04 Javascript
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
JQuery实现级联下拉框效果实例讲解
2015/09/17 Javascript
JS判断iframe是否加载完成的方法
2016/08/03 Javascript
jquery-mobile表单的创建方法详解
2016/11/23 Javascript
Angular.js基础学习之初始化
2017/03/10 Javascript
Vuex 入门教程
2018/01/10 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
2018/08/13 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
2018/10/11 Javascript
在vue中使用express-mock搭建mock服务的方法
2018/11/07 Javascript
原生js+canvas实现验证码
2020/11/29 Javascript
Python中的Numpy入门教程
2014/04/26 Python
python中反射用法实例
2015/03/27 Python
python中列表元素连接方法join用法实例
2015/04/07 Python
python使用nntp读取新闻组内容的方法
2015/05/08 Python
Python 查找字符在字符串中的位置实例
2018/05/02 Python
python实现文件的分割与合并
2019/08/29 Python
python实现多进程通信实例分析
2019/09/01 Python
python批量将excel内容进行翻译写入功能
2019/10/10 Python
Python 网络编程之UDP发送接收数据功能示例【基于socket套接字】
2019/10/11 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
运动会的口号
2014/06/09 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书
如何在centos上使用yum安装rabbitmq-server
2021/03/31 Servers
nginx 添加http_stub_status_module模块
2022/05/25 Servers