jQuery学习笔记

一.jQuery的目的是: 将结构与行为分开.

使用jQuery不用在每个a标签上写onclick事件,所以我们拥有了一个整洁的结构文档(HTML)和一个行为文档(JS),达到了将结构与行为分开的目的,就像我们使用CSS追求的一样.

 

二.例如:
$(document).ready(function() {
 $("a").click(function() {
  alert("Hello world!");
 });
});

$("a") 是一个jQuery选择器(selector),在这里,它选择所有的a标签(译者Keel注:即<a></a>),$号是 jQuery “类”(jQuery "class")的一个别称,因此$()构造了一个新的jQuery 对象(jQuery object)。

 

三.使用步骤:
1.一开始,我们需要下载一个jQuery的库,最新的下载可以到这里找到。
下载后解压缩,打开starterkit.html和custom.js这两个文件。(译者Keel注:这两个就是例子文件,所有的例子都用这两个例子作出,custom.js写jQuery代码,starterkit.html观察效果.)


2.starterkit.html里引入两个js文件.
<script src="lib/jquery.js" type="text/javascript"></script>
<script src="custom.js" type="text/javascript"></script>

jquery.js是库的标准代码,一定要引入的.
custom.js是我们的自定义文件, 可以任意写的, 在做所有事情之前,要让jQuery读取和处理文档的DOM,必须尽可能快地在DOM载入后开始执行事件,所以,规定用一个ready事件作为处理HTML文档的开始.

 

3.实际的代码(点击任意一个超级链接都会弹出alert和给一些元素加class样式.

$(document).ready(function() {
     $("a").click(function () {
        alert("Hello world!");
        $("#orderedlist").addClass("red");
        $("#orderedlist > li").addClass("blue");

    }); 

});

 

参考资料:
jQuery入门指南教程
http://www.k99k.com/jQuery_getting_started.html

 

 

posted on 2011-11-03 16:37  BobLiu  阅读(257)  评论(0编辑  收藏  举报