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. log4j.xml(信息打印)

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE log4j:configuration SY ...

  2. 修改index.php 清空mylog1.txt

    进入编辑php文件vim index.php(无则新建) -->进入命令行模式--输入a(append)-->进入编辑模式-->编辑好-->esc退出编辑模式-->:q! ...

  3. Box of Bricks

    Box of Bricks Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Total ...

  4. ios 导航页面

    //  AppDelegate.m#import "AppDelegate.h"#import "ViewController.h" @interface Ap ...

  5. 两层嵌套的JSON包的解法

    由于后台的变态,有时候会出现两层甚至多层嵌套的JSON包. 一层的很好解,而且我看过一些比较大的网站新闻接口返回的JSON包也仅仅是一层的. 比如下图所示一层的包 代码也很简单直观 dict = [d ...

  6. MySQL数据库分区修改【原创】

    之前有个表分区添加时s201607添加成s201617,所以在查询7月份数据时报错 错误的 alter table statistics_ticket add partition (partition ...

  7. Oracle 游标及存储过程实例

    /*********实例一*********/ create or replace procedure users_procedure is cursor users_cursor is select ...

  8. php添加gd

    一 GD简介: php处理图形的扩展库,提供了一系列用来处理图片的API.如果开发过程中发现有页面验证码不能显示,则要考虑检查phpinfo(),是否支持GD库. 二 思路: 网上发现添加GD库的方法 ...

  9. Spring 与 mybatis整合 Error parsing Mapper XML. Cause: java.lang.NullPointerException

    mapper配置文件中的namespace没有填:而且namespase的值应该填为:mapper的权限定名:否则还是会抛出异常 org.springframework.beans.factory.B ...

  10. cannot create windows service for mysql

    这安装完mysql启动的时候总是弹出不能启动错误,解决办法: 先卸载掉MySQL干净:把关于MySQL所有目录及文件都删除掉,还有把注册表删除干净.在注册表找到以下项目并删除:HKEY_LOCAL_M ...