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和DOM对象之间的转换

    jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S(’#id’)得到的是 ...

  2. 需要知道的jQuery对象和DOM对象之间的转换

    jQuery对象和DOM对象之间的转换 jQuery对象就是通过jQuery包装DOM对象后产生的对象. jQuery对象和DOM对象不能互相调用对方的方法或属性,但它们之间可以进行转换. 两者都无法 ...

  3. jquery对象与dom对象之间互相转换的方法

    本文主要讲述jquery对象和js里的dom对象之间互相转换的方法,使jquery对象可以直接使用js里的方法,或js里的dom对象使用jquery里的方法. jquery对象和dom对象是不一样的, ...

  4. DOM和jquery对象之间的转换

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. JSON字符串和JS对象之间的转换

    JSON字符串和JS对象之间的转换 1 json字符串转换为js对象 1.1 标准json格式字符串转换为Js对象  JSON字符串 str JSON.parse(str) eval(str) eva ...

  6. 使用Javascript/jQuery将javascript对象转换为json格式数据 - 海涛的CSDN博客 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  7. Java基础97 json插件的使用(java对象和json字符串对象之间的转换)

    1.需要用到的包 2.实例 实体类 people package com.shore.entity; /** * @author DSHORE/2019-4-19 * */ public class ...

  8. Java中字节与对象之间的转换

    近期公司里面用到了消息队列,而正如我们知道的是消息队列之间的是通过二进制形式的.以下就分享一下java中字节与对象之间的转换. 主要是用到了ByteArrayOutputStream和ObjectOu ...

  9. jQuery对象与JS原生dom对象之间的转换

    jQuery就是JS的一个扩展库,工具库,提供很多方便快捷的方法,所以将JS对象转换为jQuery对象后,能更方便地操作这个对象.但是jQuery对象也不是万能的,有一些JS对象有的能,jQuery对 ...

随机推荐

  1. HDU1272 小希的迷宫 并查集

    参考网址:http://blog.sina.com.cn/s/blog_6827ac4a0100nyjy.html 解题思路: 由于这里出现的数字不一定连续的数字都会出现,所以设一个mark来标记数字 ...

  2. 依赖注入容器Autofac与MVC集成

    Autofac是应用于.Net平台的依赖注入(DI,Dependency Injection)容器,具有贴近.契合C#语言的特点.随着应用系统的日益庞大与复杂,使用Autofac容器来管理组件之间的关 ...

  3. LeetCode OJ 92. Reverse Linked List II

    Reverse a linked list from position m to n. Do it in-place and in one-pass. For example:Given 1-> ...

  4. Django:之不得不说的web框架们

    python的web框架 Bottle Bpttle是一个快速.简洁.轻量级的基于WSIG的微型web框架,此框架只有一个.py文件,除了python的标准库外,其不依赖任何其它模块. pip ins ...

  5. @font-face的用法

    几乎所有浏览器(包括最古老的IE6)也支持的网络字体@font-face的用法是: @font-face { font-family: 'MyWebFont'; src: url('webfont.e ...

  6. 在Linux下编写php扩展

    以下内容是本人学习过程中的笔记或者心得,如果有什么建议或者意见请在评论中提醒我,谢谢,这篇文章我会定期更新,由浅到深的分享我学PHP扩展历程 或者在学习中有什么问题欢迎交流 1.去PHP官网下载一个源 ...

  7. C#生成随机汉字

    using System; using System.Text; namespace ConsoleApplication {     class ChineseCode     {          ...

  8. asp之servervariables全部显示

    <%Response.Write("<p>")%><%for each i in request.servervariables%> <% ...

  9. undefined与null

    undefined 声明的变量尚未初始化 null 对象尚未存在 eg: var a; console.log(typeof a); 输出undefined var b= document.getEl ...

  10. Factory and AbstractFactory ——抽象与具体的分离

    Factory and AbstractFactory——抽象与具体的分离 面向对象标准关注于抽取一系列事物的共同行为,组建一个基类.行为再划分成两类: 1:现在及以后不太可能会变化的行为. 2:以后 ...