当前位置:Gxlcms > JavaScript > 实例详解jQuery实现对网页节点的增删改查功能

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

时间:2021-07-01 10:21:17 帮助过:3人阅读

本文主要介绍了jQuery实现对网页节点的增删改查功能,涉及jQuery针对网页DOM节点的获取、属性修改等相关操作技巧,需要的朋友可以参考下,希望能帮助到大家。

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

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

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

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

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


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

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


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

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

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

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

相关推荐:

完全掌握nodejs操作mongodb的增删改查功能

javaScript增删改查

php数据库增删改查方式

以上就是实例详解jQuery实现对网页节点的增删改查功能的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行