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

最新推荐文章于 2023-06-15 00:39:03 发布

忆水思寒

最新推荐文章于 2023-06-15 00:39:03 发布

阅读量861

点赞数

分类专栏：前端

原文链接：https://blog.csdn.net/a519640026/article/details/8807519

版权

前端专栏收录该内容

34 篇文章 1 订阅

订阅专栏

<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 对象只需要把它作为参数传入$() 就可以了~~
————————————————
版权声明：本文为CSDN博主「公众号：码农富哥」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/a519640026/article/details/8807519

忆水思寒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery对象与 document 对象的互为转换关系

<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');
复制链接

扫一扫