当前位置：首页 > 资讯 > 技术文档

jQuery Attributes(属性)的使用(二、类篇)

时间：2022-05-14 05:27 编辑：来源：阅读：
扫一扫，手机访问

摘要：jQuery Attributes(属性)的使用(二、类篇)

本系列文章分为：属性篇、类篇、Html代码篇、文本篇、值篇共5篇文章。
本篇讲解：addClass(class),removeClass(class),toggleClass(class)的用法。
您对本系列文章有任何建议或意见请发送到邮箱：sjzlgt@qq.com
您可以到jQuery官网来学习更多的有关jQuery知识。
[b]. addClass(class)用法
[/b]定义：为每个匹配的元素添加指定的类名。
返回值：Object
参数：class (String) : 一个或多个要添加到元素中的CSS类名，多个请用空格分开
实例：将ID为"div_a1"的DIV中第所有图片加上 'redBorder' 类。
代码：$("#div_a1 img").addClass("redBorder");

[b]2. removeClass(class)用法[/b]
定义：从所有匹配的元素中删除全部或者指定的类。
返回值：Object
参数：class (String) : (可选) 一个或多个要删除的CSS类名，多个请用空格分开
实例：将ID为"div_b1"的DIV中第所有图片删除 'redBorder' 类。
代码：$("#div_b1 img").removeClass("redBorder");

[b]3. toggleClass(class)用法[/b]
定义：如果存在（不存在）就删除（添加）一个类。
返回值：Object
参数：class (String) :CSS类名
实例：将ID为"div_c1"的DIV中第所有图片切换 'redBorder' 类。代码： $("#div_c1 img").toggleClass("redBorder");

运行后，需要刷新一下，以便加载jquery

jQuery-Attributes-2

<div class="div"> 
<div style="width:100%; text-align:center; font-size:16px; font-weight:bold;">jQuery-Attributes(属性)的使用( 
二、类篇)</div> 
本系列文章主要讲述jQuery框架的属性(Attributes)使用方法，我将以实例方式进行讲述，以简单，全面为基础，不会涉及 
很深，我的学习方法：先入门，后进阶！
</br> 
本系列文章分为：属性篇、类篇、Html代码篇、文本篇、值篇共5篇文章。
</br> 
本篇讲解：addClass(class),removeClass(class),toggleClass(class)的用法。
</br> 
您对本系列文章有任何建议或意见请发送到邮箱：sjzlgt@qq.com
</br> 
您可以到[url=http://jquery.com/]jQuery官网[/url]来学习更多的有关jQuery知识。
</br> 
<span style="color:Red;">[b]版权所有：code-cat 博客:[url=http://www.cnblogs.com/bynet/]http://www.cnblogs.com/bynet[/url] 转载请保留原作者、出处和版权信息！[/b]</span> 
</div> 
<div class="div"> 
<span class="xiaobiao">1. addClass(class)用法</span>
</br> 
定义：为每个匹配的元素添加指定的类名。
</br> 
返回值：Object
</br> 
参数：class (String) : 一个或多个要添加到元素中的CSS类名，多个请用空格分开
</br> 
实例：将ID为"div_a1"的DIV中第所有图片加上 'redBorder' 类 。
</br> 
<span style="border:blue 1px solid;">代码： $("#div_a1 img").addClass("redBorder");<span style="color:green;"> 
//点击按钮一看效果</span></span> 
<div id="div_a1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;"> 
DIV ID="div_a1"
</br> 
[img]http://www.cnblogs.com/images/logo_small.gif[/img]
</img> 
[img]http://news.cnblogs.com/images/logo/yahoo.gif[/img]
</img>
</br> 
<input class="button" id="btn_1" type="button" value="按钮一"></input>
</br> 
 
</div> 
</div> 
<div class="div"> 
<span class="xiaobiao">2. removeClass(class)用法</span>
</br> 
定义：从所有匹配的元素中删除全部或者指定的类。
</br> 
返回值：Object
</br> 
参数：class (String) : (可选) 一个或多个要删除的CSS类名，多个请用空格分开
</br> 
实例：将ID为"div_b1"的DIV中第所有图片删除 'redBorder' 类 。
</br> 
<span style="border:blue 1px solid;">代码： $("#div_b1 img").removeClass("redBorder");<span style="color:green;"> //点击按钮二看效果</span></span> 
<div id="div_b1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;"> 
DIV ID="div_b1"
</br> 
[img]http://www.cnblogs.com/images/logo_small.gif[/img]
</img> 
[img]http://news.cnblogs.com/images/logo/yahoo.gif[/img]
</img>
</br> 
<input class="button" id="btn_2" type="button" value="按钮二"></input>
</br> 
 
</div> 
</div>

<div class="div"> 
<span class="xiaobiao">3. toggleClass(class)用法</span>
</br> 
定义：如果存在（不存在）就删除（添加）一个类。
</br> 
返回值：Object
</br> 
参数：class (String) :CSS类名
</br> 
实例：将ID为"div_c1"的DIV中第所有图片切换 'redBorder' 类 。
</br> 
<span style="border:blue 1px solid;">代码： $("#div_c1 img").toggleClass("redBorder");<span style="color:green;"> //点击按钮三看效果</span></span> 
<div id="div_c1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;"> 
DIV ID="div_c1"
</br> 
[img]http://www.cnblogs.com/images/logo_small.gif[/img]
</img> 
[img]http://news.cnblogs.com/images/logo/yahoo.gif[/img]
</img>
</br> 
<input class="button" id="btn_3" type="button" value="按钮三"></input>
</br> 
 
</div> 
</div>

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

[url=http://xiazai.jb51.net/200912/yuanma/jQuery-Attributes-2-bynet.rar]源码打包下载[/url]

全部评论(0)

上一篇：jquery计算鼠标和指定元素之间距离的方法
下一篇：jQuery学习心得总结(必看篇)

资讯排行榜
更多>>