对于已经是一个 DOM 对象,只需要用 $() 把DOM对象包装起来,就可以获得一个 jQuery 对象了,使用[index]和.get(index)可以转为DOM对象

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对象与js对象的更多相关文章

  1. jquery对象与js对象的相互转换

    jQuery对象转成DOM对象: 两种转换方式将一个jQuery对象转换成DOM对象:[index]和.get(index); (1)jQuery对象是一个数据对象,可以通过[index]的方法,来得 ...

  2. jquery对象和js对象的转化

    jquery对象和js对象的转化   jquery对象只能使用jqury方法,不能使用js的方法,相反的,js对象也只能使用js的方法,如果js对象使用了jquery方法,那么浏览器就会报错. 但是在 ...

  3. DOM对象和js对象以及jQuery对象的区别

    DOM对象和js对象以及jQuery对象的区别 DOM对象和js对象以及jQuery对象的区别 一.DOM对象 文档对象模型简称DOM,是W3C组织推荐的处理可扩展置标语言的标准编程接口. DOM实际 ...

  4. jQuery对象与js对象转换

    前言 jq方法和js的方法属性是不能互相使用的,所以有时候就需要转一下,下面就介绍下方法. js对象转化为jQuery对象 var box=document.getElementById(" ...

  5. JQuery学习:jquery对象和js对象区别和转换

    JQuery对象与JS对象区别与转换 1.JQuery对象在操作时,更加方便 2.JQuery对象和js对象方法不通用 3.两者相互转换 *  jq -- > js:jq对象[索引]  或者  ...

  6. jquery对象和js对象

    <ul id="ul1">   <li id="li_1">01</li>   <li>02</li> ...

  7. jQuery对象与js对象互相转换

    两种转换方式将一个jQuery对象转换成js对象:[index]和.get(index); (1)jQuery对象是一个数据对象,可以通过[index]的方法,来得到相应的js对象. 如:var $v ...

  8. Jquery对象转js对象

    $(this)  Jquery对象 var sex=$(this).get(0); js对象 sex.style.display='block';

  9. jquery ajax 传递js对象到后台

    第一种:通过struts接收 (function ($) { $("#btnsave").click(function () { var params = {}; params[& ...

随机推荐

  1. iframe高度随内容自适应的方法

    我们知道,iframe最大的问题,就是高度的问题,如果你内容的高度是变化,要么你就给你的容器写个固定的高度,如果内容是未知的,显然这个方法并不能达到我们的想要的效果,要么就是通过js来解决这个问题. ...

  2. JSON.parse()与JSON.stringify()

    JSON.parse() 将字符串转成JSON 举个例子 var str = '{"name":"cn","age":"2&quo ...

  3. World Wind Java开发之十三——加载Geoserver发布的WMS服务(转)

    这篇是转载的平常心博客,原地址见:http://www.v5cn.cn/?p=171 1.WMSTiledImageLayer类说明 一个WMSTiledImageLayer类对象只能对应一个WMS发 ...

  4. mac 扫描存活IP段

    法一:脚本内容 MacdeMacBook-Pro:~ root# cat ping-ttl.sh #!/bin/bash [ $UID -ne 0 ]&&{ echo "Pl ...

  5. yield 生成器的运行机制

    yield 生成器的运行机制 当你问生成器要一个数时,生成器会执行,直至出现 yield 语句,生成器把 yield 的参数给你,之后生成器就不会往下继续运行. 当你问他要下一个数时,他会从上次的状态 ...

  6. vs2015“当前不会命中断点 还没有为该文档加载任何符号”的解决方法

    解决方法:工具-选项-调试 -(启用“仅我的代码”)勾去掉

  7. CUDA:Supercomputing for the Masses (用于大量数据的超级计算)-第九节

    原文链接 第九节:使用CUDA拓展高等级语言 Rob Farber 是西北太平洋国家实验室(Pacific Northwest National Laboratory)的高级科研人员.他在多个国家级的 ...

  8. .NET AJAX实例

    引用地址:http://blog.csdn.net/qianjiu/article/details/7524228 5.2 Ajax基础http://book.csdn.net/bookfiles/6 ...

  9. utf8、ansii、unicode编码之间的转换

    #include "stdafx.h"#include "windows.h"#include <iostream>#include <str ...

  10. 【JAVA】cxf使用springboot与xml配置的差别所导致的问题。

    使用xml时使用以下配置使报文没有加上命名空间时也能正常访问接口.bean定义的前后顺序不影响程序正常注册对象. <!-- 通过Spring创建数据绑定的类 --> <bean id ...