jQuery对象 与 DOM 对象 之间的转换

1.把 jQuery 对象转换 DOM 对象

1.1.借助数组下标来获取 jQuery 对象集合中的某个 DOM 元素对象。

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <script src="../../Library/jquery-3.3.1.min.js"></script>
        <script>
            $(function(){
                var $li = $("li")
                var li = $li[0]
                alert(li.innerHTML)
            })
        </script>
    </head>
    <body>
        <ul>
            <li>列表 1</li>
            <li>列表 2</li>
            <li>列表 3</li>
        </ul>
    </body>
</html>

var $li = $("li")

返回 jQuery 对象

var li = $li[0]

返回 DOM 对象

1.2.借助 jQuery 对象方法，如 get() 方法，为 get() 方法传递一个下标值，即可从 jQuery 对象中取出一个 DOM 对象元素。

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <script src="../../Library/jquery-3.3.1.min.js"></script>
        <script>
            $(function(){
                var $li = $("li")
                var li = $li.get(0)
                alert(li.innerHTML)
            })
        </script>
    </head>
    <body>
        <ul>
            <li>列表 1</li>
            <li>列表 2</li>
            <li>列表 3</li>
        </ul>
    </body>
</html>

var li = $li.get(0)

返回 DOM 对象

2.把 DOM 对象转换 jQuery 对象

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <script src="../../Library/jquery-3.3.1.min.js"></script>
        <script>
            $(function(){
                var li = document.getElementsByTagName("li")
                var $li = $(li[0])
                alert($li.html())
            })
        </script>
    </head>
    <body>
        <ul>
            <li>列表 1</li>
            <li>列表 2</li>
            <li>列表 3</li>
        </ul>
    </body>
</html>

var li = document.getElementsByTagName("li")

获取所有 li 元素

var $li = $(li[0])

把所有 li 元素封装为 jQuery 对象

alert(li.innerHTML)

调用 jQuery 对象的方法