`
uule
  • 浏览: 6306177 次
  • 性别: Icon_minigender_1
  • 来自: 一片神奇的土地
社区版块
存档分类
最新评论

DOM对象与Jquery对象的区分

阅读更多

jQuery 对象 是通过jQuery包装DOM对象后产生的对象 。jQuery对象是jQuery独有的,其可以使用jQuery里的方法。

比如:

$("#test").html()  

指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法

用DOM实现代码:

document.getElementById("id").innerHTML;

虽然jQuery对象是包装DOM对象后产生的,但是
jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方 法 。乱使用会报错。比如:$("#test").innerHTML、document.getElementById("id").html()之类的 写法都是错误的。 

调用方法时要注意操作的是dom对象还是jquery对象。
普通的dom对象一般可以通过$()转换成jquery对象。


Jquery对象转换为DOM对象:

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


如:var v =$("#v") ; //jQuery对象
var v=v[0];    //DOM对象

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

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

var v=v.get(0);   //DOM对象


DOM对象转换为Jquery对象:

对于已经是一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。$(DOM对象)

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

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

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


几种正确的写法:

   1. $("#msg").html();
   2. $("#msg")[0].innerHTML;
   3. $("#msg").eq(0)[0].innerHTML;
   4. $("#msg").get(0).innerHTML;

 4

分享到:
评论

相关推荐

    jQuery第1天:JQ基本介绍、使用步骤、jQuery对象与DOM对象(重点)、jQuery选择器

    jQuery第1天:JQ基本介绍、使用步骤、jQuery对象与DOM对象(重点)、jQuery选择器、mouseover与mouseenter、index方法、区分jQuery与Javascript

    jQuery学习资料

    三.Dom对象和jQuery包装集 9 四. 什么是jQuery选择器 11 五.jQuery选择器全解 13 六 jQuery选择器实验室 19 七.API文档 20 八.总结 20 从零开始学习jQuery (三) 管理jQuery包装集 21 一.摘要 21 二.前言 21 三.动态...

    jQuery权威指南366页完整版pdf和源码打包

    10.5.1 jquery在其他库前导入 10.5.2 jquery在其他库后导入 10.6 使用子查询优化选择器性能 10.7 减少对dom元素直接操作 10.8 正确区分dom对象与jquery对象 10.8.1 dom对象与jquery对象的定义 10.8.2 ...

    从零开始学习jQuery (二) 万能的选择器

    一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显减轻开发人员的...无论是在写程序还是看API文档, 我们要时刻注意区分Dom对象和jQuery包

    jQuery权威指南-源代码

    书名:jQuery权威指南(系统介绍jQuery方方面面...10.8 正确区分DOM对象与jQuery对象/334 10.8.1 DOM对象与jQuery对象的定义/334 10.8.2 DOM对象与jQuery对象的类型转换/335 10.9 本章小结/337 第11章 综合案例开发...

    jquery插件使用方法大全

    使一个Dom对象成为一个Jquery对象很简单,通过下面一些方式(只是一部分): 代码 var a = $("#cid"); var b = $("<p>hello</p>"); var c = document.createElement("table"); var tb = $(c); 编辑本段代替body...

    JQuery框架类库基础部分学习 -JavaWeb

    jQuery 核心思想:jQuery 流行程度:jQuery 好处:常见问题JQuery核心函数jQuery 对象和 dom 对象区分jQuery 选择器基本选择器层级选择器过滤选择器基本过滤器:内容过滤器:属性过滤器:表单过滤器:表单对象属性过滤器...

    jQuery攻略.pdf

     《jQuery攻略》对使用jQuery过程中遇到的各类问题给出了解决方案,比如,如何使用jQuery框架、CSS选择器、DOM、事件处理、动画效果,以及如何开发Ajax应用程序、如何使用jQuery工具函数、如何使用插件扩展jQuery。...

    详解jQuery中的isPlainObject()使用方法

    这个方法的作用是为了跟其他的 JavaScript对象如 null,数组,宿主对象(documents),DOM 等作区分,因为这些用 typeof 都会返回object。 使用 语法: $.isPlainObject( object ) 参数说明: object:任意类型 ...

    JavaScript与Image加载事件(onload)、加载状态(complete)

    查看插件的源码,发现它也依赖图片对象的complete属性和onload事件,并且特别把IE6区分对待,到底IE6在图片加载对象上,与其它浏览器有什么不同呢? 看下文: 通过js操纵DOM很多情况下都是为了实现和当前页html元素...

    Online-Resume:您建立的简历将帮助您建立一些重要技能

    在线简历 哈西马尔·辛格(Harsimar ... 名称必须与架构中的名称匹配(请注意,对象和属性名称区分大小写)。 所有属性值都应该是为架构中的属性提供的数据类型。 例如,如果将数据类型指定为数组,则不能使用字符串作

    JavaScript实战

    14.2.4 高效地使用jQuery对象 409 14.3 创建快速载入的JavaScript 410 14.3.1 在Windows下使用YUI Compressor 411 14.3.2 在Mac下使用YUI Compressor 412 第五部分 附录 413 附录A JavaScript资源 413

    internationalize:用于国际化的轻量级插件,适用于Web和移动应用程序

    国际化加载并替换浏览器中DOM中特定于语言的短语。 它大致遵循胡须的逻辑,区分双括号和三括号,以允许纯文本和HTML插入。这个怎么运作在HTML页面中包含jquery.internationalize.js。 在文档上调用internationalize...

Global site tag (gtag.js) - Google Analytics