jQuery入门指南教程学习

对jQuery库的说明jQuery的工作方式

Ø 一个简单的Hello World的例子

Ø 选择器

Ø 事件基础

Ø AJAX的用法

Ø FX的用法

安装:http://docs.jquery.com/Downloading_jQuery 这个指南提供一个包含基本实例的包供下载.

Hello jQuery:

在做所有事情之前,我们要让jQuery读取和处理文档的DOM,

必须尽可能快地在DOM载入后开始执行事件,所以,我们用一个ready

事件作为处理HTML文档的开始.

$号是 jQuery “类”(jQuery "class")的一个别称

因此$()构造了一个新的jQuery 对象(jQuery object)。

如：$("a") 是一个jQuery选择器(selector),它选择所有的a标签

函数 click() 、alert（）是jQuery对象的方法。

选择器与事件:

jQuery Base（jQuery基本-----核心）

jQuery Expressions（jQuery<基本>表达式----DOM/Traversing/Selectors----DOM/遍历/选择器）

jQuery Basic Events（jQuery基本事件）

Find me:使用选择器和事件

jQuery提供两种方式来选择html的elements:

第一种是用CSS和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器（如：$("div > ul a")）；

第二种是用jQuery对象的几个methods(方法)。这两种方式还可以联合起来混合使用。

测试选择器:

$(document).ready(function() {

        $("#orderedlist").addClass("red");

});

子节点: > 所有orderedlist中的li

$(document).ready(function() {

        $("#orderedlist > li").addClass("blue");

});

orderedlist中的最后的li

$(document).ready(function() {

        $("#orderedlist li:last").hover(function() {

               $(this).addClass("green");

        }, function() {

               $(this).removeClass("green");

        });

});

每一个onXXX事件都有效，如onclick,onchange,onsubmit等，都有jQuery等价表示方法（译者Keel注：jQuery不喜欢onXXX，所以都改成了XXX，去掉了on）。其他的一些事件，如ready和hover,也提供了相应的方法。

用这些选择器和事件你已经可以做很多的事情了，但这里有一个更强的好东东！

$(document).ready(function() {

        $("#orderedlist").find("li").each(function(i) {

               $(this).html( $(this).html() + " BAM! " + i );

        });

});

find() 让你在已经选择的element中作条件查找,因此 $("#orderedlist).find("li") 就像 $("#orderedlist li")一样。

each()方法迭代了所有的li，并可以在此基础上作更多的处理。

大部分的方法,如addClass(), 都可以用它们自己的 each() 。

在这个例子中, html()用来获取每个li的html文本, 追加一些文字，并将之设置为li的html文本。（译者Keel注：从这个例子可以看到.html()方法是获取对象的html代码，而.html('xxx')是设置'xxx'为对象的html代码）

另一个经常碰到的任务是在没有被jQuery覆盖的DOM元素上call一些方法，想像一个在你用AJAX方式成功提交后的reset：

$(document).ready(function() {

        // use this to reset a single form

        $("#reset").click(function() {

               $("#form")[0].reset();

        });

});

这个代码选择了所有ID为"form"的元素，并在其第一个上call了一个reset()。如果你有一个以上的form，你可以这样做：

$(document).ready(function() {

        // use this to reset several forms at once

        $("#reset").click(function() {

               $("form").each(function() {

                       this.reset();

               });

        });

});

其中是this,不是$(this),为什么?  function写成funtion让我检查半天？

还有一个你可能要面对的问题是不希望某些特定的元素被选择。jQuery 提供了filter() 和not() 方法来解决这个问题。 filter()以过滤表达式来减少不符合的被选择项, not()则用来取消所有符合过滤表达式的被选择项. 考虑一个无序的list，你想要选择所有的没有ul子元素的li元素。

$(document).ready(function() {

        $("li").not("[ul]").css("border", "1px solid black");

});

这个代码选择了所有的li元素，然后去除了没有ul子元素的li元素。刷新浏览器后，所有的li元素都有了一个边框，只有有ul子元素的那个li元素例外。

上面代码中的[expression] 语法是从XPath而来，可以在子元素和属性(elements and attributes)上用作过滤器，比如你可能想选择所有的带有name属性的链接:

$(document).ready(function() {

        $("a[@name]").background("#eee");

});

$(document).ready(function(){

        $(a[@name]).css("background", "red");                                    

});

更常见的情况是以name来选择链接，你可能需要选择一个有特点href属性的链接，这在不同的浏览器下对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() {

         var answer = $(this).next();

         if (answer.is(':visible')) {

             answer.slideUp();

         } else {

             answer.slideDown();

         }

     });

});

写成 answer.is(‘visible:’)了！！也写成answer.is(‘visble’)了！

这里我们用了一些链式表达法来减少代码量，而且看上去更直观更容易理解。像'#faq' 只选择了一次，利用end()方法，第一次find()方法会结束(undone)，所以我们可以接着在后面继续find('dt')，而不需要再写$('#faq').find('dt')。

在点击事件中的，我们用 $(this).next() 来找到dt下面紧接的一个dd元素，这让我们可以快速地选择在被点击问题下面的答案。

（译者Keel注：这个例子真是太酷了，FAQ中的答案可以收缩！从利用next()的思路到实现这些效果都有很多地方需要我们消化，注意 if (answer.is(':visible'))用法，注意answer.slideUp();不懂的地方赶紧查我在最开始提到的两个必看API文档）

除了选择同级别的元素外，你也可以选择父级的元素。可能你想在用户鼠标移到文章某段的某个链接时，它的父级元素--也就是文章的这一段突出显示，试试这个：

$(document).ready(function() {

        $("a").hover(function() {

               $(this).parents("p").addClass("highlight");

        }, function() {

               $(this).parents("p").removeClass("highlight");

        });

});

$(document).ready(function(){

        $(a).hover(function(){

               $(this).parent('p').addClass('highlight');},

               function(){

                       $(this).parent('p').removeClass('hightlight');

                       });                                              

});

（译者Keel注：highlight是core.css中定义的样式，你也可以改变它，注意这里有第二个function()这是hover方法的特点，请在API文档中查阅hover，上面也有例子说明）

$(document).ready(callback)的缩写法：

$(function() {

// code to execute when the DOM is ready

});