Attributes

Posted on Edited on In Views: Disqus:

 

一、.addClass()

新增 class 的屬性值。

語法：.addClass( value )

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>

<body>
    <p>Hello</p>
    <script>
        $("p").addClass("foo");
    </script>
</body>

</html>

執行結果為

 

二、.removeClass()

移除 class 的屬性值。

語法：.removeClass( [value ] )

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>

<body>
    <p class="foo zoo">Hello</p>
    <script>
        $("p").removeClass("foo");
    </script>
</body>

</html>

執行結果為

 

三、.toggleClass()

當該屬性值存在時，就把他拿掉；當該屬性值不存在時，就把他加上去。

語法：.toggleClass( value )

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>

<body>
    <p class="foo">Hello</p>
    <script>
        $("p").toggleClass("foo");
    </script>
</body>

</html>

執行結果為

再執行一次

$("p").toggleClass("foo");

執行結果為

 

四、.hasClass()

判斷一屬性是否有指定的屬性值。

語法：.hasClass( value )

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>

<body>
    <p class="foo">Hello</p>
    <script>
        console.log($("p").hasClass("foo"));
    </script>
</body>

</html>

執行結果為 true。

 

五、.attr()

取得或設定一屬性的屬性值。

Get：

.attr( attributeName )

Set：

.attr( String attributeName, Value value )

.attr( PlainObject attributes )

.attr( String attributeName, Function function )

 

Get：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>

<body>
    <p class="foo" zoo="monkey">Hello</p>
    <script>
        console.log($("p").attr("zoo"));
    </script>
</body>

</html>

執行結果為

 

Set：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>

<body>
    <p class="foo" zoo="monkey">Hello</p>
    <script>
        $("p").attr("friut", "apple");
    </script>
</body>

</html>

執行結果為

 

六、.removeAttr()

移除一屬性。

語法為：.removeAttr( attributeName )

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>

<body>
    <p class="foo" zoo="monkey">Hello</p>
    <script>
        $("p").removeAttr("zoo");
    </script>
</body>

</html>

執行結果為

 

七、.prop()

用法請參考 .attr()與.prop()的差異

八、.removeProp()

用法請參考 .attr()與.prop()的差異

 

九、.html()

 

十、.val()

請參考Manipulation-General Attributes的第五項。