这是一份基础的指南,帮助你开始使用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中关于这些方法的详细说明.