用jQuery操作属性

一、attr—普通属性

1.设置单个属性

<input type="button" value="按钮">
<img src="hui.jpg">
<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        //样式：在style里面写的，用css来操作。
        //属性：在html里面写的，用attr方法操作。
        //用法和css一样
        $("input").click(function () {
            $("img").attr("title", "hui");
            $("img").attr("alt", "hui");
        });
    });
</script>

2.设置多个属性

<input type="button" value="按钮">
<img src="hui.jpg">
<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        //用法和css一样
        $("input").click(function () {
            $("img").attr({
                "alt": "hui",
                //设置自定义属性
                "aa": "AA"
            });
        });
    });
</script>

3.获取属性

<input type="button" value="按钮">
<img src="hui.jpg" alt="hui" title="灰太狼">
<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        //用法和css一样
        $("input").click(function () {
            console.log($("img").attr("alt"));
            console.log($("img").attr("title"));
        });
    });
</script>

二、prop—对于布尔类型的属性

对于布尔类型的属性，不要attr方法，应该用prop方法 prop用法跟attr方法一样

<input type="button" value="选中">
<input type="button" value="不选中">
<input type="checkbox" id="ck">
<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        //对于布尔类型的属性，不要attr方法，应该用prop方法 prop用法跟attr方法一样。
        $("input").eq(0).click(function () {
            $("#ck").prop("checked", true);
        });
        $("input").eq(1).click(function () {
            $("#ck").prop("checked", false);
        });
    });
</script>

三、removeAttr—移除属性

<input type="button" value="移除">
<img src="hui.jpg" alt="hui" title="灰太狼">
<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        $("input").click(function () {
            //移除alt属性
            $("img").removeAttr("alt");
        });
    });
</script>