Ajax 中的名称类和 id 引用 - Javascript

在 Ajax 编程中，通常需要使用 JavaScript 动态向页面添加或更新内容。为了使 JavaScript 能够访问页面元素，可以使用名称类和 id 引用。

名称类引用

$("[name='elementName']")

名称类引用式使用 jQuery 选择器来查找具有指定名称的元素。例如，如果要查找 name 属性为 "username" 的输入元素：

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

可以使用以下 JavaScript 代码：

var usernameInput = $("[name='username']");

ID 引用

$("#elementId")

ID 引用使用 jQuery 选择器来查找具有指定 ID 的元素。例如，如果要查找 ID 为 "username" 的输入元素：

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

可以使用以下 JavaScript 代码：

var usernameInput = $("#username");

代码示例

以下示例演示如何使用名称类和 id 引用来更新页面上的元素。假设页面上有一个 div 元素和一个 button 元素：

<div id="output"></div>
<button id="updateButton">更新输出</button>

当点击 button 元素时，会向 div 元素中添加文本。

$(document).ready(function() {
  $("#updateButton").click(function() {
    var outputDiv = $("#output");
    outputDiv.append("更新输出<br>");
  });
});

在这个例子中，我们使用了 ID 引用来获取 button 元素和 div 元素。点击 button 元素时，我们使用 ID 引用来获取 div 元素，并使用 append() 方法向 div 元素中添加文本。

结论

使用名称类和 id 引用是在 Ajax 编程中访问页面元素的快捷方式。在选择 jQuery 选择器时，应该选择应用最广泛的选择器，以确保代码是最具可读性和可维护性的。