JQuery对象和DOM对象

  Javascript和JQuery的特点

     Javascript是Netscape公司开发的一种脚本语言,使得网页和用户之间实现一种实时的,动态的和交互的关系,使网页可以包含更多活跃的元素和更加精彩的内容,JS自身存在3个弊端:①复杂的文档对象模型(DOM),②不一致的浏览器实现和③便捷的开发,调试工具的缺乏。Google公司的一系列Web运用,AJAX(Asynchronous JavaScript And XML,异步的JavaScript和XML)进入人们的视野。

     JQuery强调的理念是写得少,做得多。JQuery独特的选择器,链式操作,事件处理机制和封装完善的Ajax都是其他JS库望尘莫及的。概括起来,JQuery有以下几大优势:(1)轻量级。(2)强大的选择器。(3)出色的DOM操作封装。(4)可靠的事件处理机制。(5)完善的Ajax。(6)不污染顶级变量。(7)出色的浏览器兼容性。(8)链式操作方式。(9)隐私迭代。(10)行为层与结构层的分离。(11)丰富的插件支持。(12)完善的文档。(13)开源。(注意一点:在JQ库中,若没有特别说明,$就是jQuery的一个简写形式,例如:$("#foo")和jQuery("#foo")是等价的,$.ajax和jQuery.ajax是等价的)

  JQuery对象和DOM对象

     1.  DOM对象

       DOM(Document Object Model,文档对象模型),每一份DOM都可以表示成一棵树。先看一个简单例子:代码如下

1 // ...省略其他代码
2 <h3>例子</h3>
3 <p title="选择你最喜欢的水果">你最喜欢的水果是?</p>
4 <ul>
5     <li>苹果</li>
6     <li>橘子</li>
7     <li>菠萝</li>
8 </ul>
9 // ...省略其他代码

        将上面HTML结构描述为一棵DOM树:

            

    

      在这棵DOM树中的节点都是DOM元素节点。可以通过JS中的getElementByTagName或者getElementById来获取元素节点。像这样得到的DOM元素就是DOM对象。

    2.   jQuery对象

      jQuery对象就是通过jQuery包装DOM对象后产生的对象。

      jQuery对象是jQuery独有的。如果一个对象是jQuery对象,那么就可以使用jQuery里的方法。在jQuery对象中无法使用DOM对象的任何方法,同样的DOM对象也不能使用jQuery里的方法。

  jQuery对象和DOM对象的相互转换

    1.  jQuery对象转成DOM对象

      jQuery对象不能使用DOM中的方法,但如果对jQuery对象提供的方法不熟悉,或者jQuery没有封装想要的方法,不得不使用DOM对象的时候,有两种处理方法。

      (1)jQuery对象是一个类似数组的对象,可以通过[index]的方法得到相应的DOM对象。例如只有一个类名为“bind”的DIV,在控制台输出console.log($(".bind"))

                    

      如图,通过调试工具,我们可以清除的看到,jQuery对象是一个类数组对象,我们可以通过$(".bind")[0]获得DOM对象。

      (2)另一种方法是jQuery本身提供的,通过get(index)方法得到相应的DOM对象。还是上面的.bind对象 ,我们可以通过  $(".bind").get(0)获得DOM对象。如图:

                    

    2.  DOM对象转成jQuery对象

      对于一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。方式为$(DOM对象), 转换后,就可以任意使用jQuery中的方法了。

      注意: 平时用的jQuery对象都是通过$()函数制造出来的,$()函数就是一个jQuery对象的制造工厂。

 

posted on 2017-02-08 13:32  cleaverlove  阅读(3089)  评论(2编辑  收藏  举报