jquery对象与 document 对象的互为转换关系

本文链接：https://blog.youkuaiyun.com/a519640026/article/details/8807519

本文通过实例演示了jQuery对象与DOM对象之间的转换方法及其应用场景，包括如何使用jQuery选择元素、修改样式以及如何将DOM对象转换为jQuery对象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    function t1() {
        var jtest = $('#test');
        var dtest = document.getElementById('test');
        jtest.css('background','blue');
        /*
        alert(jtest.style.backgroundColor='blue'); // 不好使,可证明jquery对象不是DOM对象
        alert(dtest.style.backgroundColor='blue');
        */
    }

    function t2() {
        var divs = $('div');
        // 让你从divs中选出中国对应的DOM对象,然后改变他的背景.
        alert(divs[1]);
        divs[1].style.backgroundColor='red';

    }

    function t3() {
        var div0 = document.getElementsByTagName('div')[0]; // 选中第1个div
        div0.style.backgroundColor="red";
        alert('转换为jquery对象并改成蓝色');
        
        // 直接把DOM对象以参数形式传给$方法就可以了.
        // 如何来理解jquery的$方法
        // $方法是个包装器, 能把给的参数包装成jquery对象.
        // 如果给的字符串,他会先当成选择器,并根据选择器选中DOM对象,并打包.
        // 如果给的直接是DOM对象, 直接打包.
        $(div0).css('background','blue');

    }
</script>

<style type="text/css">
</style>
</head>
    <body>
        <h1>jquery对象和DOM对象的关系</h1>
        <p id="test">随便打点</p>
        
        <div>美国</div>
        <div>中国</div>
        <div>英国</div>

        <input type="button" value="选中test" onclick="t1();" />
        <input type="button" value="jquery对象转成DOM对象" onclick="t2();" />
        <input type="button" value="DOM对象转成jquery对象" onclick="t3();" />
    </body>

$('#test') 这是一个jquery 对象不过他是先把 document.getElementById('test') 这个dom对象放入了 jquery 对象属性里面放入的数序是从0开始

所以放进去的$('#test')[0] 就是存放 document.getElementById('test')

而document.getElementById('test') 要转成jquery 对象只需要把它作为参数传入$() 就可以了~~