JavaScript中DOM操作与jQuery中DOM操作

最新推荐文章于 2019-01-28 11:48:06 发布

zhikanjiani

最新推荐文章于 2019-01-28 11:48:06 发布

阅读量133

点赞数

本文链接：https://blog.csdn.net/zhikanjiani/article/details/80794888

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Dom与JQ对象之间的转换</title>
        <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
        <script>
            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里面的属性和方法！！！
                    //$("#span1").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>

zhikanjiani

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中DOM操作与jQuery中DOM操作

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Dom与JQ对象之间的转换&lt;/title&gt; &lt;script type="text/javascript" src=
复制链接

扫一扫