1.1认识JQuery
1,AJAX:异步的JavaScript和XML。
2,Prototype:是最早成型的JavaScript库之一。对JavaScript的内置对象做了大量的扩展。
3,Dojo:Dojo的强大之处在于提供了许多JavaScript库所没有的功能,例如:离线存储的API,生成图标的组件,基于SVG/VML的矢量图形库和Comet支持等。
4,YUI(Yahoo! UI)是由雅虎公司开发的一套完整的扩展性良好的网页程序工具集。
5,Ext JS:简称Ext,原本是对YUI的一个扩展,主要用于创建前端用户界面。
6,Moo Tools:是一套简介的轻量级的,模块化的和面向对象的JavaScript框架。Moo Tools完全实现了面向对象的思想,语法简介,文档完善。
7,JQuery:是一个轻量级的JavaScript库,拥有强大的选择器,出色的DOM操作,可靠的事件处理,完善的兼容性和链式操作等功能。
1.2加入JQuery
1.2.1JQuery简介
JQuery是一个优秀的轻量级的JavaScript库,是一个由Jhon Resig在2006年1月创建的一个开源项目。现在的JQuery主要包括核心库、UI、插件、JQuery Mobile。
1.2.2JQuery的优势
JQuery的理念:写的少,做的多。
1、轻量级。JQuery压缩以后只有30KB左右,非常轻巧。
2、强大的选择器。JQuery允许使用CSS1到CSS3的所有的选择器,以及JQuery独创的选择器也可以加入一些插件来支持XPath选择器。
3、出色的DOM操作的封装。
4、可靠的事件处理机制。
5、完善的AJAX。JQuery将所有的AJAX操作封装到一个函数里面$.ajax()里面,使开发者处理Ajax的时候不需要太多的考虑浏览器的兼容性问题和XMLHttpRequest对象的创建和使用的问题。
6、不污染顶级的变量。JQuery只建立一个名称为JQuery的对象,其所有的函数的方法都在这个对象之下。不会污染其他的对象,使JQuery对象可以和其他的JavaScript的对象共存。不用担心冲突的问题。
7、出色的浏览器的兼容性。JQuery能够在IE6.0+,Fire Fox3.6+,Safari 5.0+,Opera和Chrome浏览器上正常运行。JQuery同时也修复了一些浏览器之间的差异。具有出色的兼容性。
8、链式操作方式。可以在同一个浏览器对象上定义一组动作,可以直接连写不用重复获取对象。
9、隐式迭代。当用JQuery找到带有".myClass"类的全部元素,在隐藏他们的时候,无需循环遍历每一个返回的元素。因为JQuery里面的方法都被设计成自动操作对象的集合,而不是单独的对象,从而简化了代码量。
10、行为层和结构层的分离。开发者可以使用JQuery选择器选择对象直接添加事件。
11、丰富的插件支持。JQuery的易扩展性。
12、完善的文档。
13、JQUery开源。
1.3JQuery代码的编写
1.3.1JQuery代码的编写
1,获取JQuery的最新版本
进入http://jquery.com官网下载最新版的JQuery。
2、JQuery库类型说明。
JQuery库的类型分为两种:分别是生产版(最小化和压缩版)和开发版(未压缩版),区别如下表所示:
名称 |
大小 |
说明 |
jquery.js(开发版) |
大约229KB |
完整无压缩版本,主要用于测试、学习和开发 |
jquery.min.js(生产版) |
大约31KB |
经过工具压缩或者经过服务器开启Gzip压缩,主要应用于产品和项目 |
3、JQuery的环境配置
JQuery不需要安装,只需要在需要引用的页面引用就可以了。
4、JQuery的引入
在HTML页面中使用<script></script>中引入JQuery的核心问价就可以使用JQuery库了。
程序实例
<scriptsrc="js/jquery.min.js"type="text/javascript"></script>
1.3.2编写简单的JQuery代码
在JQuery中"$"是JQuery的简写形式。例如:$("#first_button")和jQuery("#first_button")是等价的。$.ajax和jQuery.ajax是等价的。程序的"$"符号都是jQuery的一个简写形式。
程序实例:
$(document).ready(function(){
alert("Hello World");
});
$(document).ready();这个方法类似于JavaScript中的window.load()方法,事实上还是与window.load()方法有区别。
对比如下:
window.load()方法 |
$(document).ready()方法 |
|
执行时机 |
必须等待网页中所有的内容加载完成之后(包括图片)才能执行window.load()方法 |
网页中所有的DOM结构绘制完毕之后就开始执行,即便是DOM关联的元素都还没有加载完成。 |
编写个数 |
在一个js文件中不可以同时编写多个window.load()方法: 一下的代码不能正常运行: window.onload= function () { alert("Hello World"); }; window.onload= function () { alert("Hello China"); }; 结果只会显示:Hello China |
在同一个js文件中可以同时编写多个$(document).ready()方法。以下的代码可以正常运行: $(document).ready(function () { alert("Hello World"); }); $(document).ready(function () { alert("Hello China"); }); 结果两次都会显示。 |
简化写法 |
无 |
$(document).ready(function(){ |
2、为代码添加注释
1.4JQuery对象和DOM对象
1.4.1DOM对象和JQuery对象的简介
1、DOM对象
DOM(Document Object Model,文档对象模型)。
在DOM树中可以通过JavaScript中的getElementByTagName()和getElementById()来获取元素的节点。
2、 JQuery对象
JQuery对象是通过JQuery包装DOM对象之后的对象。
程序实例:
$("foo").html();就相当于document.getElementById("foo").innerHTML;//都是获取id为foo元素之内的HTML代码。
同时在JQuery对象中无法使用DOM对象的任何方法。例如:$("#foo").innerHTML之类的写法都是错的。同样在DOM对象中也不可以使用JQuery里面的方法。
1.4.2JQuery对象与DOM对象的相互转换
在实现JQuery对象与DOM对象转换之前需要先确定定义变量的风格。
如果是JQuery对象,可以在变量名称之前加上$,例如:
var $variable=JQuery对象;
如果是DOM对象:
var variable=DOM对象
1、JQuery对象转换成DOM对象
将JQuery对象转换成DOM对象有两种方法,也就是[index]和get(index):
(1)JQuery对象是一个类似于数组的对象,可以通过[index]的方法得到对应的DOM对象。
JQuery代码如下:
var $cr=$("#cr");//JQuery对象
var cr=$cr[0];//DOM对象
alert(cr.checked);
(2)另一种方法是JQuery本身提供的,通过get(index)方法获得DOM对象
JQuery代码如下:
var $cr=$(#cr);//JQuery对象
var cr=$cr.get(0);//DOM对象
alert(cr.checked);//检测这个checkbox是否被选中
2、DOM对象转换成JQuery对象
只需要用$()把DOM对象包装起来,就可以获得一个JQuery对象了。
JQuery代码如下:
var cr=document.getElementById("cr");//DOM对象
var $cr=$(cr);//JQuery对象
1.5解决JQuery和其他库的冲突。
1、JQuery库在其他库之后引入。
在其他库和JQuery库被加载完成之后在任何时候都可以调用jQuery.noConflict()函数来将变量的控制权交给其他JavaScript库。
程序实例:
<script type="text/javascript"
src="js/prototype.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();//将变量$的控制权转交给prototype.js
</script>
2、JQuery库在其他JavaScript库之前导入
如果在其他js库之前导入JQuery库,则不需要使用jQuery.noConflict()。