06-jQuery-DOM操作-属性操作-attr()\prop()\addClass()\toggleClass()等

一、通用属性操作

1、attr() 方法：主要用于获取或设置 HTML 元素的属性值，它接受一个参数或两个参数，当传递一个参数时，它返回指定属性名的属性值；当传递两个参数时，它设置指定属性名的属性值为指定的值。

获取属性值可以使用如下语法：

$(selector).attr(attributeName)

其中，$(selector) 是要获取属性值的元素的选择器，attributeName 是属性名。

<a href="https://www.google.com/">Google</a>var href = $("a").attr("href");
console.log(href); // 输出 "https://www.google.com/"

设置属性值可以使用如下语法：


$(selector).attr(attributeName, value)

其中，$(selector) 是要设置属性值的元素的选择器，attributeName 是属性名，value 是属性值。

<a href="">Click here</a>$("a").attr("href", "https://www.google.com/");
//这样就把 <a> 元素的 href 属性的值修改为了 https://www.google.com/。

2、 removeAttr() 方法：用于从元素中删除指定的属性，它只接受一个参数，即要删除的属性名。

$(selector).removeAttr(attributeName)

<a href="https://www.google.com/" target="_blank">Google</a>$("a").removeAttr("target"); // 删除 <a> 元素的 target 属性
//这样，<a> 元素的 target 属性就被删除了。

3、 prop() 方法：主要用于获取或设置 DOM 元素的属性值，它接受一个参数或两个参数，当传递一个参数时，它返回指定属性名的属性值；当传递两个参数时，它设置指定属性名的属性值为指定的值。

获取属性值：

$(selector).prop(propertyName)

其中，$(selector) 是要获取属性值的元素的选择器，propertyName 是属性名。

<input type="checkbox" checked>var checked = $("input[type='checkbox']").prop("checked");
console.log(checked); // 输出 true

设置属性值：

$(selector).prop(propertyName, value)

其中，$(selector) 是要设置属性值的元素的选择器，propertyName 是属性名，value 是属性值。

<input type="checkbox">$("input[type='checkbox']").prop("checked", true);
//这样就把 <input> 元素的 checked 属性设置为了 true。

请注意，prop() 方法只能用于操作 DOM 元素的属性，而不能用于 HTML 属性。例如，下面的代码不会设置 <input> 元素的 type 属性：

$("input").prop("type", "password");

如果要设置 HTML 属性，应该使用 attr() 方法。

3、removeProp() 方法：用于从 DOM 元素中删除指定的属性。和 removeAttr() 方法不同，removeProp() 方法只接受一个参数，即要删除的属性名。

$(selector).removeProp(propertyName)

<div title="Some text">Hello</div>$("div").removeProp("title"); // 删除 <div> 元素的 title 属性
//这样，<div> 元素的 title 属性就被删除了。

在 jQuery 中，attr() 方法和 prop() 方法都用于操作 HTML 元素的属性，但它们有一些区别：

1、获取属性值时的区别：
对于 HTML 属性（如 href、src 等），attr() 方法获取的是属性值。
对于 DOM 属性（如 checked、selected 等），prop() 方法获取的是属性值。

2、设置属性值时的区别：
对于 HTML 属性，attr() 方法设置属性值时，属性值必须是字符串类型。
对于 DOM 属性，prop() 方法设置属性值时，属性值可以是布尔值、数字或字符串类型。

3、修改原始值的影响：
对于 HTML 属性，attr() 方法会修改原始 HTML 元素的属性值。
对于 DOM 属性，prop() 方法不会修改原始 HTML 元素的属性值，它只会修改浏览器所跟踪的属性值，这种修改不会被序列化到 HTML 中。

二、Class属性操作

1、addClass() 方法：用于向元素添加一个或多个类名。它接受一个或多个参数，每个参数是要添加的类名。

$(selector).addClass(class1, class2, ...)例如：
<div class="box"></div>$("div").addClass("red"); // 添加类名 "red"
//这样，<div> 元素就同时拥有 box 和 red 两个类名了。

2、removeClass() 方法：用于从元素中删除一个或多个类名。它接受一个或多个参数，每个参数是要删除的类名。

$(selector).removeClass(class1, class2, ...)例如：
<div class="box red"></div>$("div").removeClass("red"); // 删除类名 "red"
//这样，<div> 元素只剩下了 box 类名。

3、toggleClass() 方法：用于在元素上添加或删除一个或多个类名，如果元素已经有了指定的类名，则删除该类名；如果元素没有指定的类名，则添加该类名。它接受一个或多个参数，每个参数是要添加或删除的类名。

$(selector).toggleClass(class1, class2, ...)例如：
<div class="box"></div>$("div").toggleClass("red"); // 添加类名 "red"
//这样，<div> 元素就同时拥有 box 和 red 两个类名了。//再次执行上述代码，<div> 元素的 red 类名就被删除了。<div class="box red"></div>$("div").toggleClass("red"); // 删除类名 "red"
//这样，<div> 元素只剩下了 box 类名。

4、hasClass() 方法：用于判断元素是否具有指定的类名。它接受一个参数，即要检查的类名，返回值为布尔类型的值，如果元素具有指定的类名，则返回 true；否则返回 false。

$(selector).hasClass(className)例如：
<div class="box red"></div>
var hasRedClass = $("div").hasClass("red"); // 返回 true
var hasGreenClass = $("div").hasClass("green"); // 返回 false