jQuery属性操作之类样式操作
类样式的操作：指对DOM属性className进行添加、移除操作。比如addClass()、removeClass()、toggleClass()。
1. addClass()
1.1 概述
$(selector).addClass(className)
className
类型： String
为每个匹配元素所要增加的一个或多个样式名
返回值：jQuery
描述： 为每个匹配的元素添加指定的样式类名
1.2 为匹配到的元素添加指定类名
格式为： $(selector).addClass("className");
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>addClass Demo</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function () {
$("div").addClass("divClass2");
})
</script>
</head>
<body>
<div class="divClass1"></div>
</body>
</html>
1.3 为匹配到的元素添加多个类名
格式为：
＄(selector).addClass("className1 className2")
示例代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>addClass() Demo</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function () {
$("div").addClass("divClass1 divClass2")
})
</script>
</head>
<body>
<div></div>
</body>
</html>
2. removeClass()
从所有匹配的元素中删除全部或者指定的类
2.1 移除指定的单个类
格式： $(selector).removeClass("className");
示例代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>removeClass Demo</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function () {
$("div").removeClass("className1");
$("div").removeClass("className2");
})
</script>
</head>
<body>
<div class="className1 className2"></div>
</body>
</html>
2.2 移除指定的多个类
格式： $(selector).removeClass("className1 className2");
示例代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>removeClass() Demo</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function () {
$("div").removeClass("className1 className2");
})
</script>
</head>
<body>
<div class="className1 className2"></div>
</body>
</html>
2.3 移除全部的类
格式:
$(selector).removeClass();
示例代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>removeClass() Demo</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function () {
$("div").removeClass();
})
</script>
</head>
<body>
<div class="className1 className2"></div>
</body>
</html>
2.4 removeClass()案例， 解决“排他”问题
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>removeClass() Demo</title>
<style type="text/css">
.active{
color: red;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function () {
$("ul li").click(function () {
$(this).addClass("active").siblings("li").removeClass("active");
})
})
</script>
</head>
<body>
<ul>
<li class="item">This is the first line.</li>
<li class="item">This is the second line.</li>
<li class="item">This is the third line.</li>
<li class="item">This is the fourth line.</li>
</ul>
</body>
</html>
3. toggleClass()
作用： 如果存在（不存在）就删除（添加）一个类
格式： $(selector).toggleClass("className");
示例代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>toggleClass() Demo</title>
<style type="text/css">
.active{
color: red;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function () {
$("p").click(function () {
$("p").toggleClass("active");
});
})
</script>
</head>
<body>
<p>This is the test.</p>
</body>
</html>
jQuery属性操作之类样式操作的更多相关文章
- JQuery DOM操作 、属性和CSS样式操作、其他函数
DOM操作 1.在div1内部最后追加一个节点 $("#div1").append("<img src='../01-HTML基本标签/img/Male.gif'/ ...
- jQuery学习之旅 Item3 属性操作与样式操作
本节将Dom元素的操作:属性操作.样式操作.设置和获取HTML,文本和值.Css-Dom操作. 1.属性操作 <input type="text" name="us ...
- jquery系列教程2-style样式操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...
- jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax
jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...
- jQuery 效果函数，jquery文档操作，jQuery属性操作方法，jQuerycss操作函数，jQuery参考手册-事件，jQuery选择器
jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...
- jQuery属性遍历、HTML操作
jQuery 拥有可操作 HTML 元素和属性的强大方法. jQuery 遍历函数 jQuery 遍历函数包括了用于筛选.查找和串联元素的方法. .add() 将元素添加到匹配元素的集合中. . ...
- jQuery基础-选择器，样式操作
入口函数:ready() 当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件. 由于该事件在文档就绪后发生,因此把所有其他的 jQuery 事件和函数置 ...
- 6、前端--DOM操作（查找标签、节点操作、获取值操作、class操作、样式操作、绑定事件、内置参数this）
DOM操作之查找标签 前缀关键字>>>:document # 基本查找(核心) document.getElementById 根据ID获取一个标签 document.getElem ...
- jQuery入门教程-CSS样式操作大全
1.获取样式 2.设置样式 3.追加样式 4.移除样式 5.重复切换anotherClass样式 6.判断是否含有某项样式 7.设置 CSS 属性 参数 描述 name 必需.规定 CSS 属性的名称 ...
随机推荐
- LeetCode面试常见100题（ TOP 100 Liked Questions）
LeetCode面试常见100题( TOP 100 Liked Questions) 置顶 2018年07月16日 11:25:22 lanyu_01 阅读数 9704更多 分类专栏: 面试编程题真题 ...
- 区间dp 整数划分问题
整数划分(四) 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 暑假来了,hrdv 又要留学校在参加ACM集训了,集训的生活非常Happy(ps:你懂得),可是他最近 ...
- 空格 ACSII码 160 32
ascii160和ascii32都表示空格,但是在IE里,160就不是显示空格,firefox里会显示空格,32不管是firefox里,还是IE里都显示空格.
- O049、准备 LVM Volume Provider
参考https://www.cnblogs.com/CloudMan6/p/5597790.html Cinder 真正负责volume 管理的组件是 volume provider .Cinde ...
- S=a+aa+aaa...(js）
/*求s=a+aa+aaa+aaaa+aa...a的值,其中a是一个数字. 例如2+22+222+2222+22222(此时共有5个数相加),几个数相加有键盘控制.*/ let readline = ...
- call，apply和bind的秒懂区别
对象.方法(); 谁调用该方法this就指向谁. call()语法: call()精华: 让一个函数成为指定对象的方法进行调用. Person.call(document); //等价于 docume ...
- (转)Android刷机的一些知识整理
刷机概述刷机原因刷机可以升级和破解固件(在Android上:即可以升级系统,更改系统,获取Root权限):破解系统的原因①安装第三方软件不需要签名,不受证书的束缚:②修改系统的文件,达到系统的瘦身,以 ...
- HBuilderX 打包
新建 - 云打包 (密钥 密码看不到 - 回车) ( ) BlueStacks蓝叠 模拟器看效果
- 织梦dedecms自定义功能函数(1)：调用body中的图片(可多张)
前言 岛主会整理或者开发一系列常用功能函数.所有自定义功能函数都是放在\include\extend.func.php文件里. 这次织梦自定义功能函数功能为:独立提取 body字段中(可以是自定义字段 ...
- js对象的所有方法
Object构造方法 Object.assign() 将所有可枚举的自身属性的值从一个或多个源对象复制到目标对象. Object.create() 用指定的原型对象和属性创建一个新对象. Object ...