jQuery 实验教程（2）jQuery 语法:温故而知新

look_w

jQuery 语法:温故而知新虽然 jQuery 本身并非一门新的语言。但是，学习其语法有助于我们熟练、灵活地使用它。回顾下我们熟悉的 CSS 语法，不难发现 jQuery 的语法与 CSS 有相似之处。
jQuery 语法的设计思想是"选择元素，对其操作"。这和 CSS 规则的语法非常类似。比如，要将页面中一个 ID 为 message 的元素的字体颜色设置为蓝色、字体大小设置为 17px，则可以定义如清单 4 所示 CSS 规则：
清单 4. CSS 规则例子

1 2 3 4

#message{ color:blue; font-size:17px; }

从上述 CSS 规则中可见，我们期望的对元素外观的操作（字体颜色设置为蓝色、字体大小设置为 17px）是通过” color:blue”和”font-size:17px”这 2 个属性声明指定的。而这些操作要作用于哪些元素，则是通过 CSS 的选择器”#message”指定为 ID 等于“message”的元素。
总结来说，CSS 规则中属性声明描述了外观属性操作，而选择器则指定了将相应的属性操作应用于哪些元素。如图 1 所示：
图 1. CSS    规则示意图jQuery 的语法其实正是模仿了 CSS 规则的语法。其语法如下：

1	$(selector).action(actionParameter);

这是个链式语法。因此，上述的语法等效于：

1 2 3 4

var objTargetElements;//要施加操作的目标元素 objTargetElements=$(selector);//指定目标元素 //调用 objTargetElements 的相关方法，对目标元素进行操作 objTargetElements.action(actionParameter);

上述语法中，
$ ：美元符是 jQuery 核心函数 jQuery 的一个别名。当然，在 JavaScript 中“$”是一个合法的函数名。 Selector 参数指定了一个 jQuery 选择器。jQuery 选择器类似于 CSS 中的选择器，它告诉 jQuery 我们准备对哪些元素进行操作(action)。并且，CSS 中的各种选择器 jQuery 中都有等同的选择器。
action ：该方法指定了要对 selector 所指定的元素进行什么具体操作。actionParameter 参数是个可选参数，是根据具体所指定的方法来定的，它会随具体方法的变化而变化。
因此，清单 3 中的 jQuery 语句相当于：
清单 5.Query 非链式语法示例

1 2 3 4 5 6 7 8 9 10 11

/* $("#message").html("Hello World, it is now:" +new Date().toLocaleString()); 相当于： */ var objTargetElements;//要施加操作的目标元素 //指定目标元素为 ID 等于 message 的元素，使用基于 ID 的选择器 objTargetElements=$("#message"); //调用 objTargetElements 的 html 方法，设置目标元素的 HTML 内容 objTargetElements.html ("Hello World, it is now:" +new Date().toLocaleString());

$ 函数的返回值是一个 jQuery 自定义的类似数组的对象。该对象的各个数字下标表示的属性对应的值为选择器所匹配的各个元素。
比如，清单 3 中的 $ 函数调用，它为 $ 函数指定了一个基于元素 ID 的选择器表达式：

1	$("#message")

其返回值将满足下列条件表达式。因为选择器表达式”#message”匹配了唯一一个 ID 为 message 的元素：

1	document.getElementById("message")==$("#message")[0]

$ 函数返回的对象还提供了一些方法，通过调用该对象的相关方法可以对选择器所匹配的元素进行相应的操作。比如，清单 3 所示代码中，我们通过调用$函数返回对象的 html 方法设置选择器表达式”#message”所匹配的元素的 HTML 内容。
为了更加直观得了解 $ 函数的返回值，建议您通过 Chrome 浏览器中的开发者工具的表达式监视功能（ Watch Expressions），观察一个具体的$函数调用的返回值。如图 2 所示：
图 2.$ 函数返回值示意图jQuery 的语法和清单 3 中的 jQuery 语句的对应关系如图 3 所示：
图 3. jQuery    语法实例 $ 函数返回的对象提供了一个名为 each 的常用方法。 each 方法接受一个参数，该参数是一个回调函数。 each 方法会针对选择器表达式所匹配的元素中的每个元素逐次调用这个回调函数，并将单个元素及其对应的索引号作为参数传入该函数。下面看一个实例。
假设在页面中有多个链接，现在要将这个页面中所有链接的 URL 显示在浏览器的控制台中。
页面代码如下所示：
清单 6.$ 函数返回值实例

1 2 3 4 5

<a href="https://www.ibm.com/developerworks/cn/" target="_blank"> IBM developerWorks 中文站</a><br/> <a href="https://www.ibm.com/developerworks" target="_blank"> IBM developerWorks</a><br/> <a href="/" target="_blank">首页</a><br/>

此时，可以用基于元素名称的选择器来匹配多个元素（页面中所有的链接元素），并调用$函数返回值的 each 方法。这里，我们定义一个回调函数（ 这个回调函数通常是一个匿名函数，方便代码编写），把它作为 each 函数的参数。在这个回调函数中，我们往浏览器控制台中打印每个链接的 URL，如清单 7 代码所示：
清单 7.jQuery 的 each 方法－－－遍历集合型对象的简便方法

1 2 3 4

//用基于元素名称的选择器去匹配页面中的所有链接元素 $("a").each(function(index,ele){//匿名函数作为 each 方法的参数，供其调用 console.log("链接"+index+":"+ele.href);//往控制台中打印链接 URL });

现在，您不妨做一个练习，来改变 ID 为 tip 的元素使其能够以粗体显示。我们知道，要让一个元素粗体显示，只要指定其 CSS 属性 font-weight 为 bold 即可。也就是说，实现这样一个功能，我们需要的选择器是“#tip”，对应的操作是修改 CSS 属性。因此，jQuery 的代码是：

1	$("#tip").css("font-weight","bold");

您可以使用本教程配套的在线代码编辑器直接编写代码练习上面的代码：

在线代码编辑器效果如下图所示：
图 4.    在线代码编辑器