使用 jquery 可以很方便的添加或刪除 html 元素的class屬性的值,以實現各種炫彩的動態效果。這篇文章就來說一說,幾種使用 jq 來操作 html 元素class屬性的方法。

jq addClass() 方法

国产视频app jq 的 addClass() 方法,可以向一個指定的 html 元素的 class 屬性中添加一個屬性值

示例:

<!--html代碼-->
<div id="mochu" class="div1"></div>
<script>
    $('#mochu').addClass('div2');
</script>

運行結果:

jq addClass() 方法

jq removeClass() 方法

国产视频app jq removeClass() 方法,可以將指定 html 元素中的某個 class 屬性值刪除掉

示例:

<!--html代碼-->
<div id="mochu" class="div div1"></div>
<script>
    $('#mochu').removeClass('div');
</script>

結果如下圖:

jq removeClass() 方法

jq hasClass() 方法

国产视频app jq hasClass() 方法,用于判斷某個 html 元素的 class 屬性中是否含有某個值,如果有返回 true ,如果不存在返回 false

示例:

<!--html代碼-->
<div id="mochu" class="vdiv"></div>
<script>
    var bool = $('#mochu').hasClass('vdiv');
    console.log(bool);
</script>

返回結果; true

jq 修改class屬性的值

在jq中沒有給出修改class屬性值的方法函數,但是我們可以把要修改的屬性值以先去除,再添加的形式來實現 class 屬性值的修改

示例:

<div id="mochu" class="div"></div>
<script>
    $('#mochu').removeClass('div').addClass('head');
</script>

運行結果:

jq 修改class屬性的值

擴展閱讀:

js獲取和設置DIV元素class值的方法