jQuery基础教程摘录 Hello world

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