jquery如何改变div的class属性

魁首哥

作者

jquery如何改变div的class属性

这篇“jquery如何改变div的class属性”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“jquery如何改变div的class属性”文章吧。

改变方法：1、使用“$("div").addClass("class属性值")”语句；2、使用“$("div").attr("class","值")”语句；3、使用“$("div").removeClass("class属性值")”语句。

本教程操作环境：windows7系统、jquery1.10.2版本、Dell G3电脑。

jquery改变div的class属性

方法1：使用addClass() 方法

addClass() 方法向被选元素添加一个或多个类。

该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。

示例：

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><scriptsrc="js/jquery-1.10.2.min.js"></script><scripttype="text/javascript">$(document).ready(function(){$("button").click(function(){$("div").addClass("intro");});});</script><styletype="text/css">.intro{font-size:120%;color:red;}</style></head><body><h2>这是一个h2大标题</h2><div>这是一个div段落</div><p>这是一个p段落</p><button>向div元素添加一个类</button></body></html>

方法2：使用attr() 方法

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><scriptsrc="js/jquery-1.10.2.min.js"></script><scripttype="text/javascript">$(document).ready(function(){$("button").click(function(){$("div").attr("class","intro");});});</script><styletype="text/css">.intro{font-size:120%;color:pink;}</style></head><body><h2>这是一个h2大标题</h2><div>这是一个div段落</div><p>这是一个p段落</p><button>向div元素添加一个类</button></body></html>

方法3：使用removeClass() 方法

removeClass() 方法从被选元素移除一个或多个类。

注释：如果没有规定参数，则该方法将从被选元素中删除所有类。

示例：

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><scriptsrc="js/jquery-1.10.2.min.js"></script><scripttype="text/javascript">$(document).ready(function(){$("button").click(function(){$("div").removeClass("intro");});});</script><styletype="text/css">.intro{font-size:120%;color:pink;}</style></head><body><h2>这是一个h2大标题</h2><divclass="intro">这是一个div段落</div><p>这是一个p段落</p><button>去除div元素的类</button></body></html>