jquery获取标签中的属性值并且赋值

痛定思痛。 2022-07-14 00:40 237阅读 0赞

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <script src="jquery-1.11.1.js"></script>
        <script>
    //---------------------------获取标签中的属性值 并赋值-----------------------------------------------
            jQuery(document).ready(function () {
                //val();   获取标签中的value属性的值。带有参数是赋值(类比js中的value属性)
                //打印获取的内容
                alert($("input").val());
                //给获取的属性赋值
                $("input").val("我是刚刚赋值的input内容")
    
                //text();  获取双闭合标签中的文本值。（不识别标签）(类比innerText)
                alert($("div").text());
                $("div").text("<li>我是text赋值的</li>")
    
                //html();  获取双闭合标签中的文本值。（识别标签）(类比innerHTML)
                alert($("div").html());
                $("div").html("<li>我是html赋值的</li>")
    
    //-------------------------获取宽度width 和 高度height------------------------------------------------
    
                //获取宽度
                $("button").eq(0).click(function () {
                    //换个offsetHeiht不一样。只获取高度
                    alert($(".box").width());
                })
                //获取宽度
                $("button").eq(1).click(function () {
                    //设置宽度
                    $(".box").width(200);
                })
    
    
                //获取高度
                $("button").eq(2).click(function () {
                    //换个offsetHeiht不一样。只获取高度
                    alert($(".box").height());
                })
                //获取高度
                $("button").eq(3).click(function () {
                    //设置高度
                    $(".box").height(200);
                })
    
    
            });
        </script>
    </head>
    <body>
        <input type="text" value="我是input"/>
        <div>
            <li>你好</li>
        </div>
    
    
        <button>获取宽度</button>
        <button>设置宽度</button>
        <button>获取高度</button>
        <button>设置高度</button>
        <div class="box"></div>
    </body>
    </html>