Hello jQuery
=======
空白HTML页面代码, 仅仅加载了jquery.js库.
<html> <head> <script type="text/javascript" src="jquery-1.3.2.min.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>
下面这段代码为document对象的ready事件注册了一段事件处理代码.
$(document).ready(function() { // do stuff when DOM is ready });
下面这段代码的所作的事情是在document对象准备好了, 调用了ready事件的时候, 选择当前document中所有的a对象(超链接对象), 并在a对象被点击的时候弹出alert, 在其中输出hello world.
$(document).ready(function() { $("a").click(function() { alert("Hello world!"); }); });
注意这里的$("a"), 这是一个jquery的选择器(selector).
符号'$'本身是jQuery里"class"的别名, 所以$()会构造一个新的jQuery对象.
click()是jQuery对象的一个函数.
上面的一段代码实际上是把click()事件绑定到了所有选择了的元素(在这个例子里仅是一个超链接元素)上, 并且在事件发生的时候执行我们提供的函数代码.
上面的代码相当于:
<a href="" onclick="alert('Hello world')">Link</a>
这二者的区别很明显:
- 我们不需要在每一个元素上写onclick了.
- 我们清晰地把结构(HTML)与行为(JS)分开了, 跟我们把结构(HTML)与展现(CSS)分开一样.
来源:
Tutorials:Getting Started with jQuery
http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery