JQuey的优势
1、轻量级
JQuery非常轻巧,采用Dean Edwards编写的Packer压缩后,大小不到30KB,如果使用Min版并且在服务器端启用Gzip压缩后,大小只有18KB。
2、强大的选择器
JQuery允许开发者使用从CSS1到CSS3几乎所有的选择器,以及JQuery独创的高级而且复杂的选择器,另外还可以加入插件使其支持XPath选择器,甚至开发者可以编写属于自己的选择器。由于JQuery支持选择器这一特性,因此有一定CSS经验的开发人员可以很容易的切入到JQuery的学习中来。
3、出色的DOM操作的封装
JQuery封装了大量常用的DOM操作,使开发者在编写DOM操作相关程序的时候能够得心应手。JQuery轻松地完成各种原本非常复杂的操作,让JavaScript新手也能写出出色的程序。
4、可靠的事件处理机制
JQuery的事件处理机制吸收了JavaScript专家Dean Edwards编写的事件处理函数的精华,是的JQuery在处理事件绑定的时候相当可靠。在预留退路、循序渐进以及非入侵式编程思想方面,JQuery也做得非常不错。
5、完善的Ajax
JQuery将所有的Ajax操作封装到一个函数$.ajax()里,使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。
6、不污染顶级变量
JQuery只建立一个名为JQuery的对象,其所有的函数方法都在这个对象之下。其别名$也可以随时交流控制权,绝对不会污染其他的对象。该特性是JQuery可以与其他JavaScript库共存,在项目中放心地引用而不需要考虑到后期的冲突。
7、出色的浏览器兼容性
作为一个流行的JavaScript库,浏览器的兼容性是必须具备的条件之一。JQuery能够在IE6.0+,FF 2+,Safari2.+和Opera9.0+下正常运行。JQuery同时修复了一些浏览器之间的的差异,使开发者不必在开展项目前建立浏览器兼容库。
8、链式操作方式
JQuery中最有特色的莫过于它的链式操作方式——即对发生在同一个JQuery对象上的一组动作,可以直接接连写无需要重复获取对象。这一特点使得JQuery的代码无比优雅。
9.隐式迭代
当用JQuery找到带有“.myClass”类的全部元素,然后隐藏他们时。无需循环遍历每一个返回的元素。相反,JQuery里的方法都被设计成自动操作的对象集合,而不是单独的对象,这使得大量的循环结构变得不再必要,从而大幅度地减少代码量。
10、行为层与结构层的分离
开发者可以使用选择器选中元素,然后直接给元素添加事件。这种将行为层与结构层完全分离的思想,可以使JQuery开发人员和HTML或其他页面开发人员各司其职,摆脱过去开发冲突或个人单干的开发模式。同时,后期维护也非常方便,不需要在HTML代码中寻找某些函数和重复修改HTML代码。
11、丰富的插件支持
JQuery的易扩展性,吸引了来自全球开发者来编写JQuery的扩展插件。目前已经有超过几百种官方插件支持,而且还不断有新插件面试。
12、完善的文档
JQuery的文档非常丰富,现阶段多位英文文档,中文文档相对较少。很多热爱JQuery的团队都在努力完善JQuery中文文档,例如JQuery的中文API。
13、开源
JQuery是一个开源的产品,任何人都可以自由地使用并提出修改意见。
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
JQuery基础结构如下:
$(document).ready(function(){
alert("Hello world");
}
);
$就是Jquery的一个简写形式。$("#foo")和jquery.("#foo")是等价的。
window.onload和$(document).ready()对比
window.onload
1.等待网页中的所有内容加载完毕后才能执行(包括图片)
2.不能同时编写多个
$(document).ready()
1.网页中所有DOM结构绘制完毕后即可执行,可能DOM元素关联的东西并没有加载完
2.可同时编写多个
JQuery代码编写风格
1.对于一个对象不超过3个操作的,可以直接写成一行
2.对于一个对象的较多操作,建议每行写一个操作
3.对于多个对象的少量操作,可以每个对象写一行,如果涉及子元素可以考虑适当本地缩进
4.对于多个对象的较多操作,建议结合2,3来做
JQuery对象和DOM对象
DOM:Document Object Model (文档对象模型)
例如 通过javascript中的getElementsByTagName()或者getElementById()来获取元素节点,这样得到的DOM元素就是DOM对象
var domObj=document.getElementById("id") //获取DOM对象
var ObjHTML=domObj.innerHTML; //使用javascript的属性--innerHTML
JQuery对象:JQuery对象是通过Jquery包装DOM对象后产生的对象
$("#foo").html(); //获取id为foo的元素内的html代码 .html是jquery里的方法
等同于:
document.getElementById("foo").innerHTML;
注意:用#id取到的jquery对象并非document.getElementById("id") 所得到的DOM对象 ,两者并不等价
JQuery对象和DOM对象的互相转换
var $variable=JQuery对象;
var variable=DOM对象;
JQuery对象转化为DOM对象有两种方法 即[index]和get(index);
var $cr=$("#cr"); //JQuery对象
var cr=$cr[0] ; //DOM对象
或者:var cr=$cr.get(0);
alert(cr.checked) //检测这个checkbox是否被选中了
DOM对象转换为JQuery对象
var cr=$("#cr"); //DOM对象
var $cr=$(cr); //JQuery对象
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
解决JQuery和其他库的冲突
待续~~~~