学习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学习笔记
jquery学习资料--jquery代码和学习教程
JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习
jquery的学习jquery的学习jquery的学习jquery的学习jquery的学习jquery的学习jquery的学习
jquery学习资料+教程 包括五个文档:jQuery的起点教程,jQuery经典入门教程,jquery的基本用法.pdf,2010最新jQuery学习资料.pdf,精通JavaScript+jQuery.pdf
jquery 教程 jQuery学习资料 jQuery学习
该 JQuery学习手册.rar 里面包含了JQuery学习的详细信息!非常棒的学习资料!
jquery总结学习资料JQuery总结,jquery总结学习资料JQuery总结,jquery总结学习资料JQuery总结
Jquery学习 Jquery源代码 Jquery数据库操作 Jquery学习 Jquery源代码 Jquery数据库操作 绝对有用,技术含量
精选 jquery 学习资料,这里面的notes.txt 是对文件夹里面文件的的介绍
Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与...
jquery学习进阶使用
jquery的详细学习列子,由浅入深非常详细的指导jquery的学习
压缩文件中,包含jquery使用的js脚本文件,jquery介绍文档(包括pdf和教程),对应出学者是一个很好的学习资料
jQuery学习示例 大全 最新
对学习jQuery的初学着来说具有很高借鉴意义的一套实例代码,可以一边学习jQuery,一边看看实例代码,对学习提高很快。
这个资源 可以使你全面的掌握 JQuery,里面有我告诉你如何学习Jquery如何使用Jquery,里面还有Jquery的例子,还有Jquery的拓展UI,很好很强大的!!!这绝对是我精心压缩的一个资源,如果没学会,可以给我留言,然后...
learn.jquery.com, jQuery学习中心网站内容 jQuery学习站点这里站点的目标是双重的:如何使用jQuery和JavaScript信息的中心。可以信。详细的详细信息。为了保持及时。活动和社区驱动的参考,具有相对较低的贡献。...
jQuery学习指南 和手册一起用,多看看没坏处