锋利的 jQuery (第二版) jQuery 中的 DOM 操作

发布时间:2019-05-25 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了锋利的 jQuery (第二版) jQuery 中的 DOM 操作脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

DOM 是一种与浏览器、平台、语言无关的接口,使用该接口可以访问到网页容器中的标准组件。
解决 Netspace 的 JavaScript 和 Miscrosoft 的 JScript

3.1 DOM 操作的分类

DOM 操作分为 DOM Core(核心)、HTML-DOM 和 CSS-DOM
1. DOM Core
任一支持 DOM 的程序设计语言都可以使用 DOM Core。
2. HTML-DOM
3. CSS-DOM

3.2 jQuery 中的 DOM 操作

3.2.1 查找节点

1. 查找元素节点
2. 查找属性节点
attr(param1 [, param2]): 只有一个参数时获得对应属性值,有两个参数时为设置对应属性值。

3.2.2 创建节点

1. 创建元素节点

$(html)

2. 创建文本节点
3. 创建属性节点

3.2.3 插入节点

                 方法                  简述                        实例
apPEnd() s s
appendTo() 追加到指定元素中
PRepend() s
prependTo() s
after() s
insertAfter() s
before() s
insertBefore() s

3.2.4 删除节点

1. remove()方法
作用:从 DOM 删除是所有匹配的元素,传入的参数用于根据 jquery 表达式来筛选元素。
返回:指向删除节点的引用。
2. detach()方法
作用:不会将匹配的元素从 jQuery 对象删除。 所有绑定的事件、附加的数据等都会保存下来。
3. empty()方法
作用:清空元素中的所有后代节点。

3.2.5 复制节点

clone()方法
clone(true) : 复制元素的同时复制元素绑定的事件。
商品拖动功能(将商品加入购物车)用的就是复制节点。

3.2.6 替换节点

1. replaceWITh()
2. replaceAll()
替换后需要重新绑定事件

3.2.7 包裹节点

1. wrap()方法
作用:将所有元素进行单独的包裹。
2. wrapAll()方法
作用:将所有匹配的元素用一个元素来包裹。
3. wrapInner()方法
将每一个匹配的元素的子内容(包括文本节点)用其他结构化的标记包裹起来。

3.2.8 属性操作

1. 获取属性与设置属性
attr(param) : 获取属性值
arrr(param1, param2): 设置单个属性
attr(jsonData):设置多个属性
2. 删除属性
removeAttr(param)

3.2.9 样式操作

1. 获取样式与设置样式
attr("class"):获取样式
attr("class", param):设置样式, 替换之前的样式
2. 追加样式
addClass(param)
3. 移除样式
removeClass(param)
4. 切换样式
toggleClass(param): 若类名存在则删除它, 不存在则添加它。
附加:toggle(function1, function2): 元素原来显示的,则隐藏他;隐藏的则显示它。
5. 判断是否含有某个样式
hasClass(param) 等价于 is()方法

$("p"),hasClass("my") 等价于 $("p").is(".my")

3.2.10 设置和获取 HTML、文本和值

1. html()
2. text()
JavaScript的 innerText 不能在 Firefox 中运行。
3. val()

3.2.11 遍历节点

1. childdren()
作用:取得匹配元素的子元素集合。
2. next()
作用:取得匹配元素后面紧邻的同辈元素。
3. prev()
作用:取得匹配元素前面紧邻的同辈元素。
4. siblings()
作用:取得匹配元素前后所有的同辈元素。
5. closest(param)
作用:取得最近的匹配元素。
6. parent() 和 parents()的区别
parent() : 返回父级元素。
parents() : 返回祖先元素。

3.2.12 CSS-DOM 操作

css(param) : 获取对应属性值。
css(param1, param2) : 设置单个属性。
css(jsonData) : 设置多个属性。若设置属性的值时不带引号,则需要采用驼峰式写法。如

$("p").css({fontSize : "20px", backgroundColor : "#fff"});

css()获取的高度值与样式的设置有关, 而 height()获取的高度值是样式在页面的实际高度, 与样式设置无关, 并且不带单位。
1. offset()
作用:获取元素在当前视窗的相对偏移, 返回对象包括两个属性 top 和 left, 它只对可见元素有效。
2. position()
作用:获取元素相对于最近的一个 position 样式属性设置为 relative 或 absolute 的祖父节点的相对位移, 返回对象包括两个属性 top 和 left。
3. scrollTop()方法和scrollLeft()方法
作用:获取元素的滚动条距顶端的距离和距左侧的距离。
附加:这两个方法可以指定一个参数, 控制元素的滚动条滚动到指定的位置。

脚本宝典总结

以上是脚本宝典为你收集整理的锋利的 jQuery (第二版) jQuery 中的 DOM 操作全部内容,希望文章能够帮你解决锋利的 jQuery (第二版) jQuery 中的 DOM 操作所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。