首页 » App » jQuery 学习笔记 1

jQuery 学习笔记 1

July 30th, 2008 Denis

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

作者：Denis
原文链接：jQuery 学习笔记 1

标签：

分享到 Twitter 分享到 Twitter Delicious 收藏到 Delicious 分享到 Google Reader 分享到 Google Reader 分享到 FriendFeed 分享到 FriendFeed

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

16 条评论 添加你的评论

发表评论

你必须 登陆 之后才能留言。你可以使用以下方式快速登陆我爱水煮鱼：

你也可选择直接在本站 注册。


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

赞助商

(mt) Media Temple 长期承接 WordPress 项目 WordPress主机合租 用网页模板，当然要选TemplateMonster China 免費資源網路社群 freegroup.org http://p6p9.com/ 在我爱水煮鱼投放广告位

本站推荐

快速导航