jQuery 学习笔记 1
据说 jQuery 是最好 JavaScript 框架,但是我不会,于是今天决定努力学下。初级学习是看这个教程 Getting Started with jQuery,比较简单,我也帮它翻译下:
安装
开始之前,你需要安装 jQuery 框架,这个非常简单,只要下载 jQuery Starterkit。然后在你的代码中正确调用即可,代码很简单,我不写了。
如果你和我一样懒,也可以采用 Google AJAX Libraries API,使用以下方法调用:
<script src="http://www.google.com/jsapi"></script>
<script>
// Load jQuery
google.load("jquery", "1");
</script>
Hello jQuery
当我们开始使用 jQuery 读取和操纵 DOM 的时候,我需要给 HTML 文档注册一个 ready 事件。代码如下:
$(document).ready(function() {
// do stuff when DOM is ready
});
下面是一个具体的例子:
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
上面这个例子,就是当你点击页面中的链接的时候,他会弹出一个警告框。
下面让我们看看具体发生了什么: $("a")
是一个 jQuery 选择器,这里它选取所有的 a
元素,$
这里是 jQuery "class" 的别名,所以 $()
初始化了一个新的 jQuery 对象。click()
函数是我们调用的 jQuery 对象的一个方法。,它给所有选择的元素绑定了一个单击事件,并在该事件发生的时候执行提供的函数。
这段代码相当于:
<a href="#" onclick="alert('Hello world')">Link</a>
这两者之间的区别是相当明显的,我不用为每个单一元素写 onclick 函数。这样我们就把结构(HTML)和行为(JS)区分开,就和使用 CSS 把结构和样式区分开一样。
最后的例子请猛击这里:jQuery Example 1