首页 > 代码库 > jQuery简介
jQuery简介
1、什么是jQuery
jQuery就是一个Javascript函数库,没什么特别的
2、常见的Javascript框架库
2.1、什么是Javascript框架库
普通Javascript的缺点:每种控件的操作方式不统一,不同浏览器下有区别,要编写跨浏览器的程序非常麻烦。因此,出现了很多对Javascript的封装库。
2.2、常见的Javascript框架库
Prototype、YUI、Dojo、ExtJS、jQuery等,这些库对Javascript进行了封装,简化了开发。这些库是对Javascript的封装,内部都是用Javascript实现的。
2.3、jQuery与Javascript的关系
jQuery就是Javascript语法写的一些函数类,内部仍然是调用Javascript实现的,所以并不是代替Javascript。使用jQuery的代码、编写jQuery的扩展插件等仍然需要Javascript的技术,jQuery本身就是一堆Javascript函数。jQuery是最火的Javascript库,jQuery的扩展插件也是非常多。
3、jQuery的特点
(1)很好的解决了不同浏览器的兼容问题
(2)对于不同控件具有统一的操作方式
(3)体积小(几十KB)、使用方便(Write Less, Do More)
(4)链式编程$(‘#div1‘).draggble().show().hide().fly();
(5)隐式迭代
(6)插件丰富、开源、免费
4、jQuery中的顶级对象$
jQuery中最常用的对象即$对象,要想使用jQuery的方法必须通过$对象。只有将普通DOM对象封装成jQuery对象,然后才能调用jQuery中的各种方法。
$是jQuery的简写,在代码中可以使用jQuery代替$,但一般为了方便,大家都直接使用$。
4.1、$(fn) or $(document).ready(fn)
$();相当于js的window,简单(由于字符少)省流量,快
jQuery();写法不同,但是意义一样
document,直接写表示的是document对象,只能点出doc的属性和方法
$(document)表示的是jQuery对象,只能点出jQuery的属性和方法
通过Javascript的window.onload实现弹框alert,也可以通过jQuery的方式实现
$(document).ready(fn);
另外,$(fn); 等价于$(document).ready(fn);
4.2、window.onload与$(document).read(fn);的区别
(1)触发时机
window.onload需要等待页面完全加载完毕才会触发,即所有DOM元素创建完毕、图片、CSS等都加载完毕后被触发。
$(document).ready()只要DOM元素加载完毕即触发,这样可以提高响应速度。
(2)多次注册事件
$(document).ready();可以多次注册事件处理程序,并且最终都会执行。
window.onload每次注册新的事件处理程序时都会将前面的覆盖掉。
(3)对应关系
Javascript中的window.onload等价于jQuery中的$(window).load(fn);
jQuery中注册事件是load(fn),而不是onload(fn),与DOM不一样
4.3、页面加载完成示例
(1)通过js的onload
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>jQuery测试</title> <script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.12.3.js"></script> <script type="text/javascript"> onload=function(){ alert("页面加载完成了"); }; </script> </head> <body> </body> </html>
(2)通过jQuery的$(document).reay()
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>jQuery测试</title> <script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.12.3.js"></script> <script type="text/javascript"> $(document).ready(function () { alert("页面加载完成了"); }); </script> </head> <body> </body> </html>
(3)通过jQuery的$(window).load()
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>jQuery测试</title> <script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.12.3.js"></script> <script type="text/javascript"> $(window).load(function () { alert("页面加载完成了"); }); </script> </head> <body> </body> </html>
(4)通过jQuery的$(function(){});
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>jQuery测试</title> <script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.12.3.js"></script> <script type="text/javascript"> $(function () { alert("页面加载完成了"); }); </script> </head> <body> </body> </html>
参考 书籍 锋利的jQuery 网址 jQuery官网 http://jquery.com jQuery在线API http://api.jquery.com jQuery UI http://jqueryui.com |
jQuery简介