jquery学习(1)
学习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);
})