锋利的JS解读——认识JQuery(一)

一、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()函数。

 

你可能感兴趣的:(锋利的JS解读——认识JQuery(一))