jquery中的dom操作

Posted 2020-06-13

1.查找节点
1.1 查找元素节点 $li.text();
1.2 查找属性节点 $p.attr("title");
2.创建节点
2.1 创建元素节点 $li = $("<li></li>");
2.2 创建文本节点 $li = $("<li>香蕉</li>");
2.3 创建属性节点 $li = $("<li title=‘香蕉‘>香蕉</li>");
3.插入节点
3.1 append() p.append($a); 将a 加入到p中
3.2 appendTo() a.appendTo($p)；将a加到p中
3.3 prepend() 向每个匹配的元素内部前置内容
3.4 perpendTo（） 将匹配到的元素前置到指定的元素中
3.5 after() 在每个匹配的元素之后插入内容
3.6 insertAfter() 将所有匹配的元素插入到指定元素的后面
3.7 before() 在每个匹配的元素之前插入内容
3.8insertBefore() 将所有匹配的的元素插入到指定的元素前面
4.删除节点
4.1 remove() 删除所有匹配的元素
4.2 detach() 去掉所有匹配的元素 （这个和remove的区别是，不是彻底的删除，保留了绑定的事件，附加的数据。
4.3 empty() 清空节点 清空元素中的所有后代节点。
5.复制节点
5.1 clone() 复制元素 参数true,复制元素的同时复制所绑定的事件。
6.替换节点
6.1 replaceWith() 将所有匹配的元素替换成指定的html对象或者dom对象。
6.2 repalceAll() a.repaceAll(b) 将所有的b 替换为a
7.包裹节点
7.1 warp() 给所有匹配的元素添加指定的标签。
7.2 wrapAll() 给匹配的元素添加指定的标签。如果被包裹的多个元素间有其他元素，其他元素会被放到包裹元素之后的。
7.3 wrapInner() 给匹配的元素的内容（innertext）用指定的标签包裹起来。
8.属性操作
8.1 获取和设置属性 $(this).attr("title":"abc","name","test");
8.2 删除属性 $("p").removeAttr("title");
9.样式操作
9.1 获取和设置样式 $(this).attr("class","high");
9.2 追加样式 $(this).addClass("a");
9.3 移除样式 $(this).removeClass("a b");
9.4 切换样式 $(this).toggleClass("a");
9.5 判断是否有指定样式 $(this).hasClass("a");
10.设置和获取html文本和值
10.1 html() 获取html代码
10.2 text() 获取innerText属性
10.3 val() 获取或者设置元素的值
11.遍历节点
11.1 children() 取得匹配元素的子元素集合(直接子元素)
11.2 next() 取得匹配元素后面的紧邻的同辈元素
11.3 prev() 取得匹配元素前面紧邻的同辈元素
11.4 sibings() 取得匹配元素前后的同辈元素（注意区别nextAll())
11.5 closest() 取得最近的匹配元素
11.6 parent() 取得集合中每个元素的直接父级元素
11.7 parents() 取得集合中每个匹配元素的祖先元素
11.8 closest() 从元素本身开始，逐级别向上元素匹配，并返回最先匹配的祖先元素。

12.css操作
12.1 $("p").css("opacity","0.5");
12.2 $("p").offset() 获取偏移
12.3 $("p").position() 获取位置
12.4 scrollTop()获取元素的滚动条距离顶端的距离