jQuery DOM

Posted 2020-10-05 胡卓

jQuery DOM属性
1、 .addClass(className):为每个匹配的元素添加指定的样式类名
2、 .attr(attributeName):获取匹配的元素集合中的第一个元素的属性值。设置每一个匹配元素的一个或多个属性。(只有一个参数时是获取属性值，两个参数时是设置属性值)
3、 .hasClass(className):确定任何一个元素是否有被分配给定的（样式）类
4、 .html():获取集合中第一个匹配元素的HTML内容 设置每一个匹配元素的HTML内容（没有参数则显示内容，有参数则添加或改变内容）
5、 .prop(propertyName):获取匹配的元素集中第一个元素的属性（property）值为匹配的元素设置一个或多个属性（properties）。只能获取默认的属性
6、 .removeAttr(attributeName):为匹配的元素集合中的每个元素中移除一个属性(attribute)。
7、 .removeClass([className]):移除集合中每个匹配元素上一个，多个或全部样式
8、 .removeProp(propertyName):为集合中匹配的元素删除一个属性（property）。
9、 .toggleClass():在匹配的元素集合中的每个元素上添加或删除一个或多个样式类，取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类。
10、.val():获取匹配的元素集合中第一个元素的当前值。设置匹配的元素集合中每个元素的值。

 

jQuery DOM操作

1、class属性：.addClass()、hasClass()、removeClass()、toggleClass()
2、DOM插入并包裹现有内容
注：在每个匹配到的p外面都加上一个html元素格式为"<div></div>"或document.createElement("div")或已存在的元素但元素只能复制不能移动。
<1>、wrap(wrappingElement):在每个匹配的元素外层包上一个html元素。
<2>、unwrap():将匹配元素的父级元素删除
<3>、wrapAll(wrappingElement):在所有匹配元素外面包一层HTML结构。
<4>、wrapInner(wrappingElement):在匹配元素里的内容外面包一层结构。
3、DOM插入现有元素内
注：可进行元素移动 .html()和.text()区别在于获取，html只能获取第一个匹配元素，而text获取所有匹配元素
<1>、.append()=(js)appendChild():在每个匹配元素里面的末尾处插入参数内容。
<2>、.appendTo():将匹配元素插入到目标元素的最后面（译者注：内部插入）
<3>、.html():获取集合中第一个匹配元素的HTML内容 设置每一个匹配元素的html内容。
<4>、.prepend():将参数内容插入到每个匹配元素的前面(元素内部)。
<5>、.prependTo():将所有元素插入到目标前面（元素内）.
<6>、.text():得到匹配元素集合中每个元素的合并文本，包括他们的后代设置匹配元素集合中每个元素的文本内容为指定的文本内容。
4、DOM插入现有元素外
5、DOM移除
<1>、.detach():从DOM中去掉所有匹配的元素
<2>、.empty():从DOM中移除集合中匹配元素的所有子节点。
<3>、.remove():将匹配元素从DOM中删除。（注：同时移除元素上的事件及jQuery事件）
<4>、unwrap():将匹配元素集合的父元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。
6、DOM替换
<1>、.replaceAll():用集合的每个元素替换每个目标元素。
<2>、.replaceWith():用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。
7、通用属性操作：.attr()、.prop()、.removeAttr()、.removeProp()、.val()
8、CSS属性
<1>、.css():获取匹配元素集合中的第一个元素的样式的值设置每个匹配元素的一个或多个CSS属性.
<2>、.height():获取匹配元素集合中的第一个元素的当前计算高度值。设置每一个匹配元素的高度值。（与margin、padding、border无关）
<3>、.width():获取匹配元素集合中的第一个元素的当前计算宽度值。设置每一个匹配元素的宽度值。
<4>、.innerHeight():为匹配的元素集合中获取第一个元素的当前计算高度值，包括padding但不包括border
<5>、.innerWidth():为匹配的元素集合中获取第一个元素的当前计算宽度值，包括padding但不包括border
<6>、.offset():在匹配的元素集合中，获取的第一个元素的当前坐标，坐标相对于文档。设置匹配的元素集合中每一个元素的坐标。
<7>、.outerHeight():获取匹配元素集合中的第一个元素的当前计算高度值。包括padding、border和选择性的margin。返回一个整数（不包括"px"）表示的值，或如果在一个空集合上调用该方法，则会返回null。 （注：参数若为true则包括margin，若为false或空则不包括margin）
<8>、.outerWidth():获取匹配元素集合中的第一个元素的当前计算宽度值。包括padding、border和选择性的margin。返回一个整数（不包括"px"）表示的值，或如果在一个空集合上调用该方法，则会返回null。
<9>、.position():获取匹配元素集合中的第一个元素的当前坐标。相对于offset parent的坐标。（译者注：offset parent指离该元素最近的被定位过的祖先元素）
<10>、.scrollLeft():获取匹配的元素集合中第一个元素的当前水平滚动条的位置。设置每个匹配元素的水平滚动条的位置。(设置参数为设置水平滑动多少，不设置宽度为获取水平滚动调位置)
<11>、.scrollTop():获取匹配的元素集合中第一个元素的当前垂直滚动条的位置。设置每个匹配元素的垂直滚动条的位置。
9、复制元素