jQuery入门

这是一份基础的指南,帮助你开始使用jQuery.如果你仍没有一个测试页,那么先用下面的代码创建一个HTML文件吧:

< html >
   < head >
     < script  type ="text/javascript"  src ="path/to/jquery.js" ></ script >
     < script  type ="text/javascript" >
       //  Your code goes here
     </ script >
   </ head >
   < body >
     < a  href ="http://jquery.com/" > jQuery </ a >
   </ body >
   </ html >

编辑script的src属性,让其指向你的jquery.js.例如,如果jquery.js在HTML文件相同的文件夹内,你可以这样写:

< script  type ="text/javascript"  src ="jquery.js" ></ script >

你可以从 Download jQuery 下载jQuery.

大多数的JavaScript程序员所做的第一件事就是在他们的程序中加上类似于这样的代码:
window.onload = function(){ ... }

上面的这段代码,是想在页面加载的时候执行一些脚本.问题是,这段JavaScript在所有的图片加载完之前是不会执行的.在开始的地方使用window.onload的原因是在第一次运行你的代码的时候,document还没有加载结束.
为解决这个问题,jQuery提供了一种简单的语句供你使用:
 $(document).ready(function(){
   // Your code here
 });
上面的写法将检测document,直到它可以被操作.将上面的代码加到测试页面中,剩余的例子将放置在这个回调函数中,所以它们将在document准备好工作时被执行.

首先我们将尝试一些link的click事件.在ready function中, 添加下面的代码:

$("a").click(function() {
    alert("Click the link.");
});

保存HTML文件,并在浏览器中重新加载.在链接上单击,将弹出个对话框,之后页面会跳转到http://jquery.com/".
对于单击或其他的一些事件,你可以在这阻止它的默认的行为,下面的指向jquery.com的链接,从事件句柄处返回一个false,将不会进行跳转.

另外一个普通的任务就是给原素添加或删除classes,如下:

$("a").addClass("test");

如果你在Header里添加了CSS信息,如下:

< style  type ="text/css" > a.test  {  font-weight :  bold ;   }
  </ style >

之后调用上面的addClass,所有的a标签元素现在都将是粗体的了.删除class,你可以使用removeClass.
在jQuery中,提供了一些非常容易使用的特效.将下面的代码添加到测试页中,改变单击的响应:

$("a").click(function(){
   $(this).hide("slow");
   return false;
 });

现在,如果你点击任何的链接,它将慢慢的消失.

jQuery使用一个非常有趣的方式来使它的代码短小而简单.对于那些熟悉的OO编程,这种方式显得更加的直接.
简单的说,jQuery中的每个方法都返回请求对象的本身,允许你把它的各个方法连接到一起,如下例:

$("a").addClass("test").show().html("foo");

上面的代码给a标签添加了一个class, 并将其在页面显示的内容改成foo.
他们每一个方法(addClass, show, html),都返回一个jQuery对象,允许你将方法应用于当前设置的元素上.

你可以采取更进一步的操作,添加或删除选择的元素,如下:

$( " a " )
   .filter( " .clickme " )
     .click( function (){
       alert( " You are now leaving the site. " );
     })
   .end()
   .filter( " .hideme " )
     .click( function (){
       $( this ).hide();
        return   false ;
     })
   .end();

在测试页添加上如下的代码:

  < a  href ="http://google.com/"  class ="clickme" > I give a message when you leave </ a >
  < a  href ="http://yahoo.com/"  class ="hideme" > Click me to hide! </ a >
  < a  href ="http://microsoft.com/" > I'm a normal link </ a >

修改jQuery选择的方法,使用end()来结束方法:
    * add(),
    * children(),
    * eq(),
    * filter(),
    * find(),
    * gt(),
    * lt(),
    * next(),
    * not(),
    * parent(),
    * parents(),
    * siblings().

可以查看Traversing API documentation中关于这些方法的详细说明.