jQuery对象与DOM对象的互转

小灰灰 2022-02-26 00:52 249阅读 0赞

## Q ##

jQuery对象与JS DOM API(如`document.getElementById(id)`)获取的DOM 对象是两种不同类型的对象。  
jQuery对象不能直接调用DOM对象的API。  
DOM对象也不能直接使用jQuery的方法。  
如：  
DOM对象的`innerHTML, innerText, outerHTML, outerText, value`等成员属性。  
jQuery对象的`html(), text(), val()`等成员方法。  
jQuery是对普通JS DOM方法/成员进行了封装，使使用更简单，功能更强大。

## 类型互转 ##

*  jQuery对象 --> DOM对象  
    使用`[index]`或`get(index)`访问jQuery对象即可，返回值即是普通的DOM对象。  
    jQuery对象为`qObj`，则：  
    `qObj[index]`或`qObj.get(index)`可以得到DOM对象。
 *  DOM对象 --> jQuery对象  
    用`$()`把DOM对象包起来即可。

## html ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>template</title>
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    </head>
    <body>
        
        <div>
            <p id="p1">一段文字 <span>哈哈哈</span> <br>
                段落结尾
            </p>
            <p>第二段文字</p>
            
        </div>
    
    </body>
    </html>

控制台测试：jQuery对象和DOM对象调用各自的成员。  
![jQuery对象和DOM对象调用各自的成员][jQuery_DOM]  
jQuery中的`html(), text(), val()`分别是对DOM中`innerHTML, innerText, value`的封装。

[jQuery_DOM]: /images/20220226/06a645c3a0cc4a919f797daead97434a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，249人围观）

还没有评论，来说两句吧...

相关阅读

相关 javaBean对象与Map对象互转

import java.beans.BeanInfo; import java.beans.IntrospectionException; import java.be

缺乏、安全感/ 2022年07月18日 05:51/ 0 赞/ 216 阅读

相关 jQuery对象与dom对象相互转换

什么是jQuery对象？ \---就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，其可以使用jQuery里的方法。比如：

àì夳堔傛蜴生んèń/ 2022年07月15日 11:43/ 0 赞/ 284 阅读

相关 jQuery对象与DOM对象的相互转换

通过jQuery选择器获取的对象与通过document.getElementById获取的对象是不同类型对象。使用jQuery获取的对象不能使用DO

系统管理员/ 2022年06月17日 07:44/ 0 赞/ 269 阅读

相关 JQuery对象与DOM对象

1. DOM对象在网页中，各标签都是一个DOM节点，如下所示： <ul id="ulId"> <li>a</li> <

灰太狼/ 2022年06月08日 03:06/ 0 赞/ 259 阅读

相关关于jquery对象与dom对象转换

1．关于jquery对象与dom对象转换对于dom对象\-----àjquery对象 $(dom)，（直接将dom对象放到$的括号中）对于jquery对象\-

谁践踏了优雅/ 2022年06月06日 05:52/ 0 赞/ 260 阅读

相关初识Jquery（二）Jquery对象与DOM对象

Jquery对象：html() var obj = $("content); obj.html("jquery对象"); DOM对象：innerHTML()

╰半橙微兮°/ 2022年06月02日 09:24/ 0 赞/ 284 阅读

相关 jQuery对象与Dom对象间的转换

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

r囧r小猫/ 2022年05月26日 05:59/ 0 赞/ 411 阅读

相关 JS对象与Dom对象与jQuery对象之间的区别

前言通过问题看本质：举例： js的写法:document.getElementById(‘save’).disabled=true; 在jquery中我是

野性酷女/ 2022年05月16日 05:28/ 0 赞/ 284 阅读

相关 jQuery对象与DOM对象的互转

Q jQuery对象与JS DOM API(如`document.getElementById(id)`)获取的DOM 对象是两种不同类型的对象。 jQuery对象不

小灰灰/ 2022年02月26日 00:52/ 0 赞/ 250 阅读

相关 jQuery--DOM对象与jQuery对象的转换

在JavaScript中，通过getElementById()、getElementsByClassName()和querySelector()等方法来获取要页面中的HTML元

骑猪看日落/ 2021年08月13日 22:28/ 0 赞/ 469 阅读