jQuery

使用 jQuery

您的 jQuery 脚本在用户浏览器中运行，这是在您的 WordPress 网页被接收之后。基本的 jQuery 语句包含两部分：一个选择器，用于确定代码应用于哪些 HTML 元素；以及一个操作或事件，用于确定代码执行什么操作或对什么做出反应。基本的事件语句看起来像这样：

jQuery.(selector).event(function);

当在由选择器选定的 HTML 元素中发生某个事件（例如鼠标点击）时，定义在最后括号内的函数将被执行。

以下所有代码示例均基于此 HTML 页面内容。假设它出现在您的插件管理设置屏幕上，由文件 myplugin_settings.php 定义。它是一个简单的表格，每个标题旁边都有单选按钮。

<form id="radioform">
	<table>
		<tbody>
		<tr>
			<td><input class="pref" checked="checked" name="book" type="radio" value="Sycamore Row" />Sycamore Row</td>
			<td>John Grisham</td>
		</tr>
		<tr>
			<td><input class="pref" name="book" type="radio" value="Dark Witch" />Dark Witch</td>
			<td>Nora Roberts</td>
		</tr>
		</tbody>
	</table>
</form>

输出在您的设置页面上可能看起来像这样。

在 关于 AJAX 的文章中，我们将构建一个 AJAX 交换，将用户选择保存在 usermeta 中，并添加带有所选标题标签的帖子数量。这不是一个非常实用的应用程序，但它说明了所有重要的步骤。jQuery 代码可以驻留在外部文件中，也可以输出到页面内的 <script> 块中。我们将专注于外部文件变体，因为从 PHP 传递值需要特别关注。如果您觉得这样更便捷，相同的代码也可以输出到页面。

选择器和事件

选择器的形式与 CSS 选择器相同：".class"或"#id"。还有许多 其他形式，但这两个是您经常使用的。在我们的示例中，我们将使用类 ".pref"。还有许多可能的 事件，您很可能会大量使用的是 'click'。在我们的示例中，我们将使用 'change' 来捕获单选按钮的选择。请注意，jQuery 事件的命名方式与 JavaScript 中的有所不同。到目前为止，在我们添加一个空的匿名函数后，我们的示例语句看起来像这样：

$.(".pref").change(function(){
	/*do stuff*/
});

当任何属于 "pref" 类的元素发生变化时，此代码将“执行操作”。

注意：此代码片段以及本页面中的所有示例均用于说明 AJAX 的使用。由于相关操作（如 清理、安全性、错误处理 和 国际化）已被故意省略，因此该代码不适合生产环境。请务必在生产代码中始终处理这些重要操作。