jQuery中DOM 属性使用实例详解上篇

首先，在讲解jQuery中DOM属性使用之前，我们需要了解一下DOM属性的概念。DOM属性是指Document Object Model（文档对象模型）的属性，它们用于访问HTML元素的属性，比如元素的文本内容和样式等。在jQuery中，通过使用prop()和attr()方法可以轻松地查询和修改HTML元素的DOM属性。

本篇攻略中，我们将详细讲解jQuery中DOM属性使用的方法和技巧，并提供两个实例进行说明。

一、使用prop()方法查询和修改HTML元素的DOM属性

prop()方法是jQuery中用于查询和修改HTML元素的DOM属性的最常用方法之一。下面我们就来看一下如何使用prop()方法。

1. 查询DOM属性

使用prop()方法查询DOM属性非常简单，例如，我们可以获取一个checkbox元素的checked属性：

var isChecked = $("#myCheckbox").prop("checked");

上述代码中，我们用$("#myCheckbox")选中了一个id为“myCheckbox”的checkbox元素，然后通过prop()方法查询该元素的checked属性，并将结果赋值给isChecked。

2. 修改DOM属性

使用prop()方法修改DOM属性和查询DOM属性的方法类似，我们同样可以通过prop()方法修改checkbox元素的checked属性。

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

上述代码中，我们将一个id为“myCheckbox”的checkbox元素的checked属性设置为true。这样就可以通过jQuery轻松地修改HTML元素的DOM属性了。

二、使用attr()方法查询和修改HTML元素的DOM属性

除了prop()方法外，还有一个常用的方法用来查询和修改HTML元素的DOM属性，那就是attr()方法。

1. 查询DOM属性

使用attr()方法查询DOM属性和使用prop()方法查询DOM属性非常类似，下面是一个通过attr()方法获取img标签的src属性的示例：

var imgUrl = $("img").attr("src");

上述代码中，我们用$("img")选中了一个img元素，然后通过attr()方法查询该元素的src属性，并将结果赋值给imgUrl。

2. 修改DOM属性

与prop()方法类似，使用attr()方法修改DOM属性也非常方便。例如，我们可以通过attr()方法修改img元素的src属性：

$("img").attr("src", "newImage.png");

上面的代码将选中的img元素的src属性设置为“newImage.png”。

三、示例说明

下面提供两个实例说明jQuery中的DOM属性使用方法。

示例1：文本框获得焦点

假设我们有一个文本框，希望在用户点击该文本框后，使其获得焦点并将文本设置为默认值。我们可以通过以下代码实现：

<input type="text" id="myInput" value="请输入内容"/>

$("#myInput").on("focus", function() {
  $(this).prop("value", "");
});

上述代码中，我们使用了on()方法来绑定文本框的focus事件，当文本框获得焦点后，即会执行定义的回调函数。在回调函数中，我们使用prop()方法将文本框的默认值清空。

示例2：图片切换

假设我们有两个图片，希望用户点击其中一个图片后，替换为另一个图片。我们可以通过以下代码实现：

<img id="myImage" src="image1.png"/>
<img id="myBtn" src="button.png"/>

$("#myBtn").on("click", function() {
  $("#myImage").attr("src", "image2.png");
});

上述代码中，我们使用了on()方法来监听按钮的click事件。当用户点击按钮后，即会将id为“myImage”的img元素的src属性设置为“image2.png”，从而实现了图片的切换效果。

通过对上述实例的讲解，我们相信读者对jQuery中DOM属性的使用已经有了更深入的理解。