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

你可能感兴趣的:(Hello world)