JQ与JS修改页面的内容以及转换

程序员文章站 2022-05-14 22:13:54

...

使用js的方法点击按钮，修改页面的内容。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            function changeJS(){
                
                var div = document.getElementById("div1");
                div.innerHTML = "成功修改了内容";
            }
            
        </script>
    </head>
    <body>
        
        <input type="button" value="JS修改div内容" onclick="changeJS()"/>
        <div id="div1">
            这里的内容一会要被js修改
        </div>
    </body>
</html>

使用JQ 的方式修改页面的内容，并且进行JS与JQ之间的转换

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../../js/jquery-1.11.0.js"></script>
        <script>
            function changeJS(){
                
                var div = document.getElementById("div1");
                //div.innerHTML = "成功修改了内容";
                
                //将js对象转成jq对象
                $(div).html("转成JQ对象来修改内容");
            }
            
            
            $(function(){
                
                //给按钮绑定事件
                $("#btn2").click(function(){
                    
                    //找到div
                    $("#div1").html("JQ方式成功修改了内容。")
                });
            });
            
        </script>
    </head>
    <body>
        
        <input type="button" value="JQ修改div内容" onclick="changeJS()"/>
        <input type="button" value="JS修改div内容" id="btn2"/>
        <div id="div1">
            这里的内容一会要被js修改
        </div>
    </body>
</html>

我们也可以将jq对象转化成js对象

    //将jq转化成js对象
                    var $div = $("#div1");
                
                    var jsDiv = $div.get(0);
                    
                    jsDiv.innerHTML = "jq转换成js对象";

上一篇： Unity Shader实现2D游戏迷雾

下一篇： STL 实现线性表,栈,队列

JQ与JS修改页面的内容 以及转换

JQ与JS修改页面的内容 以及转换

JQ与JS修改页面的内容以及转换

JQ与JS修改页面的内容以及转换