`

jQuery-DOM对象和jQuery对象及转换

阅读更多

刚开始学习jQuery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象。至于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()之类的写法都是错误的。

还有一个要注意的是:用#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中的方法。

 

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/lansky07/archive/2008/11/26/3379024.aspx

分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    jquery插件jquery-ui-1.8.2.custom.min.js

    例如,要创建一个对话框,可以使用`$("#element").dialog()`方法,其中"#element"是需要转换成对话框的DOM元素。 总的来说,"jquery-ui-1.8.2.custom.min.js"是jQuery UI的一个压缩版实现,包含了丰富的UI组件和...

    jquery dom对象 详细介绍1

    jQuery 是一个广泛使用的JavaScript库,它简化了DOM操作、AJAX请求、事件处理以及创建复杂的网页特效。jQuery的核心特性包括对JSON...同时,理解jQuery对象和DOM对象的区别及其相互转换,是有效利用jQuery功能的关键。

    jquery-ui-1.8.18.custom,jquery-ui-1.8.18.custom.min,jquery-1.7.1.min

    在实际开发中,我们首先需要将 "jquery-1.7.1.min.js" 引入页面,它是 jQuery 的核心库,提供了基础的DOM操作、事件处理和Ajax等功能。然后引入 "jquery-ui-1.8.18.custom.min.js" 和相应的CSS文件,以启用jQuery UI...

    jquery对象和dom对象

    **jQuery对象和DOM对象之间的转换** 虽然jQuery对象和DOM对象各有优势,但在实际开发中,我们经常需要在两者之间进行转换。jQuery提供了`.get()`, `.get(0)`, `[index]`等方式将jQuery对象转换为DOM对象,而通过`$...

    AngularJS封装jQuery-File-Upload

    因此,我们需要将jQuery-File-Upload的行为转换为AngularJS的服务或指令。 首先,我们需要创建一个自定义的AngularJS指令,该指令负责初始化和管理jQuery-File-Upload实例。这可以通过使用`link`函数来实现,其中...

    jQuery对象和DOM对象之间相互转换的方法介绍

    在Web开发中,经常需要在jQuery对象和DOM对象之间进行转换,以便可以利用各自对象的方法优势进行高效编程。jQuery对象是包装了DOM对象的类数组对象,它们之间的转换虽然看似简单,但在实际操作中却非常重要。 首先...

    jquery对象和dom对象.doc

    当我们谈论jQuery对象和DOM对象时,我们需要理解两者之间的基本差异和转换方法。 DOM(Document Object Model)是HTML和XML文档的结构表示,允许我们通过JavaScript来访问和修改网页内容。DOM对象是通过JavaScript...

    javascript 原生Dom对象和jQuery对象的联系和区别

    JavaScript中的DOM对象和jQuery对象是两种不同的数据结构,它们在处理网页元素时有着各自的特性和优缺点。了解它们之间的联系和区别对于JavaScript开发者来说至关重要,因为这有助于选择合适的工具进行网页交互。 ...

    jQuery-QueryBuilder.zip

    1. **jQuery.js**: 这是jQuery的核心库,为jQuery-QueryBuilder提供基础的DOM操作、事件处理和动画效果。jQuery简化了JavaScript的跨浏览器编程,使开发者能更高效地操作HTML元素。 2. **jQuery-queryBuilder.js**:...

    jquery-1.9.1.min.rar

    jQuery的核心在于它的选择器功能,它极大地简化了DOM(文档对象模型)的操作。例如,通过"$()"函数,我们可以轻松地选取页面上的元素,然后执行各种操作,如添加类、改变HTML内容或者处理事件。在1.9.1版本中,...

    用jquery-table2excel,进行导出excel表格 带图片 jquery.table2excel.js下载

    对于包含图片的表格,`jquery-table2excel`会将图片转换为Base64编码,并嵌入到生成的Excel文件中,这样在打开Excel时仍能显示图片。 然而,需要注意的是,由于Excel文件格式的限制,不是所有的HTML特性都能完美地...

    jQuery简介、jQuery使用详解、DOM对象与jQuery对象的转换与区别

    然后,我们讨论DOM对象与jQuery对象的区别和转换。DOM(Document Object Model)是HTML和XML文档的标准表示,而jQuery对象则是jQuery库处理的特定对象,封装了DOM元素。DOM对象是原生JavaScript操作,如通过`...

    jquery-ui.min1.12.1.zip

    jQuery是一个轻量级的JavaScript库,简化了DOM操作、事件处理、动画效果和Ajax交互。而jQuery UI则是在jQuery基础上构建的一套完整的用户界面解决方案,它包含了多种可复用的UI组件,其中就包括了层级菜单。 在我们...

    关于dom和jquery对象理解

    2. **从DOM到jQuery**:如果有一个DOM对象,想要转换成jQuery对象以便使用jQuery提供的方法,则可以使用`$(dom)`。例如,`var $cr = $(cr);`将DOM对象`cr`转换成了jQuery对象。 #### 总结 DOM与jQuery之间的关系是...

    jquery-1.11.1.js+jqury.json.2.4.js.rar

    - JSON.parse()和JSON.stringify():这两个是JavaScript内置的JSON处理方法,分别用于解析JSON字符串为JavaScript对象,和将JavaScript对象转换为JSON字符串。 - jQuery.extend():jQuery的扩展方法可以用来合并...

    jquery对象和javascript对象即DOM对象相互转换

    了解如何在jQuery对象和DOM对象之间转换至关重要,这可以帮助我们在需要使用jQuery的强大功能时,也能灵活地利用DOM对象的原生方法。例如,当你需要操作某个特定的DOM属性,而jQuery没有提供直接的接口时,可以先将...

    前端项目-jquery-orgchart.zip

    首先,我们需要了解jQuery,这是一个广泛使用的JavaScript库,简化了DOM操作、事件处理、动画以及Ajax交互,使得前端开发更加便捷。jQuery的核心理念是"Write Less, Do More",它通过提供简洁的API,降低了...

    jquery-calendar-with-tooltip_9月显示有误修复后

    jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画和Ajax交互,使得开发者能更高效地构建动态网页。 在描述中提到的问题是9月份显示为“90”,而不是常规的“09”。这很可能是一个字符串格式化...

    jquery-ui-1.10.0.custom.min.zip

    这里,`$(function() {...})`是jQuery的文档就绪事件,确保在DOM加载完成后执行代码。`$("#progressbar").progressbar()`则是将指定的元素转换为进度条组件,`{value: 25}`则是设置初始进度。 如果需要动态更新进度...

    前端项目-jquery-json.zip

    在前端开发领域,jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript操作DOM、处理事件、创建动画以及实现AJAX交互。本项目“前端项目-jquery-json.zip”专注于jQuery与JSON的交互,提供了一套插件来...

Global site tag (gtag.js) - Google Analytics