一、jQuery的发展 随着javascript的不断发展,延伸出了多种JS程序库,当前比较流行的js库有:1)Prototype 成型较早,从整体上对面向对象的编程思想把握的不是很到位。 2)Dojo 学习曲线陡,文档不齐全,最严重的的是APE不稳定,每次升级都可能导致已有程序失效。 3)YUI Yahoo公司出品,比较完善,编写规范。 4)Ext JS 原本是对YUI的扩展,主要用于构建前端用户界面,后期发展可以用来开发富有华丽外观的富客户端应用,商业用途并不免费。 5) MooTools 轻量,简洁,模块化和面向对象的JS库,非常不错。6)jQuery 同样是轻量级的库,拥有强大的选择器,出色的DOM操作,可靠的事件处理,完善的兼容性及链式操作等功能,也是我们即将学习的重点。
二、jQuery 的优势:写的少,做的多。jQuery独特的选择器,链式操作,事件处理机制和封装完善的Ajax都是其他JS库望尘莫及的。
1)轻量级 目前使用UglifyJS进行压缩后只有30KB左右。2)强大的选择器 允许使用CSS1-3几乎所有的选择器,以及jQuery独创的高级而复杂的选择器。 3)出色的DOM操作的封装。 4)可靠的事件处理机制 5)完善的Ajax jQuery将所有的Ajax操作封装到一个函数$.ajax()里面,无需关心复杂的浏览器兼容性和对象的创建与使用。 6)不污染顶级变量 7) 出色的浏览器兼容性。 8)链式操作方式 9)隐式迭代 10)行为层和结构层的分离 11)丰富的插件支持。12)完善的文档 13)开源
三、jQuery代码的编写。
1)进入官方网站获取最新的jQuery版本。 http://jquery.com ,右键保存链接得到jquery库。 jquery 库分为两种:生产版 jquery.min.js和开发版jquery.js.
2)环境配置 jQuery不需要安装,使用的时候直接在html文档中引入该库文件的位置即可。eg:
3)编写第一个jquery 代码 $ 就是jQuery 的简写 。 $(document).ready(functiong(){ }) 这段代码类似于传统的JS的 window.onload=function(){ }, 区别:1》window必须在全部加载之后才可以执行, $(document) 则是网页中所有的DOM结构绘制完成后就可以执行。2》window.onload=funciton(){} 不能同时编写多个,只能输出最后一个,$(function).ready(funcitong(){ })能够同时编写多个。输出结果是多次输出。3》 window.onload=funciton(){}没有简写的形式,$(document).ready(function(){ })则可以简写成 $(funciton(){ })
4)链式操作风格
eg $(" .level1>a").click(function(){
$(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide();
return false;
})
翻译: 当鼠标单击到level下面的a元素时,给其添加current的class,然后将其紧邻后面的元素显示出来,同时将他的父辈的同辈元素内部的子元素a都去掉一个current的class,然后将紧邻它们后面的元素都隐藏。 即一键完成了导航栏的功能。
代码风格推荐 :
$(".level1>a").click(function(){
$(this).addClass("current") //给当前元素增加current样式
.next().show() //下一个元素显示
.parent().siblings().children("a").removeClass("current") //父元素的同辈元素的子元素a移除 current样式
.next().hide(); //它们的下一个元素隐藏
return false;
})
四、jQurey对象和DOM对象
1)DOM对象即文本对象模型 document object model 构建网页的DOM树,子节点都DOM元素节点。可以通过js中的getElementsByTagName 和getElementById 来获取元素节点,这样得到的DOM元素就是DOM对象。
2)jQuery 对象 就是通过jQuery包装DOM对象后产生的对象。是独有的,一个对象如果是jQuery对象,那么就可以使用jQuery的方法。
eg: $("#fool").html() 等同于 document.getElementById("fool").innerHTML . 在jQuery对象里面无法使用DOM对象的任何方法。同样DOM对象也不可以使用jQuery的方法。
3)DOM对象和jQuery对象的相互转换。
在相互转化之前需要预定好定义变量的风格,如果获取的对象是jquery对象,则在变量前面加$ var $varible=jQuery 对象 var varible=DOM对象。
1》jQuery对象转换成DOM对象。 利用 [index] 或者 get(index) eg:var $cr= $("#cr") var cr=$cr[0] 或者 var cr=$cr.get(0)
2》DOM对象转化成jQuery 对象,先将DOM对象进行包装,然后获取jQuery对象 eg: var cr=document.getElementById(“cr”) var $cr= $(cr) 即 $(DOM对象)
五、 解决jQuery和其他库的冲突的办法
1)jQuery的库在其他库后面进行导入,且可以在任何时候使用 jQuery.noConflict() 函数来将变量$ 的控制权移交给其他的js库。
2)在其他库之后进行导入,可以直接使用 “jQuery” 做jQuery的工作,其他库的快捷方式则为$() ,无需调用jQuery.noConflict()函数。