jQuery对象与DOM对象的互转

版权声明:wuyujin1997 reserve all rights. https://blog.csdn.net/wuyujin1997/article/details/88871248

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中的html(), text(), val()分别是对DOM中innerHTML, innerText, value的封装。

猜你喜欢

转载自blog.csdn.net/wuyujin1997/article/details/88871248
今日推荐