Tutorials:Getting Started with jQuery---2

 

FIND ME: USING SELECTORS AND EVENTS

jQuery提供了两种选择元素的方法。第一种方式结合了CSS和XPath选择符，将它们作为string传给jQuery构造器 (eg. $("div > ul a"))。第二种方式则使用了jQuery的几种方法。这两种方式可以混合使用。

为了尝试一下这些选择符，我们选择修改starterkit中第一个列表。

为了顺利的开始，我们需要能够选择列表。列表的ID为 "orderedlist"。在传统的JavaScript中，你可以通过使用document.getElementById("orderedlist")来选择它。而在jQuery中，我们可以这样做： 

 $(document).ready(function() {
   $("#orderedlist").addClass("red");
 });

starterkit提供一个"red"的class，只是简单的增加了一个红色的背景。因此，当你在浏览器重新加载页面的时候，你会发现列表背景变成了红色。而第二个列表则没有被修改。

现在我们为这个列表的子元素增加更多的class。

 $(document).ready(function() {
   $("#orderedlist > li").addClass("blue");
 });

这个操作选择orderedlist的li元素，并为其增加了"blue"class。

现在让我们做点更有趣的事情：当把鼠标停在li元素上以及离开li元素的时候增加和删除class，这里只对列表中最后一个元素起作用。

 $(document).ready(function() {
   $("#orderedlist li:last").hover(function() {
     $(this).addClass("green");
   },function(){
     $(this).removeClass("green");
   });
 });

还有许多其他类似CSS 和 XPath语义的选择符。更多的例子和可用的的表达式可以在下面的链接找到。

对每一个可用onxxx事件，如onclick、onchange、onsubmit，都有一个对应的jQuery。另外一些其他的事件Some other events，如ready和hover，都通过便利的方法来提供。

你可以在下面的链接中找到完整的事件列表jQuery Events Documentation。

通过这些选择符和时间，你可以做很多的事情，但是还有另外一件事情。

 $(document).ready(function() {
   $("#orderedlist").find("li").each(function(i) {
     $(this).append( " BAM! " + i );
   });
 });

find()允许进一步搜索当前已选元素的子元素，因此 $("#orderedlist").find("li") 其功能和i $("#orderedlist li")类似。

each()遍历每个元素允许进一步的操作。大部分的方法，例如addClass()都会使用each()。

在这个例子中， append()被用来添加一个文本，并且把这些文本添加到每个元素的末尾。

两外一个你经常碰到的任务就是在DOM元素上调用方法，而这些通常不能通过jQuery来完成。如果通过AJAX提交一个form之后，你想重置它。

 $(document).ready(function() {
   // use this to reset a single form
   $("#reset").click(function() {
     $("form")[0].reset();
   });
 });

上面这段代码选择了第一个form，并调用reset()方法。如果你的页面里包含多个form，你可以通过下面的方式来完成：

 $(document).ready(function() {
   // use this to reset several forms at once
   $("#reset").click(function() {
     $("form").each(function() {
       this.reset();
     });
   });
 });

这种方式会选择页面中所有的form，遍历它们并调用reset()方法。请注意每一个.each() 方法，它们都关联到一个实际的元素。另外需要注意的是reset()方法属于form元素而不是jQuery对象，所以我们不能简单的调用l$("form").reset() 去完成重置功能。

另外一个挑战就是在一组相似的元素中选择特定的元素。jQuery提供了filter() 和 not() 来完成这个任务。filter()通过过滤器表达式来过滤选项， 而not()就是取反的意思。考虑下面的场景，在一个无序列表中，选择没有ul子元素的li元素。 

 $(document).ready(function() {
   $("li").not(":has(ul)").css("border", "1px solid black"); 
 });

这里选择了所有包含ul元素的li元素，并且移除它们。因此所有的li元素都会包含一个border，除了那些包含ul子元素的li。

 [expression] 语义取自XPath，它可以通过属性来过滤。你可能想要选择那些所有拥有name属性的anchors：

 $(document).ready(function() {
   $("a[name]").css("background", "#eee" );
 });

这个为所有的anchor元素添加了背景色。T

更多情况下，你可能不通过name来选择anchor，你可能会通过"href"来选择。这样做可能会带来一些问题，因为不同的浏览器行为不一致。为了解决这个问题，我们可以使用通配符"*="来代替"="：

 $(document).ready(function() {
   $("a[href*=/content/gallery]").click(function() {
     // do something with all links that point somewhere to /content/gallery
   });
 });

到现在为止，所有的选择符都用来选择子元素或者过滤当前的选择。许多情况下，你可能需要选择之前或者下面的元素，称之为“兄弟”。考虑典型的FAQ页面，在初始的情况下所有的答案都是隐藏的，当你点击问题的时候，答案会被显示出来。jQuery代码如下： 

 $(document).ready(function() {
   $('#faq').find('dd').hide().end().find('dt').click(function() {
     $(this).next().slideToggle();
   });
 });

这里使用了一些技巧来减少代码量来获得更好的性能，由于 '#faq' 只能被选择一次。通过使用end()，开始方法最后被调用，因为我可以开始搜索#faq元素，通过使用find()方法而不是使用dd。 

在click处理器中，我们使用 $(this).next() 来从当前的dt来查找下一个兄弟。这就能完成当点击问题的时候，迅速的选择答案。

除了兄弟之外，你也可以选择父元素。也许你想要鼠标悬停的进行高亮的显示：

 $(document).ready(function(){
   $("a").hover(function(){
     $(this).parents("p").addClass("highlight");
   },function(){
     $(this).parents("p").removeClass("highlight");
   });
 });

让我们来进行下一步：jQuery能够简化代码，因此提高了易读性并且易于维护。下面就是$(document).ready(callback)的一个快捷方式：

 $(function() {
   // code to execute when the DOM is ready
 });

因此hello world也可以这样写：

 $(function() {
   $("a").click(function() {
     alert("Hello world!");
   });
 });

现在，我们已经看到了最基本的，接下来，我们来探讨更多的概念，从AJAX开始。

你可能感兴趣：

• jQuery API documentation
• Visual jQuery - A categorized browsable API documentation.
• jQuery Selectors
• jQuery Events
• jQuery DOM Traversing