这个向导是jQuery库的一个简单介绍。当然你需要有JavaScript和DOM的基本知识。这份向导从最基本的开始讲起,同时解释了必要的细节。它把噢噢喊了简单的helloworld例子、选择符(selector)、基本事件、AJAX、FX以及使用和著作的插件。
这份向导没有包含任何"click me"的例子。之所以只提供"copy me"的例子的目的就是为了让你自己动手来实现它们。拷贝一个实例,看看它如何工作,然后去修改它。
SETUP
为了开始,我们需要jQuery的库,你可以从main download page来获取它。 jQuery Starterkit 提供了一些工作所需要的标记和css。下载完之后,将它解压,将jquery.js放到同一个目录,同时用编辑器将starterkit.html和custom.js打开,同时把html文件用浏览器打开。
现在我们就完成了进行hello world的所有准备工作。
其他你可能感兴趣的链接:
HELLO JQUERY
我们从一个空的html文件开始:
<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> // we will add our javascript code here </script> </head> <body> <!-- we will add our HTML content here --> </body> </html>
这个页装载了jquery.js(在这个例子中我们假设html文件和jquery.js放在同一个目录下)。两个加了注释的地方指明了这段代码中我们接下来要修改的模板部分。
为了保证我们使用jQuery所作的所有事情包括读取和包装DOM能够正常运行,我们需要保证当DOM准备好的时候就开始添加事件等等。
为此,我们注册了一个事件。
$(document).ready(function() {
// do stuff when DOM is ready });
仅仅添加这一段代码显得没有什么意义,因为它不需要任何DOM被加载。因此我们来一点复杂的:当点击一个连接的时候显示一个alert。
下面的代码添加到<body>中:
<a href="">Link</a>
更新e $(document).ready
处理器:
$(document).ready(function() { $("a").click(function() { alert("Hello world!"); }); });
当你点击link链接的时候,就会弹出一个hello world的alert。你可以把这段代码考入custom.js当中,当你点击starterkit.html中的任何
链接的时候,也会出现同样的效果。
让我们来看看我们到底做了什么:$("a")是一个jQuery的选择符,在这个例子中,它选择了所有的a元素。 $是jQuery"class"的一个别名,
因此$()就构造了一个jQuery的新对象。click()方法则是jQuery对象的一个方法。它为所有选择的元素绑定了单击的事件。(在这个例子中,
是一个链接)。
这和下面的代码相似:
<a href="" οnclick="alert('Hello world')">Link</a>
这样区别就很明显,我们不必为所有单独的元素写onclick事件。我们的html和js行为有了明显的区分,就像我们把结构和表现层(css)分开一样。
通过这种想法,我们来继续探讨选择符和事件。
你可能感兴趣的链接: