jQuery----操作类样式(依托开关灯案例)
在网页开发中,元素的样式可以在style标签中定义,但是有很多案例需要添加类样式或者删除类样式,可以获取元素调用css()方法改变元素样式,但是这种方法很繁杂,本文利用开关灯案例,小结使用jquery操作类样式的方法。一共X种写法如下:
一、单一类样式的添加删除
1.$( “元素名” ).addClass( "类样式名称" );
1.$( “元素名” ).removeClass( "类样式名称" );
二、多个类样式的添加删除(链式编程)
1.$( "元素名" ).addClass( "类样式1名称" ).addClass( "类样式2名称" ).addClass( "类样式3名称" )......addClass( "类样式n名称" );
2.$( "元素名").removeClass( “类样式1名称” ).removeClass( "类样式2名称" ).removeClass( "类样式3名称" )......removeClass( "类样式n名称" );
三、removeClass( );
括号中什么也不写,是该元素的所有的样式
四、hasClass( "类样式名" );
判断元素是否包含该类样式,返回值结果为bool类型
四、toggleClass( "类样式名" );
切换该样式,即添加、删除,重复执行。
案例代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery操作类样式----开关灯案例</title>
<style type="text/css">
.blank{
background-color: black;
}
</style> <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//获取按钮,注册点击事件
$("#btn").click(function(){
//判断body是否包含.blank样式
if($("body").hasClass("blank")){
//包含------开灯,移除类样式
$(this).val("关灯");
$("body").removeClass("blank"); }else{
//不包含----关灯,添加类样式
$(this).val("开灯");
$("body").addClass("blank");
}
});
});
</script>
</head>
<body>
<input type="button" id="btn" value="关灯" />
</body>
</html>
jQuery----操作类样式(依托开关灯案例)的更多相关文章
- jQuery操作css样式
jQuery操作css样式 css操作的分类: css操作 位置操作 尺寸操作 css操作之css css代码: html代码: jQuery代码: 效果如下: css操作之位置操作 css代码: h ...
- jquery操作css样式的方法
jquery操作css样式的方法(设置和获取)
- JQuery操作类数组的工具方法
JQuery学习之操作类数组的工具方法 在很多时候,JQuery的$()函数都返回一个类似数据的JQuery对象,例如$('div')将返回div里面的所有div元素包装的JQuery对象.在这中情况 ...
- jQuery操作标签--样式、文本、属性操作, 文档处理
1.样式 2.文本 3.属性操作 全选,反选效果 4.文档处理 操作标签 一.样式操作 样式类: addClass(); // 添加指定的css类名 removeClass(); //移除指定的css ...
- jquery操作CSS样式全记录
$(this).click(function(){ if($(this).hasClass(“zxx_fri_on”)){ $(this).removeClass(“zxx_fri_on”); ...
- jquery 操作table样式拖动参考
参考: http://blog.csdn.net/kdiller/article/details/6059727 http://www.jb51.net/article/59795.htm
- jQuery组织您钞四----jQuery操作DOM
一.采用jQuery创建节点 节点是DOM基础设施.依据DOM产品规格,Node是一个很宽泛的概念,包含元素.属性.正文.档..实际开发过程中,要创建动态内容,主要操作的节点包括元素. 属性和文本. ...
- jQuery对标签、类样式、值、文档、DOM对象的操作
jquery的标签属性操作 使用attr()方法对html标签属性进行操作,attr如果参数是一个参数,表示获取html标签的属性值,如果是两个参数则是设置标签属性名以及对象的属性值 .prop()适 ...
- jQuery操作标签
jQuery操作标签 样式操作: 对标签的样式进行修改,那么操作样式的方法是什么? 样式类: addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类名 ...
随机推荐
- Android开发各种Utils收集库
为方便查找,已进行大致归类,其目录如下所示: Activity相关→ActivityUtils.java→Demo isActivityExists : 判断是否存在Activity launchAc ...
- OnCreateContextMenuListener接口简介
OnCreateContextMenuListener接口是用来处理上下文菜单显示事件的监听接口.该方法是定义和注册上下文菜单的另一种方式.该接口中事件处理的回调方法签名如下所示. public vo ...
- 自定义RatingBar评分控件
1.介绍 实现类似美团外卖评分供能,系统提供了RatingBar,今天来自定义一波,当做自定义view的一个学习,效果如下,能够滑动或者点击变化星星数量 2.自定义属性 在values目录下的attr ...
- iPhone 应用开发的5个贴士
[编者按]本文作者为来自 Redbytes Software 的开发者 James Richard,主要介绍开发 iPhone 应用过程中大有益处的五个贴士.文章系国内 ITOM 管理平台 OneAP ...
- phantomJs页面操作
因为phantomjs能加载和操纵页面,它可以自动化地完美执行页面的各种操作. 操作文档: 脚本的被执行,就像它真的正在web 浏览器上运行一样. 下面的脚本,是读取元素id为myagent的文本内容 ...
- linux下postgresql的安装与卸载
安装: sudo apt-get update sudo apt-get install postgresql 启动: sudo /etc/init.d/postgresql start 查看是否启动 ...
- ASM Disk Discovery 最佳实践
ASM DISK 的Discovery PATH ASM实例的ASM_DISKSTRING初始化参数使用一个逗号分割的字符串限制ASM实例发现的DISK可以用于ASM DISK, 该字符串支持通配符如 ...
- [翻译] FBNetworkReachability
FBNetworkReachability You can use FBNetworkReachabilty class to get network reachability on iOS devi ...
- CMD命令行窗口 复制黏贴
1.在cmd命令窗口空黑处,单击鼠标右键——选择[标记]——单击鼠标左链拖动选择要复制的文字,[再按一下Eenter键]就完成了命令的复制了. 2.粘贴就更简单了,窗口内单击右键——选择[粘贴],就将 ...
- java开发初识
jdk目录相关介绍: bin:存放的是java的相关开发工具 db:顾名思义jre附带的轻量级数据库 include:存放的是调用系统资源的接口文件 jre:java的运行环境 lib:核心的类库 s ...