【前端三剑客】JavaScript 网页脚本语言（jQuery write less, do more. - HTML）

更新日期：2022/07/22
只要我们一起大笑，可怕的东西就会跑光光了。

 

---

jQuery HTML

jQuery 拥有可操作 HTML 元素和属性的强大方法。

class 属性

对赋予元素的 class 属性进行检查和操作。
如果不将任何参数传递给 .toggleClass() 方法，那么匹配元素上的所有样式会在该方法第一次执行时被移除，第二次执行时被还原，如此往复。

$("selector").addClass( className | function(index, currentClass) )		// 为每个匹配的元素添加指定的样式类名
$("selector").removeClass( className | function(index, currentClass) )	// 移除集合中每个匹配元素上一个，多个或全部样式。
$("selector").hasClass( className )	  // 确定任何一个匹配元素是否有被分配给定的（样式）类
$("selector").toggleClass( className | function(index, class, switch) [, switch ])	  // 在匹配的元素集合中的每个元素上添加或删除一个或多个样式类，取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类。

CSS 属性

这些方法用于获取和设置元素的 CSS 属性。
.offset() 返回一个包含 top 和 left 属性的对象，该方法允许我们重新设置元素的位置，这个元素的位置是相对于 document 对象的。如果对象原先的 position 样式属性是 static 的话，会被改成 relative 来实现重定位。

$("selector").css( propertyName | propertyNames )	  //  获取或设置匹配元素的样式属性
$("selector").height( value | function(index, height) )	  // 获取或设置匹配元素的高度
$("selector").width( value | function(index, height) )	  // 获取或设置匹配元素的宽度
$("selector").innerHeight()	  // 获取匹配元素的高度，包括 padding，但是不包括 border
$("selector").innerWidth()	  // 获取匹配元素的宽度，包括 padding，但是不包括 border
$("selector").outerHeight([ includeMargin ])	// 获取匹配元素的高度，包括 padding，border 和选择性的 margin
$("selector").outerWidth([ includeMargin ])		// 获取匹配元素的宽度，包括 padding，border 和选择性的 margin
$("selector").scrollLeft( value )	  // 获取或设置匹配元素的水平滚动条位置
$("selector").scrollTop( value )	  // 获取或设置匹配元素的垂直滚动条位置
$("selector").offset( coordinates | function(index, coords) )	  // 获取或设置匹配元素的当前坐标，坐标相对于文档。
$("selector").position()	  // 获取匹配元素相对于 offset parent (离该元素最近的而且被定位过的祖先元素) 的坐标。

通用属性操作

这些方法用于获取和设置 DOM 元素的属性。
property 是 DOM 中的属性，作用于 JavaScript 里的对象，它的值可以设置数组或对象；
attribute 是 HTML 标签上的，作用于文档节点，它的值只能够是字符串（赋值的时候可以不是）；

$("selector").val( value | function(index, height) )		// 获取或设置匹配的元素集合中每个元素的值
$("selector").attr( attributeName, value |function(index, attr) )	  			// 获取或设置匹配的元素集合中的一个或多个元素的属性值
$("selector").removeAttr( attributeName )					// 为匹配的元素集合中的每个元素中移除一个属性，从 1.7 版本开始，它可以是一个空格分隔的属性列表。
$("selector").prop( propertyName, value |function(index, oldPropertyValue) )	// 获取或设置匹配的元素集合中的一个或多个元素的属性值
$("selector").removeProp( propertyName )	 	 			// 为集合中匹配的元素删除一个属性

attr() 与 prop() 之间的差异

可以从结果中得出：只要复选框具有 “checked” 属性就算作是选中的状态。
在复选框中：attr() 返回的是具体的属性值，prop() 返回的是布尔值。

 test: function () {
            var a1 = $("#c1").attr("checked");
            var a2 = $("#c2").attr("checked");
            var a3 = $("#c3").attr("checked");
            var a4 = $("#c4").attr("checked");

            var p1 = $("#c1").prop("checked");
            var p2 = $("#c2").prop("checked");
            var p3 = $("#c3").prop("checked");
            var p4 = $("#c4").prop("checked");

            console.log("a1:" + a1);
            console.log("a2:" + a2);
            console.log("a3:" + a3);
            console.log("a4:" + a4);

            console.log("p1:" + p1);
            console.log("p2:" + p2);
            console.log("p3:" + p3);
            console.log("p4:" + p4);
        }

修改复选框的选中状态。attr 和 prop 都可以取消选中状态。

 test: function () {
 			...
            $("#c1").attr("checked", false);
            $("#c2").prop("checked", false);
            
            console.log("attr 取消复选 a11:" + a11);
            console.log("prop 取消复选 p22:" + p22);
        }

设置/读取自定义属性。attr 和 prop 都可以自定义属性。

 test: function () {
            $("#c1").attr("ouseki", 10000);
            $("#c2").prop("ouseki", 10000);

            var a11 = $("#c1").attr("ouseki");
            var p22 = $("#c2").prop("ouseki");
            
            console.log("设置/读取自定义属性 a11:" + a11);
            console.log("设置/读取自定义属性 p22:" + p22);
        }

复制元素

使用 .clone() 可能产生 id 属性重复的元素的副作用，id 应该是唯一的。在可能的情况下，应避免克隆有此属性或标识符的元素，建议使用类属性代替。

$("selector").clone([ withDataAndEvents ] [, deepWithDataAndEvents ])	  // 创建一个匹配的元素集合的深度拷贝副本
withDataAndEvents (默认: false)
类型: Boolean 表示是否会复制元素上的事件处理函数。
deepWithDataAndEvents (默认: value of withDataAndEvents)
类型: Boolean 指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。

DOM 插入

.append() 和 .appendTo() 两种方法功能相同，主要的不同是语法：
.append() 目标元素在前面，参数是将要插入的内容。
.appendTo() 刚好相反，要插入的内容在前面，参数是目标元素。

*****【插入现有元素内】*****
$("selector").append( content [, content ] | function(index, html) )	// 在每个匹配元素里面的末尾处插入参数内容。
$("selector").prepend( content [, content ] | function(index, html) )	// 在每个匹配元素里面的开头处插入参数内容。
$("selector").appendTo( target )		// 将匹配的元素插入到目标元素的最后面
$("selector").prependTo( target )		// 将将匹配的元素插入到目标元素的最前面
$("selector").text([ textString | function(index, text) ])				// 获取或设置匹配元素集合中每个元素的文本内容。
$("selector").html([ htmlString | function(index, oldhtml) ])			// 获取或设置匹配元素集合中每个元素的 html 内容。
*****【插入现有元素外】*****
$("selector").after( content [, content ] | function(index))			// 在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。
$("selector").before( content [, content ] | function(index))			// 在匹配元素集合中的每个元素前面插入参数所指定的内容，作为其兄弟节点。
$("selector").insertAfter( target )		// 在目标元素后面插入集合中每个匹配的元素。
$("selector").insertBefore( target )	// 在目标元素前面插入集合中每个匹配的元素。
*****【插入并包裹现有内容】*****
$("selector").unwrap( target )			// 将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。
$("selector").wrap( wrappingElement | function(index) )					//  在每个匹配的元素外层包上一个 html 元素。
$("selector").wrapAll( wrappingElement )								// 在所有匹配元素外面包一层 HTML 结构。
$("selector").wrapInner( wrappingElement | function(index) )			// 在匹配元素里的内容外包一层结构。

DOM 移除

假如你收起来一瓶水，那就是 detach。
假如你倒掉了一瓶水，那就是 empty。
假如你扔掉了一瓶水，那就是 remove。

$("selector").detach( content [, content ])	// 从 DOM 中去掉所有匹配的元素。（注：保留元素上的事件及 jQuery 数据）
$("selector").empty()						// 从 DOM 中移除集合中匹配元素的所有子节点。（注：同样移除元素里的文本。因为元素里任何文本字符串都被看做是该元素的子节点）
$("selector").remove( [selector ])			// 将匹配元素集合从 DOM 中删除。（注：同时移除元素上的事件及 jQuery 数据）
$("selector").unwrap( target )				// 将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。

DOM 替换

用来替换的元素从老地方移到新位置，而不是复制。

$("selector").repalceAll( target )						// 集合的匹配元素替换每个目标元素。
$("selector").repalceWith( newContent | function )		// 用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。

点击替换