DOM和jquery对象之间的转换

Posted benjamin77

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DOM和jquery对象之间的转换相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>DOM与JQ对象之间的转换</title>
        <script src="../../js/jquery-1.8.3.js"></script>
        <script type="text/javascript">
            function write1(){
                //1.JS的DOM操作
//                document.getElementById("span1").innerHTML="萌萌哒!";
                //DOM对象不可以使用JQ对象的属性方法
                //document.getElementById("span1").html("萌萌哒!");
                
                var spanEle=document.getElementById("span1");
                
                //将DOM对象转换成JQ对象
                $(spanEle).html("思密达!");
            }
            
            $(function(){
                $("#btn").click(function(){
                    //JQ对象无法操作JS里面的属性方法
//                    $("#span11").innerHTML="呵呵哒!"
                    $(‘#span1‘).html("呵呵哒!");
                    
                    //JQ对象向DOM对象转换方式一
                    $(‘#span1‘).get(0).innerHTML="美美哒!";
                    
                    //JQ对象向DOM对象的转换方式二
                    $(‘#span1‘)[0].innerHTML="棒棒哒!";
                });
            });
        </script>
    </head>
    <body>
        <input type="button" value="JS写入" onclick="write1()"/>
        <input type="button" value="JQ写入" id="btn" /><br />
        班长:<span id="span1">你好帅哟!</span>
    </body>
</html>

 

以上是关于DOM和jquery对象之间的转换的主要内容,如果未能解决你的问题,请参考以下文章

认识JQuery,JQuery的优势语法多库冲突JS原生对象和JQuery对象之间相互转换和DOM操作,常用的方法

jquery对象与dom对象之间互相转换的方法

jquery和dom之间的转换

jQuery对象和DOM对象的相互转换

DOM对象 与 jQuery对象 之间的相互装换

DOM和jquery对象之间的转换