锋利的jquery-DOM操作

1 查找节点

① 可根据jquery选择器来完成节点查找

② 可用.text()获取节点的文本内容

③ 可用.attr("attr")获取属性value

2 创建节点

① 可用jquery工厂函数来完成$(html)

eg:$("<li></li>")

可以同时为标签添加文本和属性

 

3插入节点

① 方法（见文档）

 　　

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

4 删除节点

① remove（）去除所有匹配的元素

② detach（）同样去除所有匹配的元素，与remove不同的是被去除的内容保留有样本数据；其所有绑定的事件和附加数据都会被保留下来

③ empty（）清空节点，清空匹配元素的所有后代节点包括内容

5 复制节点

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

6 替换节点

① replaceWith（）

eg：A.replaceWith(B) B替换A

② replaceAll（）

与replaceWith()替换与被替换节点相反

7 包裹节点

① 包裹节点

A.wrap("<b></b>")

用<b>标签将A包裹起来

若A为多节点对象则为每一个节点提供一个<b>标签包裹

A.wrapAll("<b></b>")

若A为多节点对象则为该对象提供一个标签，将所有节点包裹在一个b标签中

 

A.wrapInner("<b></b>")

为匹配标签对象的每一个节点的内容提供一个<b>标签

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()

获取或设置滚动条距顶端或左端的距离