夏日的草原,早晨空气格外清新,我缠着父亲在草原上漫步。幽幽的草香迎面拂来,红艳艳。朝阳正从地平线上冉冉升起,为辽阔的草原镀上一层金色。草叶上的露珠,像镶在翡翠上的珍珠,闪着五颜六色的光华。我看到草丛中夹着许多粉红色、白色、黄色或是蓝色的不知名的花,把草原装扮得十分美丽。
使用 jquery 可以很方便的添加或删除 html 元素的class属性的值,以实现各种炫彩的动态效果。这篇文章就来说一说,几种使用 jq 来操作 html 元素class属性的方法。
jq addClass() 方法
jq 的 addClass() 方法,可以向一个指定的 html 元素的 class 属性中添加一个属性值
示例:
<!--html代码--> <div id="mochu" class="div1"></div> <script> $('#mochu').addClass('div2'); </script>
运行结果:
jq removeClass() 方法
jq removeClass() 方法,可以将指定 html 元素中的某个 class 属性值删除掉
示例:
<!--html代码--> <div id="mochu" class="div div1"></div> <script> $('#mochu').removeClass('div'); </script>
结果如下图:
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值的方法
以上就是jquery操作class属性的方法。永远比对手快一步。更多关于jquery操作class属性的方法请关注haodaima.com其它相关文章!