jQuery 属性学习笔记

1. attr() 方法

attr() 方法用于获取或设置 HTML 元素的属性值。

1.1 获取属性值

语法：

javascriptCopy Code
$(selector).attr(attribute)

示例：

htmlCopy Code
<button id="myBtn" type="button" disabled>Click Me!</button>

javascriptCopy Code
var disabled = $("#myBtn").attr("disabled");
console.log(disabled); // 输出 true

1.2 设置属性值

语法：

javascriptCopy Code
$(selector).attr(attribute,value)

示例：

htmlCopy Code
<button id="myBtn" type="button">Click Me!</button>

javascriptCopy Code
$("#myBtn").attr("disabled", true);

2. prop() 方法

prop() 方法用于获取或设置 HTML 元素的属性值，但与 attr() 方法不同的是，prop() 方法更适合用于处理布尔属性。

2.1 获取属性值

语法：

javascriptCopy Code
$(selector).prop(property)

示例：

htmlCopy Code
<input type="checkbox" id="myCheckbox" checked>

javascriptCopy Code
var isChecked = $("#myCheckbox").prop("checked");
console.log(isChecked); // 输出 true

2.2 设置属性值

语法：

javascriptCopy Code
$(selector).prop(property,value)

示例：

htmlCopy Code
<input type="checkbox" id="myCheckbox">

javascriptCopy Code
$("#myCheckbox").prop("checked", true);

3. val() 方法

val() 方法用于获取或设置表单元素的值。

3.1 获取值

语法：

javascriptCopy Code
$(selector).val()

示例：

htmlCopy Code
<input type="text" id="myInput" value="Hello World!">

javascriptCopy Code
var value = $("#myInput").val();
console.log(value); // 输出 Hello World!

3.2 设置值

语法：

javascriptCopy Code
$(selector).val(value)

示例：

htmlCopy Code
<input type="text" id="myInput">

javascriptCopy Code
$("#myInput").val("Hello World!");

以上是 jQuery 常用的属性操作方法，使用这些方法可以方便地获取或设置 HTML 元素的属性值，从而达到更好的页面交互效果。