jquery操作class属性的方法

  • Post author:
  • Post category:其他


使用 jquery 可以很方便的操作div元素的class属性的值,以实现各种炫彩的动态效果。这篇文章就来说一说,几种使用 jq 来操作 div 元素class属性的方法。



jq addClass() 方法

jq 的 addClass() 方法,可以向一个指定的 html 元素的 class 属性中添加一个属性值

示例:

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

运行结果:

在这里插入图片描述



jq removeClass() 方法

jq removeClass() 方法,可以将指定 html 元素中的某个 class 属性值删除掉

示例:

结果如下图: ![在这里插入图片描述](https://img-blog.csdnimg.cn/20191014232202376.jpg)



jq hasClass() 方法

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>

运行结果:

在这里插入图片描述

推荐阅读:


js获取和设置DIV元素class值的方法



https://www.feiniaomy.com/post/455.html