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

网络编程 2024/9/28 佚名

3 2 1

无为清净楼资源网 Design By www.qnjia.com

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

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>jQuery-Attributes-2</title> <style type="text/css"> .div { width:95%; margin-left:15px; margin-top:15px; margin-right:15px; padding-left:5px; padding-top:5px; padding-bottom:5px; background-color:#ccc; border:#999 1px solid; line-height:30px; font-size:13px; font-family:微软雅黑; } .blue{color:Blue;} .green{color:Green;} .button{border:green 1px solid;width:100px;} .xiaobiao{ font-weight:bold;} .red_test{background-color:red; color:White; width:300px; height:30px;} .li_test{border:#000 1px solid;} .redBorder{border:Red 1px solid; padding:1px;} </style> </head> <body> jQuery-Attributes(属性)的使用( 二、类篇) 本系列文章主要讲述jQuery框架的属性(Attributes)使用方法，我将以实例方式进行讲述，以简单，全面为基础，不会涉及 很深，我的学习方法：先入门，后进阶！ 本系列文章分为：属性篇、类篇、Html代码篇、文本篇、值篇共5篇文章。 本篇讲解：addClass(class),removeClass(class),toggleClass(class)的用法。 您对本系列文章有任何建议或意见请发送到邮箱：sjzlgt@qq.com 您可以到jQuery官网来学习更多的有关jQuery知识。 版权所有：code-cat 博客:http://www.cnblogs.com/bynet 转载请保留原作者、出处和版权信息！ 1. addClass(class)用法 定义：为每个匹配的元素添加指定的类名。 返回值：Object 参数：class (String) : 一个或多个要添加到元素中的CSS类名，多个请用空格分开 实例：将ID为"div_a1"的DIV中第所有图片加上 'redBorder' 类 。 代码： $("#div_a1 img").addClass("redBorder"); //点击按钮一看效果 DIV ID="div_a1" <a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/logo_small.gif');"><img src="/UploadFiles/2021-04-02/logo_small.gif" alt="jQuery Attributes(属性)的使用(二、类篇)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> <a href="javascript:;" onclick="showimg('http://news.cnblogs.com/images/logo/yahoo.gif');"><img src="http://news.cnblogs.com/images/logo/yahoo.gif" alt="jQuery Attributes(属性)的使用(二、类篇)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> <input type="button" id="btn_1" value="按钮一" class="button" /> 2. removeClass(class)用法 定义：从所有匹配的元素中删除全部或者指定的类。 返回值：Object 参数：class (String) : (可选) 一个或多个要删除的CSS类名，多个请用空格分开 实例：将ID为"div_b1"的DIV中第所有图片删除 'redBorder' 类 。 代码： $("#div_b1 img").removeClass("redBorder"); //点击按钮二看效果 DIV ID="div_b1" <a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/logo_small.gif');"><img src="/UploadFiles/2021-04-02/logo_small.gif" alt="jQuery Attributes(属性)的使用(二、类篇)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> <a href="javascript:;" onclick="showimg('http://news.cnblogs.com/images/logo/yahoo.gif');"><img src="http://news.cnblogs.com/images/logo/yahoo.gif" alt="jQuery Attributes(属性)的使用(二、类篇)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> <input type="button" id="btn_2" value="按钮二" class="button" /> 3. toggleClass(class)用法 定义：如果存在（不存在）就删除（添加）一个类。 返回值：Object 参数：class (String) :CSS类名 实例：将ID为"div_c1"的DIV中第所有图片切换 'redBorder' 类 。 代码： $("#div_c1 img").toggleClass("redBorder"); //点击按钮三看效果 DIV ID="div_c1" <a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/logo_small.gif');"><img src="/UploadFiles/2021-04-02/logo_small.gif" alt="jQuery Attributes(属性)的使用(二、类篇)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> <a href="javascript:;" onclick="showimg('http://news.cnblogs.com/images/logo/yahoo.gif');"><img src="http://news.cnblogs.com/images/logo/yahoo.gif" alt="jQuery Attributes(属性)的使用(二、类篇)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> <input type="button" id="btn_3" value="按钮三" class="button" /> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

源码打包下载

jQuery,Attributes,属性

标签：

jQuery,Attributes,属性

无为清净楼资源网 Design By www.qnjia.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

无为清净楼资源网 Design By www.qnjia.com

评论“jQuery Attributes(属性)的使用(二、类篇)”

暂无评论...

www.qnjia.com 无为清净楼资源网

139,976互联网资源

144,792高清电影

21,817无损音乐

631,128技术资源

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

jQuery,Attributes,属性

Javascript document.referrer判断访客来源网址

textbox 在光标位置插入字符功能的js实现(兼容ie,firefox)

评论“jQuery Attributes(属性)的使用(二、类篇)”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

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

jQuery,Attributes,属性

Javascript document.referrer判断访客来源网址

textbox 在光标位置插入字符功能的js实现(兼容ie,firefox)

评论“jQuery Attributes(属性)的使用(二、类篇)”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存