javascript代码实例教程-锋利的jquery-DOM操作

发布时间:2019-01-15 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-锋利的jquery-DOM操作脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

锋利的jquery-DOM操作。

1 查找节点

① 可根据jquery选择器来完成节点查找 ② 可用.text()获取节点的文本内容 ③ 可用.attr("attr")获取属性value

2 创建节点

① 可用jquery工厂函数来完成$(htML) eg:$("") 可以同时为标签添加文本和属性

3插入节点

① 方法(见文档)

② 方法不仅可对节点进行插入操作,还可对节点进行移动操作

4 删除节点

① remove()去除所有匹配的元素 ② detach()同样去除所有匹配的元素,与remove不同的是被去除的内容保留有样本数据;其所有绑定的事件和附加数据都会被保留下来 ③ empty()清空节点,清空匹配元素的所有后代节点包括内容

5 复制节点

① clone(true)复制匹配的节点;传入的参数true表示同时复制该元素的绑定事件

6 替换节点

① replaceWITh() eg:A.replaceWith(B) B替换A ② replaceAll() 与replaceWith()替换与被替换节点相反

7 包裹节点

① 包裹节点 A.wrap("") 用标签将A包裹起来 若A为多节点对象则为每一个节点提供一个标签包裹 A.wrapAll("") 若A为多节点对象则为该对象提供一个标签,将所有节点包裹在一个b标签中 A.wrapInner("") 为匹配标签对象的每一个节点的内容提供一个标签

8 属性操作

① 获取和设置属性 A.attr("title"); A.attr("title" ,"value") ② 删除属性 A.removeAttr("title");

9 样式操作

① 获取和设置样式(操作class属性) E.attr("class"); E.attr("class","value"); ② 追加样式 addClass(“classname”)追加一个className ③ 移除样式 removeClass(“className”)移除一个className ④ 切换样式 .toggleClass("className") 若有该样式则移除该class,若没有则添加该clss ⑤ 判断是否含有某个样式 .hasClass("className")判断是否含有某个class;

10 设置和获取HTML,文本和值

1 .html()方法 类似js中innerHTML方法,设置和获取元素中HTML内容 2 .text()方法 类似js中innerText方法,设置和获取元素中text值 3 .val()方法 设置和获取元素中的value属性;如果元素多选,则返回一个数组

11 匹配节点查找

① .children() 查找匹配节点的所有子节点;(只考虑子节点,不考虑后代其他节点) ② .next()/.prev()/siblings() 查找匹配节点(后/前/所有)的紧邻的同辈元素; ③ .parent()/.parents() 查找匹配节点的父元素

12 css-dom操作

​① 获取/设置样式值 $("E").css("cssAttr") $("E").css("cssAttr","value"); ② .offset()/.position() 都是获取left/top值 offset获取或设置相对于视窗的值 position获取或设置的是相对于第一个绝对或相对定位的祖先元素的值 ③ .scrollTop()/.scrollLeft() 获取或设置滚动条距顶端或左端的距离

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-锋利的jquery-DOM操作全部内容,希望文章能够帮你解决javascript代码实例教程-锋利的jquery-DOM操作所遇到的问题。

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

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