`
一笑_奈何
  • 浏览: 69206 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

jquery 与 Dom对象互转

阅读更多


什么是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()之类的写法都是错误的。

还有一个要注意的是:用#id作为选择符取得的是jQuery对象与document.getElementById("id")得到的DOM对象,这两者并不等价。请参看如下说的两者间的转换。

既然jQuery有区别但也有联系,那么jQuery对象与DOM对象也可以相互转换。在再两者转换前首先我们给一个约定:如果一个获取的是 jQuery对象,那么我们在变量前面加上$,如:var $variab = jQuery对象;如果获取的是DOM对象,则与习惯普通一样:var variab = DOM对象;这么约定只是便于讲解与区别,实际使用中并不规定。

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对象

alert(v.checked) //检测这个checkbox是否被选中

DOM对象转成jQuery对象:

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

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

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

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

通过以上方法,可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是:DOM对象才能使用DOM中的方法,jQuery对象是不可以用DOM中的方法。
分享到:
评论

相关推荐

    牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作

    《牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作》 jQuery是一种广泛使用的JavaScript库,它极大地简化了DOM...无论是DOM对象和jQuery对象的互转,还是对DOM的各种操作,jQuery都提供了优雅的解决方案。

    JQuery&JAVA JSON互转

    在JQuery与Java之间进行JSON数据互转,可以方便地实现前后端数据交换。 这篇名为“JQuery&JAVA JSON互转”的博客文章,可能讲解了如何在JQuery前端和Java后端之间有效地转换JSON对象。以下是一些相关的知识点: 1....

    jQuery学习笔记 获取jQuery对象

    使用jQuery选择器选择页面元素,目的是为了生成jQuery对象,语法... 当然jQuery对象和DOM对象可以互转换。从上面的例子也可以看出,jQuery对象可以视为是一个DOM对象数组,因此转换成DOM对象可使用get(index)方法或者

    js/jQuery对象互转(快速操作dom元素)

    在操作js或者jquery方面相关的元素时,可能会力不从心,因为在使用方法时可能js的会更好一点又或者jquery的会更好一点,真是无从选择啊,接下来将介绍JS/jQuery对象互转实现,方便你快速操作dom元素,感兴趣的朋友可以...

    深入浅析jQuery对象$.html

    本文将详细探讨jQuery对象以及它与DOM对象之间的关系,并讲解如何在两者之间进行转换,以及它们如何共存。 **jQuery对象与DOM对象** jQuery对象是通过`$()`函数创建的,它可以用来包装HTML元素或一组元素,使其...

    jquery使用经验小结

    1. jQuery对象与原生DOM对象的互转 在使用jQuery时,我们经常会遇到需要在jQuery对象和原生DOM对象之间进行转换的情况。首先,我们可以通过数组的方式访问jQuery对象的DOM元素,例如使用jQuery对象[0]来获取其对应的...

    JQuery使用示例程序

    9. **与原生JavaScript的互操作**: - `$()`可以将原生的DOM元素转换成jQuery对象,如`var elem = document.getElementById("myDiv"); var jqElem = $(elem);` - `get(0)`可以将jQuery对象转换回原生DOM元素,如`...

    锋利的Jquery 教材

    除了基础操作,高级主题如性能优化、DOM操作的最佳实践、与原生JavaScript的互操作性也是教材中的重要内容。例如,避免使用`$("*")`这样的全局选择器以减少遍历元素的时间,以及使用`.on()`代替`.bind()`来处理动态...

    java将xml文件内容与ztree树形结构互转.zip

    本项目"java将xml文件内容与ztree树形结构互转.zip"提供了使用Java实现XML文件和ZTree树形结构之间转换的方法,这对于处理和展示层级关系的数据非常实用。 首先,让我们深入了解XML文件。XML是一种标记语言,它的...

    jQuery帮助文档jQuery帮助文档

    7. **与原生JavaScript的互操作** - `$.fn.extend()`可以扩展jQuery原型,增加新的方法。 - `$()`可以将原生DOM元素转换为jQuery对象,反之,`get(0)`或`[0]`可以将jQuery对象转换为原生DOM元素。 总的来说,...

    基于jq一点不会的人,看后能熟练运用jquery

    jQuery 与原生 JavaScript 的互操作 - **$() 包装器**: 可以将任意 DOM 元素或者 HTML 字符串转换成 jQuery 对象。 - **.get(0)**: 获取 jQuery 对象中的第一个 DOM 元素,转换为原生 JavaScript 对象。 - **....

    锋利的JQuery

    10. **与原生JavaScript的互操作**:jQuery对象和DOM元素之间可以互相转换,`.get(index)`和`.toArray()`可以将jQuery对象转为DOM数组,而`$(element)`则能将DOM元素包装成jQuery对象。 通过学习《锋利的jQuery》,...

    jQuery In Action

    - **与其他库的兼容性**:分析了jQuery与其他JavaScript库(如Prototype、MooTools)的共存策略,确保代码的互操作性。 4. **选择元素进行操作**:深入介绍了使用CSS选择器、子元素选择器、属性选择器等来定位和...

    jquery 1.4 cheatsheet

    - `$.jQuery(elementArray)`:通过DOM元素数组创建jQuery对象。 - `$.jQuery(jQueryObject)`:通过jQuery对象创建新的jQuery对象。 - `$.jQuery()`:创建一个空的jQuery对象。 - `$.jQuery(html[,ownerDocument]...

    js+jquery.rar

    - **原生 JavaScript 与 jQuery 互操作**:有时可能需要在 jQuery 代码中使用原生 JavaScript 功能,通过 `.get(0)` 或 `[0]` 可以获取原始 DOM 元素,`.each()` 可以模拟原生的 `for` 循环。 5. **实际应用示例**...

    jdk1.8 jdk1.9 jQuery JavaScript API参考文档

    其API包含BOM(浏览器对象模型)和DOM(文档对象模型)。BOM允许开发者与浏览器进行交互,如改变窗口大小、打开新窗口、控制历史记录等。DOM则是HTML和XML文档的编程接口,通过它可以访问和修改文档结构。 ...

    JQuery 实例

    9. **jQuery与原生JavaScript的互操作** 通过`.get(0)`或`.get(index)`可以获取jQuery对象下的原生DOM元素,而`$(element)`则可以将原生DOM元素转换为jQuery对象。 10. **版本更新** jQuery不断更新以适应现代Web...

    jquery笔记

    - **jQuery对象**:通过包装DOM对象生成,每个HTML页面被视为一棵树,jQuery对象则是该树中的节点集合。 - **调用方式**:通过在HTML文件中引入jQuery库文件,使用`<script>`标签加载jQuery.js,并在`<script>`标签...

Global site tag (gtag.js) - Google Analytics