jQuery

使用jQuery

收到WordPress网页后，jQuery脚本会在用户浏览器上运行。基本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”类的任何元素发生更改时，此代码将“执行任务”。