jQuery操作属性

最新推荐文章于 2022-10-21 13:01:51 发布

檬是柠檬的檬826

最新推荐文章于 2022-10-21 13:01:51 发布

阅读量186

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_62343228/article/details/123950948

版权

操作属性

1.读取属性值

attr(属性名)

2.修改属性值

//第一种方式
attr(key,value);
//第二种方式
attr(key,fn);
//第三种方式
attr({
	属性名1:属性值，
	属性名2:属性值，
	...
})

“key”:表示属性名。
“fn”:表示函数，将函数的属性值作为key代表的属性的值。

<body>
    <a href="https://www.baidu.com">去百度</a>
    <br><br>

    <input type="text">
    <script>
        $(function(){
            let str = $("a").attr("href");

            console.log(str);

            // $("input").attr("value","123");

            $("input").attr("value",function(){
                let s = 0;
                for(let i=1;i<=100;i++){
                    s += i;
                }
                return s;
            })
        })
    </script>
</body>

3.删除属性

remove（属性名）

操作类（class）

1.添加class属性

addClass（class属性值）

2.删除class属性

removeClass（属性名）

3.交替添加/删除class属性

toggleClass（class属性）

<style>
    .ok{
        color: red;
    }
</style>
<body>
    <p>西安邮电大学</p>
    <button id="btn1">变色</button>
    <button id="btn2">取消</button>
    <button id="btn3">交替</button>
    <button id="btn4">点击三次添加</button>
</body>
<script>
    $(function(){
        $("#btn1").click(function(){
            $("p").addClass("ok")
        })

        $("#btn2").click(function(){
            $("p").removeClass("ok");
        })

        $("#btn3").click(function(){
            $("p").toggleClass("ok");
        })

        var count = 0;
        $("#btn4").click(function(){
            $("p").toggleClass("ok",++count % 3 === 0)
        })
    })
</script>

操作CSS样式

1.获取CSS属性值

css("样式属性名")

<body>
    <p style="color: red;font-size: 25px;">西安邮电大学</p>
</body>
<script>
    let c = $("p").css("color");
    let f = $("p").css("font-size");
    console.log(c,f);
</script>

2.设置CSS属性值

//一次设置一个值
css("属性名","属性值")

//一次设置多个值
css({
	"属性名"："属性值"，
	...
})

设置/获取元素的width和height属性

1.获取width/height

width()

height()

2.设置width/height

width(val)

height(val)

<body>
    <div></div>
</body>
<script>
    $(function(){
        $("div").width(300);
        $("div").height(200);
        $("div").css("backgroundColor","red");
    })
</script>

操作元素的内容

1.获取内容

html()

<body>
    <div>西安</div>
</body>
<script>
    $(function(){
        console.log($("div").html());
    })
</script>

2.设置内容

html(val)

<body>
    <p>西安</p>
    <div></div>

</body>
<script>
    $(function(){
        console.log($("p").html());
        $("div").html("<b>西游记</b>");
    })
</script>

操作值

1.获取值

val()

2.设置值

val(值)

<body>
    <input type="text">

</body>
<script>
    $(function(){
        $("input").val("AAAAA")
        console.log($("input").val());
    })
</script>