jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象。jQuery 对象是 jQuery 独有的,其可以使用 jQuery 里的方法,但是不能使用 DOM 的方法;例如: $("#img").attr("src","test.jpg"); 这里的 $("#img")就是 jQuery 对象。

DOM对象就是Javascript 固有的一些对象操作。DOM 对象能使用Javascript 固有的方法,但是不能使用 jQuery 里的方法。例如:document.getElementById("img").src = “test.jpg";这里的document.getElementById("img") 就是DOM 对象。

$("#img").attr("src","test.jpg"); 和 document.getElementById("img").src = "test.jpg"; 是等价的,是正确的,但是 $("#img").src = "test.jpg" ;或者 document.getElementById("img").attr("src","test.jpg"); 都是错误的。

再说一个例子,就是this, 在写 jQuery 时经常这样写: this.attr("src","test.jpg");可是就是出错,其实this 是DOM对象,而.attr("src","test.jpg") 是 jQuery 方法,所以出错了。要解决这个问题就要将 DOM对象转换成 jQuery 对象,例如 $(this).attr("src","test.jpg");

1. DOM 对象转成 jQuery 对象

对于已经是一个 DOM 对象,只需要用 $() 把DOM对象包装起来,就可以获得一个 jQuery 对象了,$(DOM 对象)     注: var是定义变量

如: var v = document.getElementById("v");        //DOM对象

var $v = $(v);        //jQuery 对象

转换后,就可以任意使用 jQuery 的方法。

2. jQuery 对象转成 DOM 对象

两种转换方式讲一个 jQuery 对象转换成 DOM 对象: [index] 和 .get(index);

(1) jQuery 对象是一个数据对象,可以通过 [index] 的方法,来得到相应的 DOM 对象。

如: var $v = $("#v");          //jQuery 对象

var v = $v[0];               //DOM 对象

alert(v.checked);                  //检测这个checkbox是否被选中

(2) jQuery 本身提供,通过.get(index) 方法得到相应的 DOM 对象

如:var   $v = $("#v");           //jQuery 对象

var v = $v.get(0);            //DOM对象 ( $v.get()[0] 也可以 )

alert(v.checked);             //检测这个 checkbox 是否被选中

通过以上方法,可以任意的相互转换 jQuery 对象和 DOM 对象,需要再强调的是: DOM 对象才能使用DOM 中的方法,jQuery 对象是不可以使用DOM中的方法。

jQuery对象和Javascript对象的更多相关文章

  1. 【JQuery】jquery对象和javascript对象即DOM对象相互转换

    jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象.jQuery 对象是 jQuery 独有的,其可以使用 jQuery 里的方法,但是不能使用 DOM 的方法:例如: $(&quo ...

  2. jquery对象和javascript对象即DOM对象相互转换

    jquery对象和javascript对象即DOM对象相互转换 1. DOM 对象转成 jQuery 对象对于已经是一个 DOM 对象,只需要用 $() 把DOM对象包装起来,就可以获得一个 jQue ...

  3. jquery对象和javascript对象相互转换

    本文转载:http://jeiofw.blog.51cto.com/3319919/786506 jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象.jQuery 对象是 jQuer ...

  4. jquery对象和javascript对象的console.log结果

    array.push($("div").children("label")); console.log(array); 输出: 这个是jquery对象,如果在选 ...

  5. JQuery对象与javascript对象的转换

    jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象. jQuery 对象是 jQuery 独有的,其可以使用 jQuery 里的方法,但是不能使用 DOM 的方法:例如: $(&qu ...

  6. jQuery对象与javaScript对象的互换

    1. jQuery对象-->Dom对象 1) 通过 .[0] 的方式:       var $s = $(.class);  (jQuery对象)       var s = $s.[0];   ...

  7. JSON对象和JavaScript对象直接量的区别--不同之处

    JSON对象和JS对象直接量 在工作当中,我们总是可以听到人说将数据转换为JSON对象,或者说把JSON对象转换为字符串之类的话,下面是关于JSON的具体说明. JSON对象并不是JavaScript ...

  8. 不可不知的JavaScript 之 JSON对象和JavaScript对象直接量

    JSON对象和JS对象直接量 在工作当中,我们总是可以听到人说将数据转换为JSON对象,或者说把JSON对象转换为字符串之类的话,下面是关于JSON的具体说明. JSON对象并不是JavaScript ...

  9. JSON对象与JavaScript对象的区别

    //js对象的字面量表示法: var people1={ name:'hehe', age:18 }; //json的格式是: var people1={ "name":'hehe ...

随机推荐

  1. webgote的例子(4)Sql注入(SelectGET)

    SQL Injection (Select/GET) 本章内容 (查询显示中要注意的错误) 这里面我们看一下 movie的数值,选择表单中的当我们选择的二个的时候 move的值也变成了第二个,选择表单 ...

  2. Vue-Module

    由于使用单一状态树,应用的所有状态会集中到一个比较大的对象.当应用变得非常复杂时,store 对象就有可能变得相当臃肿. 为了解决以上问题,Vuex 允许我们将 store 分割成模块(module) ...

  3. Linux运维常用的几个命令介绍【转】

    Linux运维常用的几个命令介绍 1. 查看系统内核版本​ [root@funsion geekxa]# cat /etc/issue CentOS release 6.5 (Final) Kerne ...

  4. php7.33 configure

    To assign environment variables (e.g., CC, CFLAGS...), specify them as VAR=VALUE. See below for desc ...

  5. [写出来才有价值系列:node.js]node.js 01-介绍及安装

    对于Node.js在百度百科上是这样解释的: Node.js是一个Javascript运行环境(runtime).实际上它是对Google V8引擎进行了封装.V8引 擎执行Javascript的速度 ...

  6. Java杂知识汇总(自己积累的)

    [前提] 接下来,可能需要开始学习Java了,所以现在将前辈们传递给我的经验都记录下来,免得再次问他们. [积累] 1. 关于重启Tomcat服务器: 当在开发过程中, | 修改Java代码 -- 需 ...

  7. gan对抗式网络

    感觉好厉害,由上图噪声,生成左图噪声生成右图以假乱真的图片, gan网络原理: 本弱又盗了一坨博文,不是我写的,如下:(跪膜各路大神) 前面我们已经讲完了一般的深层网络,适用于图像的卷积神经网络,适用 ...

  8. java基础6 面向对象的详解

    本文知识点(目录): 1.1.万物皆对象    1.2.面向对象的概述    1.3.面向对象(java语言)与面向过程(C语言)对比    1.4.面向过程    1.5.对象    1.6.面向对 ...

  9. systemd基础

    systemd 起源 systemd这一名字源于Unix中的一个惯例:在Unix中常以“d”作为系统守护进程(英语:daemon,亦称后台进程)的后缀标识.除此以外,systemd亦是借代英文术语D体 ...

  10. MVC 之AjaxHelper

    http://www.cnblogs.com/jyan/archive/2012/07/23/2604958.html 除了传统的Ajax方法之外,MVC提供了AjaxHelper类: Helper ...