对于已经是一个 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. JAVA入门2019-JAVA配置(windows7和10通用)IDE推荐和相关软件

    如何安装JDK 首先,略过"什么是JDK",非要问,这就是编译环境,JRE是运行环境.一个写程序,一个部署运行. 下载的方法:百度 java se 或者openJDK(两个差不多, ...

  2. JS encodeURIComponent函数

    为了避免歧义,可以用JS 的encodeURIComponent函数  将有歧义的字符(?+=等)转换成对应的ASCII编码 for(var i=0;i<whichform.elements.l ...

  3. POJ-1274 The Perfect Stall---二分图模板

    题目链接: https://vjudge.net/problem/POJ-1274 题目大意: 有n个奶牛和m个谷仓,现在每个奶牛有自己喜欢去的谷仓,并且它们只会去自己喜欢的谷仓吃东西,问最多有多少奶 ...

  4. dom事件操作例题,电子时钟,验证码,随机事件

    dom事件操作 当事件发生时,可以执行js 例子: 当用户点击时,会改变<h1>的内容: <h1 onClick="this.innerHTML='文本更换'"& ...

  5. 换了台电脑tomcat自己运行没问题,eclipse中配置tomcat开启了浏览器却404错误解决

    如果发现下图中 apache tomcat 的Overview 视图中发现 Server Locations 灰色显示 那么首先需要配置好TomCat的TOMCAT_HOME 和 CATALINA_H ...

  6. 数据结构(C语言)分享笔记:数据结构的逻辑层次、存储层次

    [1] 严格意义上数据结构的概念 数据结构,一个简单的定义:相互之间存在一种或多种特定关系的数据元素的集合.即:数据结构 = 元素集合 + 元素间关系的集合 . 在讨论数据结构时,可以基于两个不同的层 ...

  7. Java - 通过私有构造方法获取实例

  8. (83)zabbix Less than 25% free in the configuration cache解决

    在zabbix server默认配置下,出现告警:Less than 25% free in the configuration cache,字面意思是:可用的配置缓存少于25%. 报错如下图: 增加 ...

  9. python 进度条 打印

  10. JavaScript之map与parseInt的陷阱

    问题来源 ​ 这个问题的来源是学习廖雪峰老师JS教程.问题如下:小明希望利用map()把字符串变成整数,他写的代码很简洁: 'use strict'; var arr = ['1', '2', '3' ...