【Jquery系列】详解Jquery对象和Dom对象

问题描述

本篇文章主要讲解Jquery对象和DOM对象，主要围绕如下五个方面来介绍：

• Jquery对象和dom对象定义
• Jquery对象与dom对象区别
• Jquery对象及运用举例
• dom对象及运用举例
• Jquery对象与dom对象相互转换

1   内容区

 1.1    Jquery对象和dom对象定义

jQuery对象：Jquery对象，通过jq选择器获取的对象;

dom对象：javascript对象，即通过js获取的对象；

 1.2    Jquery对象与dom对象区别

jquery对象指通过jquery选择器获取的对象，格式：$(selector)；

dom对象指通过原声js获取对象，如document.getElementById()；

1.3     Jquery对象及运用举例

?

1	var $obj = $("#id"); //jQuery对象

1.4     dom对象及运用举例

?

1	var DomObj = document.getElementById("id"); //dom对象

1.5    Jquery对象与dom对象相互转换

由于jq对象只能调用jq封装的方法，dom对象只能调用dom封装的方法，若想要jq对象和dom对象相互调用彼此封装的方法，首先必须将对象转化为要调用方法的对象，再调用，如dom对象想要调用jq方法.html()，则dom对象必须先转化为jq对象，再调用，否则出错（jq调用dom也是一样原理）；

1.5.1  jquery对象转化为dom对象

jquery提供了两种方法将一个jquery对象转换成一个dom对象，即[index]和get(index)。

?

1 2 3 4 5 6

var JqObj=$("#id"); //jquery对象 var DomObj = JqObj[0]; //dom对象   //也可写成如下 var DomObj=JqObj.get(0); alert(DomObj.checked); //是否选中checkbox

 

 1.5.2  dom对象转换成jquery对象
对于dom对象，用$()把dom对象包裹起来即可，格式为：$(dom对象);

?

1	var DomObj=document.getElementById("ElementID"); //dom对象 <br>var JqObj = $(DomObj); //转换成jquery对象

　　

2  版权区

 

 

• 感谢您的阅读，若有不足之处，欢迎指教，共同学习、共同进步。
• 博主网址：http://www.cnblogs.com/wangjiming/。
• 极少部分文章利用读书、参考、引用、抄袭、复制和粘贴等多种方式整合而成的，大部分为原创。
• 如您喜欢，麻烦推荐一下；如您有新想法，欢迎提出，邮箱：2016177728@qq.com。
• 可以转载该博客，但必须著名博客来源。

   

1.5.2  dom对象转换成jquery对象

对于dom对象，用$()把dom对象包裹起来即可，格式为：$(dom对象);