jQuery添加、删除和修改网页节点功能示例

本文通过一个实例说明jQuery实现了网页节点的添加、删除、修改和检查功能。分享给大家参考，如下：

《JavaScript针对网页节点的增删改查用法》之前介绍过。其实JavaScript对DOM的操作已经总结很久了，而jQuery对网页节点的操作一直都在用，只是没有总结好，真的错了。

下面是同样的例子来说明这个问题：

如上图，提供了三个按钮、一个下拉列表和一个输入框，提供了添加、删除、修改和检查操作。

一个网页最多10个节点，最少0个节点，不允许增加更多的节点，不允许减少更少的节点。

首先是这个网站的基本布局：

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN ' ' http://www . w3 . org/TR/HTML 4/strict . DTD ' HTML head meta http-equiv=' Content-Type ' Content=' text/HTML；Charset=utf-8' titlejQuery添加和删除网页节点/title脚本类型=' text/JavaScript ' src=' http 3360 js/jQuery-1 . 11 . 1 . js '/脚本/head dybutton添加节点/选择节点选择ID=' nodelist '/选择按钮删除节点/按钮输入类型=' text '/按钮修改节点/按钮div/div/body/html首先介绍jQuery资源，然后除了下拉列表以外的所有节点都没有ID，以两种方式展示

这里没有什么特别的，关键是下面的jQuery编程：

脚本类型=' text/JavaScript ' var I=1；//定义id $(“body div”)。节点的CSS('边框'，' 1pxsolid # cccccc ')；//将body下所有div的upper style=' border :1 pxsolid # cccccc '属性放在第一位。这是jQuery对节点的css操作。$(“body button : eq(0)”)。如果节点数小于$ ('bodydiv ')，单击正文下方第0个按钮的(function () {//onclick事件if(I ^ 11)} {//如果节点数小于$(' body div ')。追加(' p id=' p' I ' '文本，//添加id=p1，p2，p3的节点.在正文下面的所有div中，也就是唯一的div，文本是text1，2，3.$ ('# nodelist ')。追加(' option id=' option ' I ' ' value=' I ' ' text ' I)//同时添加id=option1，option2.值=1，2，3.并将其用于以下修改和删除。//节点数加1 $ ('body div ')。CSS('边框'，' 1pxsolid # cccccccc ')；//如果符合要求，使边框变成灰色} else {//如果不符合要求，弹出警告，使边框变成红色警戒('最多10个节点！' );$(“body div”)。css('边框'，' 1px实心# ff 0000 ')；} });$(“body button : eq(1)”)。click (onclick事件if(I 1){ var removeid=$(' # nodelist '))。正文下方第一个按钮的val()；//获取值$(“# option”removeId)。在下拉列表中删除()；//删除相应的选项，p node $('#p' removeId)。移除()；I-；//节点数减1 $ ('body div ')。CSS('边框'，' 1pxsolid # cccccccc ')；} else{ alert('至少0个节点！' );$(“body div”)。css('边框'，' 1px实心# ff 0000 ')；} });$(“body button : eq(2)”)。click (onclick事件if(I ^ 1){ var updatetext=$(' body input[type=' text ']')。正文下方第二个按钮的val()；//获取文本框var updateId=$('#nodeList ')的输入内容。val()；//在下拉列表中获取var updateFlag=true的值；//flag $ ('bodydivp ')。用于验证是否存在同名节点的每个(函数(){//遍历所有p个节点if (updatetext==$ (this))。如果输入值等于p节点预警的值('已经有同名节点，不能修改！' );//警告$(“body div”)。弹出CSS('边框'，' 1pxsolid # ff 0000 ')；updateFlag=false//收起旗帜} })；if (updateFlag) { if (updateText！=' '){ $(“# option”updateId)。html(updateText)；//修改值$(“# p”updateid)。下拉列表中的html(updatetext)；//修改相应p节点$ ('body input [type=' text']'的值)。val(“”)；//清空输入框$ ('body div ')。CSS('边框'，' 1pxsolid # cccccccc ')；} else {alert('修改内容不能为空！' );$(“body div”)。css('边框'，' 1px实心# ff 0000 ')；}}} else{ alert('无节点，修改毛线！' );$(“body div”)。css('边框'，' 1px实心# ff 0000 ')；} });/script中，我们可以看到jQuery设置css来指示首先要修改的css属性，然后写入要修改的内容，而Javascript修改css来修改节点的样式。

JQuery可以通过使用每种方法遍历节点。Javascript应该为要遍历的节点分配名称，然后使用document.getElementbyName记下所有名称，然后遍历。

JQuery删除一个节点，比Javascript简单多了。remove()处理所有事情，Javascript需要找到自己的父节点来删除自己。

JQuery查找子节点，可以用符号直接查看，而Javascript则通过xx.getElementsByTagName进行搜索

更多对jQuery感兴趣的读者可以查看本网站主题：《jQuery操作DOM节点方法总结》、《jQuery页面元素操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》、0103010

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