首页手记 jQuery简介

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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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

点击查看更多内容