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');
        /*
        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
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值