锋利的jquery-DOM操作

时间:2020-12-05 06:56:57
1 查找节点
① 可根据jquery选择器来完成节点查找
② 可用.text()获取节点的文本内容
③ 可用.attr("attr")获取属性value
2 创建节点
① 可用jquery工厂函数来完成$(html)
eg:$("<li></li>")
可以同时为标签添加文本和属性
 
3插入节点
① 方法(见文档)
锋利的jquery-DOM操作
   
锋利的jquery-DOM操作
② 方法不仅可对节点进行插入操作,还可对节点进行移动操作
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()
获取或设置滚动条距顶端或左端的距离