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

最新推荐文章于 2022-08-08 18:20:40 发布

原创最新推荐文章于 2022-08-08 18:20:40 发布 · 6.1k 阅读

2 ·

CC 4.0 BY-SA版权

JQuery（以及源码解读）专栏收录该内容

23 篇文章

订阅专栏

本文通过实例展示了如何使用jQuery来操作DOM元素及其属性，包括获取和设置文本、HTML内容及输入框值，同时还演示了如何获取和设置元素的高度与宽度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>