DOM对象和jQuery对象
DOM对象是指页面上的标签节点等,必须是页面文档树中的节点。DOM对象可以通过传统的js方法获得,代码如下:
var domObj=document.getElementById("id");
jQuery对象是指通过jQuery包装DOM对象后产生的对象,是jQuery独有的。代码如下:
var $obj=$("#id");
两者的区别:
虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法,乱使用会报错。比如,下面的这些写法就是错误的。
$("#id").innerHTML;
document.getElementById("id").html();//html()方法是jQuery中的方法,意为获取对应id元素内的html代码
用#id作为选择符取得的是jQuery对象与document.getElementById(“id”)得到的DOM对象,这两者并不等价。
两者之间的转换
jQuery对象转换成DOM对象
jQuery提供了两种方式将jq对象转换为DOM对象:
1.[index]方法.因为jQuery对象是一个数据集。
var $obj =$("#lt") ; //jQuery对象
var domObj=$obj[0]; //DOM对象
alert(domObj.innerHTML) //获得dom对象的html代码
2.通过 .get(index)方法
var $obj=$("#lt"); //jQuery对象
var domObj=$obj.get(0); //DOM对象
alert(domObj.innerHTML) //获得dom对象的html代码
DOM对象转换为jQuery对象
用$()把dom对象包装起来,就可以获得一个jquery对象。
var domObj=document.getElementById("lt"); //DOM对象
var $obj=$(domObj); //jQuery对象
最后,附上一个通过jQuery对dom元素添加和移除样式的例子。
<script src="jquery-1.7.1.js"></script>
<script>
$(function(){
$("#btn").click(function(){
var className=$("#txtClass").val();
$("#p").addClass(className);
});
$("#btn2").click(function(){
var className=$("#txtClass").val();
$("#p").removeClass(className);
});
});
</script>