首页 » App » jQuery 学习笔记 1

jQuery 学习笔记 1

July 30th, 2008 at 01:13am 雪山飞猪

据说 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

作者：雪山飞猪
原文链接：jQuery 学习笔记 1

标签：

17fav 收藏本文 [Post to Twitter]分享到 Twitter

相关日志 本月排行 所有排行

15 条评论 添加你的评论

发表评论

必须

必填，打死不公开

:mrgreen: :neutral: :twisted: :arrow: :shock: :smile: :???: :cool: :evil: :grin: :idea: :oops: :razz: :roll: :wink: :cry: :eek: :lol: :mad: :sad: :!: :?:

中文 Dashboard 3.0 代友发英雄帖：广州游艺招聘 Web 技术精英

强烈推荐

PureCSS WordPress Theme 长期承接 WordPress 项目

最新日志

最新留言

赞助商