jQuery属性

当我们操作HTML元素的时候，经常需要获取或者设置元素的属性，比如元素的高度、宽度、值等等。jQuery提供了一些方法来操作元素的属性，本文将详细讲解jQuery属性的使用方法和应用场景。

获取元素属性

jQuery提供了3个方法来获取元素的属性：.attr()、.prop() 和 .val()。

1. .attr()

.attr() 方法用于获取元素的属性值，比如获取一个文本框的value值。下面是一个例子：

<input type="text" id="username" value="John">

<script>
var $username = $("#username");
var usernameVal = $username.attr("value"); // 获取value值
console.log(usernameVal); // 输出： John
</script>

2. .prop()

.prop() 方法的作用和 .attr() 方法类似，但是它用于获取和设置元素的属性值。但是，prop 方法专门用于处理表单元素，如单选框，下拉框和多个选择框等。下面是一个例子：

<input type="checkbox" id="checkbox" checked="checked">

<script>
var $checkbox = $("#checkbox");
// 获取状态
var checkboxState = $checkbox.prop("checked"); // true
// 设置状态
$checkbox.prop("checked", false); // 取消勾选
</script>

3. .val()

.val() 方法用于获取和设置表单元素的 value 属性值，比如文本框、下拉框、单选框等。下面是一个例子：

<input type="text" id="username" value="John">

<script>
var $username = $("#username");
var usernameVal = $username.val(); // 获取value值
console.log(usernameVal); // 输出： John

$username.val("Mike"); // 更新value值
usernameVal = $username.val();
console.log(usernameVal); // 输出： Mike
</script>

设置元素属性

jQuery提供了 3 个方法来设置元素的属性：.attr()、.prop() 和 .val()。此外，还可以使用 .css() 方法来设置元素的样式。

1. .attr()

.attr() 方法用于设置元素的属性值，比如设置一个图片元素的src属性。下面是一个例子：

<img id="picture" src="picture1.jpg">

<script>
var $picture = $("#picture");
$picture.attr("src", "picture2.jpg"); // 替换图片
</script>

2. .prop()

.prop() 方法的作用和 .attr() 方法类似，它用于设置属性值。下面是一个例子：

<input type="checkbox" id="checkbox">

<script>
var $checkbox = $("#checkbox");
$checkbox.prop("checked", true); // 勾选复选框
</script>

3. .val()

.val() 方法用于设置表单元素的 value 属性值，比如设置文本框、下拉框、单选框等的值。下面是一个例子：

<input type="text" id="username">

<script>
var $username = $("#username");
$username.val("Mike"); // 设置input的value值
</script>

4. .css()

.css() 方法用于设置元素的样式。下面是一个例子：

<style>
#content {
  height: 300px;
  width: 500px;
  background-color: #eee;
}
</style>

<div id="content"></div>

<script>
var $content = $("#content");
$content.css("background-color", "#ccc"); // 修改背景色
</script>