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

简介:   本文主要讲述jquery对象和js里的dom对象之间互相转换的方法,使jquery对象可以直接使用js里的方法,或js里的dom对象使用jquery里的方法。jquery对象和dom对象是不一样的,什么是jquery对象?什么是dom对象?我们举个例子来说:$("#aijquery"): //这种方式获取得到的就是jquery对象document.

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

jquery对象和dom对象是不一样的,什么是jquery对象?什么是dom对象?我们举个例子来说:

$("#aijquery"): //这种方式获取得到的就是jquery对象
document.getElementById("aijquery")://这种方法获取到的就是dom对象

 

jquery对象和dom对象是不一样的,对象的一些方法也是不一样的,比如我们要获取一个标签的html内容:

document.getElementById("aijquery").innerHTML;//这是dom对象的方法
$("#aijquery").html();//这是jquery对象的方法

 

有时我们在特定的情况下,需要把jquery对象转换成dom对象,或者把dom对象转换成jquery对象,两种对象之间互相转换的方法:

dom对象转换为jquery对象:

一般情况下,dom对象直接用$()就可以转换成jquery对象,如:

$(document.getElementById("aijquery"))

 

jquery对象转换成dom对象,有两种方法,一种是用jquery的内置函数get,来获取dom对象,如:

$("#aijquery").get(0);

 

还有一种方法更简单,因为jquery对象的属性是一个集合,所以我们可以像数组那样,取出其中一项就行:

$("#aijquery")[0];
$("div")[5];
//上面这两种返回的都是dom对象,可以直接使用js里的方法

 

jquery对象和dom对象之间的互相转换就是上面这几种方法,总结一下我们经常会用到的一些写法,下面的这些写法都是正确的:

$("#aijquery").html(); 
$("#aijquery")[0].innerHTML; 
$("#aijquery").eq(0)[0].innerHTML; 
$("#aijquery").get(0).innerHTML;
$("#aijquery").eq(2).html();
$("#aijquery").get(2).innerHTML;

 

原文参考:http://www.aijquery.cn/Html/jqueryjiqiao/11.html

目录
相关文章
|
3月前
|
JavaScript
jQuery 遍历 方法
jQuery 遍历 方法
37 5
|
2月前
|
JavaScript 前端开发 开发者
深入了解jQuery:轻松实现高效的DOM操作
【10月更文挑战第11天】深入了解jQuery:轻松实现高效的DOM操作
69 0
|
1月前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
29天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
42 5
|
2月前
|
缓存 编解码 JavaScript
DOM 和 BOM 在项目中应用时的性能优化方法
【10月更文挑战第19天】总之,优化 DOM 和 BOM 的性能需要综合考虑多个方面,通过合理的设计和技术手段,提升项目的运行效率和用户体验。在实际开发中,要不断地进行性能优化实践,以适应不断变化的需求和技术发展。
|
2月前
|
XML 编解码 JavaScript
DOM(文档对象模型)和 BOM(浏览器对象模型)
【10月更文挑战第19天】在前端开发中,理解 DOM(文档对象模型)和 BOM(浏览器对象模型)是至关重要的。它们是 Web 开发的基础,为我们提供了与网页文档和浏览器进行交互的能力。
|
1月前
|
JavaScript 前端开发 API
|
2月前
|
XML JavaScript 数据格式
jquery中html()方法的使用
jquery中html()方法的使用
29 1
|
2月前
|
前端开发 JavaScript
jQuery - AJAX load() 方法
jQuery load() 方法是简单但强大的 AJAX 方法。
53 6
|
3月前
|
JavaScript 前端开发
jQuery 杂项方法
jQuery 杂项方法
35 2