本文将为关注织梦者的朋友提供的是的jQuery DOM对象区别与联系相关教程,具体实例代码请看下文:
对两种对象类型的定义,只要能理解并转换成自己的说法就可以,不用死板按照资料所写
jQuery对象(jq对象)其实就是通过jquery类库选择器获得的对象(或者说是通过$获取的对象或者说是通过jquery包装dom对象后产生的对象(可参照下面的对象转换理解));
jquery对象是jquery独有,可以使用jquery里面的方法,但不能使用dom的方法;
示例:
$("#img").attr("src", "test.jpg");其中$("#img")就是jquery对象;
DOM对象(js对象)就是通过传统方法(javascript)获得的对象或者说是javascript固有的一些对象操作或者说是通过document获得的对象;
DOM对象能使用javascript固有的方法,但不能使用jquery里面的方法;
示例:
document.getElementById("img").src = “test.jpg";其中document.getElementById("img")就是DOM对象;
需要注意的是:$("#img").attr("src", "test.jpg")和document.getElementById("img").src = “test.jpg"效果是一样的,
但是document.getElementById("img").attr("src", "test.jpg")或者$("#img").src = “test.jpg"是错误的;不要混淆一点是,同一个javascript脚本里面可以同时出现jq对象或者js对象,只是没有转换对象是不能互相调用不是自己对象的方法;
还有一种情况,就是this的使用,很多人在写jquery时经常这样写:this.attr("src","test.jpg");可是就是出错,那是因为this是dom对象,而.attr("src","test.jpg")是jquery方法,当然出错;
如果要解决这个问题,只需将dom对象转成jquery对象,如:$(this).attr("src","test.jpg");
下面就谈谈jq对象、js对象的转换及使用
以前我一直认为jquery的$("#id")和document.getElementById("id")得到的结果是一样的,其实不然,可以做如下测试:
1、alert($("#div"))弹出[object Object]
2、alert(document.getElementById("div"))弹出[object HTMLDivElement]
3、alert($("#div")[0])或者alert($("#div").get(0))弹出[object HTMLDivElement]
1、DOM对象转jquery对象
对于已经是一个dom对象,只需要用$()把dom对象包装起来即可,如:$(dom对象)
示例:
varobj=document.getElementById("id"); //dom对象 var$obj = $(obj); //转换成jquery对象
2、jquery对象转dom对象
有两种方式(通过索引):[index] 和 .get(index);
1)jquery对象是一个数组对象,可以通过[index]方法得到相应dom对象
示例:
var $obj=$("#id"); //jquery对象 varobj = $obj[0]; //dom对象 也可写成 var obj=$obj.get(0);
2)jquery本身提供,通过.get(index)方法得到相应的dom对象
示例:
var$obj=$("#id"); //jquery对象
varobj = $obj.get(0); //dom对象 也可写成 var obj=$obj[0];
再次强调一下:DOM对象只能能使用javascript固有的方法,但不能使用jquery里面的方法;同时,jquery对象智能使用jquery的方法,不能使用dom对象方法;
另外以下几种写法都是正确的:
$("#id").html();
$("#id").get(0).innerHTML;
$("#id")[0].innerHTML;
这些内容可能对你也有帮助更多可查看Javascript教程列表页。