锋利的JS解读——认识JQuery

Posted 2022-12-08 hanggedege

一、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：  <script src="../scripts/jquery.js"  type="text/javascript"></script>

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