学习jQuery，首先学习的肯定是 John Resig大神的jQuery开篇。
Tutorial：How jQuery works（指南：jQuery怎么工作？）
学习后的目标：
1. jQuery的基本使用方式
2. 明白window.onload 和 $(document).read()的区别
3. 怎么通过jQuery获取dom对象
在jQuery的官网下载jQuery，然后创建一个html的测试页面，
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery tutorial</title>
</head>
<body>
<h1>jQuery Tutorial!</h1>
<a href="http://jquery.com">jQuery</a>
<script type="text/javascript" src="javascript/jquery-1.7.1.js"></script>
</body>
</html>
注意到一个细节，大神的引入jQuery的<script>的位置在body的最后一行，在firebug下面看了下，这样是有好处的，因为js的加载是阻塞式的，当映入js的代码在head中的时候，浏览器会去加载js，而阻塞了，其他的http请求和页面html的加载。而放在body的最后一行，这样等着dom加载完毕才去请求js，加载js，页面加载的速度会快一点。在firebug看了下，在head中引入jQuery的页面加载速度41ms，而在body的最后一行加载的速度是19ms，如果考虑在网络上，这个差距估计还会大一点。
在没有使用jQuery之前，我一般在写非侵入的js的时候会用到window.onload, 如：
window.onload = function() {
......
}
这样写的好处是，当用document.getElementById的时候避免dom在id元素还没有加载出来，从而得不到dom的id对象。当然也可以不用window.onload，直接把js放在body最后面就像上面说的那样。
我们看看大神怎么解释$(document).read()的优点的。
当浏览器加载页面时不会去运行js的代码，直到所有图片的下载完成（包括那些侧边广告额~）。在第一个地方使用window.onloa去试着运行你的代码时，html的dom还没有完成加载。而jQuery通过document的ready事件，只要监测到页面的dom完成渲染加载就可以去操作。
简单的讲就是，window.onload也等待页面所有的dom元素和属性完成加载，如需要等到图片完成加载后，才可以运行。
而jQuery的原理是只要页面的dom树可以渲染和加载就可以操作dom，效率要高一点。
$(document).ready(function(){
//your code here!
});
还有就是window.onload只能运行一次，
如：
<script type="text/javascript">
window.onload = function() {
console.log("a");
}
window.onload = function() {
console.log("b");
}
window.onload = function() {
console.log("c");
}
</script>
可以在firebug或者google的web develop tools里面看到输出的是c，
而通过$(document).ready();
$(document).ready(function() {
console.log("a");
});
$(document).ready(function () {
console.log("b");
});
$(document).ready(function() {
console.log("c");
});
输出的是a b c
jQuery的选择器小试牛刀-- 选择测试页面中的超链接，当点击时，给出一个alert
$(document).ready(function() {
$("a").click(function() {
alert("I am learning jQuery!");
});
});
我们看到页面弹出alert，且发生跳转。
如果想阻止事件的默认行为可以：
$(document).ready(function() {
$("a").click(function(event) {
alert("I am learning jQuery!");
event.preventDefault();
});
});
亲，还跳转吗？
通过js给dom添加css
我们把超链接的字体改一改
<style type="text/css">
.test {
font-weight: bold;
font-size: 24px;
}
</style>
$(document).ready(function() {
// $("a").click(function(event) {
// alert("I am learning jQuery!");
// event.preventDefault();
// });
$("a").addClass("test");
setTimeout(function() {
$("a").removeClass("test")
}, 2000);
});
为了看到效果，两秒后去除css的效果。
jQuery简单特效--点解连接慢慢的消失
$(document).ready(function() {
$("a").addClass("test");
$("a").click(function(event) {
event.preventDefault();
$("a").hide("slow");
});
});
回调函数和函数
回调函数是作为另一个函数的参数，在父函数执行完毕的时候开始执行。
如：$.get("home.html", myCallBack);
这里的第二个参数就是一个简单的回调函数，在js中函数可是一等公民啊。
如果回调函数带参数怎么办呢？
$.get("home.html", myCallBack(param1, param2));
这样是不对的，因为不是回调函数，而是第二个参数是函数的返回值。
可以这样：
$.get('home.html', function(){
myCallBack(param1, param2);
})
分享到：
相关推荐
jquery学习1正文模板,AJAX学习用的
Jquery学习笔记 Jquery学习笔记是指使用Jquery框架来实现javascript编程的笔记记录，本笔记记录了Jquery-1.2的基本用法、Ajax异步交互、XMLHttpRequest对象的基本应用等知识点。 一、Jquery基本用法 Jquery是一个...
**jQuery学习资料详解** jQuery，一个轻量级、高性能的JavaScript库，自2006年发布以来，因其简洁易用的API接口和强大的功能，迅速成为开发者们首选的前端工具之一。本资料旨在深入浅出地介绍jQuery的核心概念、...
**jQuery学习资料大全** 在IT领域，jQuery是一个广泛使用的JavaScript库，它极大地简化了JavaScript代码，使得网页交互和DOM操作变得更加便捷。这份“jQuery学习资料大全”提供了丰富的资源，无论你是初学者还是有...
本压缩包包含的“精选jQuery学习资料”是针对这一强大的库进行深入学习的重要资源。 首先，我们来看看`jquery-1.2.6.js`，这是jQuery库的1.2.6版本的源代码文件。这个版本的历史悠久，但依然具有学习价值，因为它...
**jQuery学习网站** jQuery是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互。由于其简洁的语法和强大的功能，jQuery成为了前端开发中的首选工具之一。 这篇博文链接...
jquery学习资料+教程 包括五个文档:jQuery的起点教程,jQuery经典入门教程,jquery的基本用法.pdf,2010最新jQuery学习资料.pdf,精通JavaScript+jQuery.pdf
《JQuery学习手册》是一份全面且深入的资源，旨在帮助开发者掌握JavaScript库JQuery的核心概念和实用技巧。这份手册不仅包含理论知识，还有实践应用的案例，是初学者和经验丰富的开发者提升JQuery技能的理想参考资料...
Jquery学习 Jquery源代码 Jquery数据库操作 Jquery学习 Jquery源代码 Jquery数据库操作 绝对有用，技术含量
1. **引入jQuery库**：通常，我们会通过在HTML文档的`<head>`标签内引入jQuery库的CDN链接或本地文件。 ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` 2. **选择器**：jQuery...
这个“JQuery学习资料”压缩包包含了一系列与JQuery相关的学习资源，旨在帮助开发者深入理解和掌握JQuery的核心概念和实用技巧。 首先，`jquery1.4 API`是JQuery 1.4版本的官方API文档，它详细列出了该版本的所有...
Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与...
**jQuery学习资料与源代码详解** jQuery是一款广泛应用于Web开发的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。这个压缩包中的"JQuery学习资料与源代码"包含了从基础到进阶...
**jQuery学习笔记（一）** 在深入探讨jQuery之前，我们首先要理解什么是jQuery。jQuery是一个高效、易用且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。由John Resig在2006...
**jQuery学习示例大全** jQuery是一款广泛应用于网页开发的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。这个"jQuery学习示例大全"涵盖了从基础到进阶的各种示例，帮助开发者快速掌握...
1. 插入元素：jQuery提供了`append()`、`prepend()`、`after()`和`before()`方法来在DOM中添加新元素。 2. 删除元素：`remove()`方法可以移除指定的元素，而`empty()`则清空元素内的内容。 3. 选择与遍历：`children...
1. **jQuery的特点** - **简洁性**：jQuery的语法设计易于理解和使用，使得开发者可以快速上手。 - **轻量级**：尽管功能强大，但jQuery的核心库体积小，加载速度快。 - **跨浏览器兼容**：jQuery兼容多种主流...
**jQuery学习配套资料详解** jQuery是一款广泛应用于前端开发的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。本压缩包提供了全面的jQuery学习资源，包括全版本的jQuery库、...
《jQuery学习文档中文版》是面向初学者和进阶开发者的一份宝贵资源，它详尽地介绍了jQuery库的各种功能和用法。jQuery是一款强大的JavaScript库，简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务，使得前端...