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);
})
?