查询

使用 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 代码可以驻留在外部文件中,也可以输出到

选择器和事件

选择器与 CSS 选择器的形式相同:".class"或"#id"。还有更多形式,但这是您经常使用的两种形式。在我们的示例中,我们将使用类“.pref”。还有许多可能的事件,您可能会经常使用的事件是_“点击”。在我们的示例中,我们将使用“更改”_来捕获单选按钮选择。请注意,jQuery 事件的命名通常与 JavaScript 事件的命名有些不同。到目前为止,在我们添加一个空的匿名函数之后,我们的示例语句如下所示:

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

当“pref”类的任何元素发生变化时,这段代码将“做一些事情”。

**注意:**此代码片段以及此页面上的所有示例均用于说明 AJAX 的使用。该代码不适用于生产环境,因为相关操作(如清理、安全、错误处理和国际化)已被有意省略。请务必始终在您的生产代码中解决这些重要操作。