jQuery技术

jQuery DOM对象区别与联系

字号+ 作者:H5之家 来源:H5之家 2017-08-25 13:01 我要评论( )

本文将为关注织梦者的朋友提供的是的jQuery DOM对象区别与联系相关教程,具体实例代码请看下文:对两种对象类型的定义,只要能理解并转换成自己的说法就可以,不

本文将为关注织梦者的朋友提供的是的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教程列表页。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • jQuery学习笔记1

    jQuery学习笔记1

    2017-08-25 12:02

  • 如鹏网学习笔记 十一)JQuery

    如鹏网学习笔记 十一)JQuery

    2017-08-25 09:02

  • 学习jQuery之旅--jQuery的经典实例应用

    学习jQuery之旅--jQuery的经典实例应用

    2017-08-24 16:02

  • 比较好的JQuery视频教程

    比较好的JQuery视频教程

    2017-08-24 13:04

网友点评
P