jQuery html()、text()、val()

2020-04-10 21:21 默默不语阅读(153) 评论(0) 编辑收藏举报

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="d1">
            <p>哈哈</p>
        </div>
        <input id="input1" type="text" value="嘎嘎" />
        <input id="dj" type="button" value="点击" />
        <script type="text/javascript" src="../images/jquery-3.4.1.min.js"></script>
        <script type="text/javascript">
            var dj = document.getElementById("dj");
            dj.onclick = function(){
                /* document.getElementById("d1").innerHTML */
                /* html的参数是用来修改值的 */
                /* var html = $("#d1").html("谷谷谷谷谷谷");//<p>哈哈</p> */
                var html = $("#d1").html();//<p>哈哈</p>
                alert("html:"+html);
                /* document.getElementById("d1").innerText */
                var text = $("#d1").text();//哈哈
                alert("text:"+text);
                /* document.getElementById("d1").value */
                var val = $("#d1").val();//空
                alert("val:"+val);
                /* css(properties):把一个"名:值"对象设置为所有匹配元素样式属性 */
                $("#d1").css({width:"100px",height:"100px",color:"red"});
                /* 属性名包含-，必须使用引号*/
                $("#d1").css({"margin-top":"200px"});
                
            }
        </script>
    </body>
</html>