jQuery属性操作之类样式操作
2024-10-01 08:23:19
类样式的操作：指对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>
最新文章
- log4net 添加日志
- win7使用自带资源管理器来登陆FTP
- 升级到Xcode8.2.1（Swift 2.3升级到3.0）
- sublime福音：微信小程序组件及API补全插件
- python2.7 爬虫_爬取小说盗墓笔记章节及URL并导入MySQL数据库_20161201
- Spring JdbcTemplate 的使用与学习(转)
- PAT乙级 1007. 素数对猜想 (20)
- EasyUI-datagrid-自动合并单元格(转)
- javascript DOM小结
- angularJs-UI-bootstrap系列教程2（According）
- 我的学习之路_第二十九章_bootstrap
- MiniProfiler工具
- Spring 3.x 读书笔记
- auto类型说明符
- 使用fiddle处理跨域
- IIS下实现帝国CMS搜索页伪静态
- vue的watcher 关于数组和对象
- 浅谈.net jenkins svn下自动化集成环境安装 搭建 配置
- FPGA---Basys3（实验内容汇总贴）
- luogu P2184 贪婪大陆