DOM对象jQuery对象相互转换 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="jquery-3.3.1.js"></script>
    </head>
    <body>
        <div id="main">
            id=main的div
        </div>
        <button onclick="getElem()">获取元素</button>
        <button onclick="domToJQ()">DOM--jQuery</button>
        <button onclick="jqToDom()">jQuery--DOM</button>
    </body>
    <script type="text/javascript">
        //1.获取元素
        function getElem(){           
            console.log($('#main'));
            //获取元素的内容
            console.log($('#main').html());
            //设置元素内容
            $('#main').html('动态设置文本');
        }
        //2..DOM-->jQuery
        function domToJQ(){
            //1.获取DOM对象
            var div = document.getElementsByTagName('div')[0];
            //2.转化
            var $div = $(div);
            $div.html('转化成功');
            console.log(div,$div);
        }
        //3.jQuery-->DOM
        function jqToDom(){
            var div = $('#main')[0];
            var div2 = $('#main').get(0);
            div.innerHTML = '转化成功';
            console.log(div,div2);
        }


    </script>
</html>

 

posted @ 2019-03-02 09:23  Miss-Gao  阅读(91)  评论(0)    收藏  举报