js进阶 11-4/5 jquery中css的类的操作有哪些
js进阶 11-4/5 jquery中css的类的操作有哪些
一、总结
一句话总结：jquery中css的类的操作有增删切三种。
1、jquery中css的类的操作有哪些？
增删切三种
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
39 $('li').toggleClass('red')
2、jquery中的切换是哪个单词？
toggle
39 $('li').toggleClass('red')
3、css的类的操作中toggleClass切换是什么意思？
38 $('#btn3').click(function(){
39 $('li').toggleClass('red')
40 //所谓"切换"，就是如果该元素上已存在指定的类名，则移除掉；如果不存在，则添加该类名。
4、jquery中如何添加或删除多个类，类中间的符号是什么？
空格，和属性class中的多个类的写法一样
33 $('li').addClass('red w opa')
5、toggleClass切换的三种形式？
toggleClass() - 对被选元素进行添加/删除类的切换操作
$(selector).toggleClass(classname,function(index,currentclass),switch)
- classname 必需。规定添加或移除的一个或多个类名。如需规定若干个类，请使用空格分隔类名。
- function(index,currentclass) 可选。规定返回需要添加/删除的一个或多个类名的函数。
- index - 返回集合中元素的 index 位置。
- currentclass - 返回被选元素的当前类名。
- switch 布尔值，规定是否仅仅添加（true）或移除（false）类。
a、变频切换
37 count++
38 alert(count)
39 $('li').toggleClass('red',count%3==0)
b、详细制定切换
42 $('li').toggleClass(function(index,className){
43 alert(className+(index+1))
44 return className+(index+1)
45 })
c、单一切换
49 //$('li').toggleClass('red',false)
二、jquery中css的类的操作有哪些
1、相关知识
CSS类操作
在jQuery中，类名操作包括：添加类名、删除类、切换类这3种情况
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
$(selector).toggleClass(classname,function(index,currentclass),switch)
- classname 必需。规定添加或移除的一个或多个类名。如需规定若干个类，请使用空格分隔类名。
- function(index,currentclass) 可选。规定返回需要添加/删除的一个或多个类名的函数。
- index - 返回集合中元素的 index 位置。
- currentclass - 返回被选元素的当前类名。
- switch 布尔值，规定是否仅仅添加（true）或移除（false）类。
2、代码
11-4
<!DOCTYPE html>
<html lang="en">
<style>
</style>
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<style>
li{margin-top: 10px}
.red{background: red;}
.blue{background: blue;}
.orange{background: orange}
.w{width: 200px}
.opa{opacity: 0.5}
</style>
</style>
</head>
<body> <ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<input id="btn1" type="button" value="添加类">
<input id="btn2" type="button" value="删除类">
<input id="btn3" type="button" value="切换类"> <script type="text/javascript">
$(function(){
$('#btn1').click(function(){
$('li').addClass('red w opa')
})
$('#btn2').click(function(){
$('li').removeClass('opa w red')
})
$('#btn3').click(function(){
$('li').toggleClass('red')
//所谓"切换"，就是如果该元素上已存在指定的类名，则移除掉；如果不存在，则添加该类名。
})
})
</script>
</body>
</html>
11-5
<!DOCTYPE html>
<html lang="en">
<style>
</style>
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<style>
li{margin-top: 10px}
.li_1{background: red;}
.li_2{background: blue;}
.li_3{background: orange}
.red{background: red;}
.blue{background: blue;}
.orange{background: orange}
.w{width: 200px}
.opa{opacity: 0.5}
</style>
</style>
</head>
<body> <ol>
<li class="li_"></li>
<li class="li_"></li>
<li class="li_"></li>
</ol>
<input id="btn1" type="button" value="切换类1">
<input id="btn2" type="button" value="切换类2">
<input id="btn3" type="button" value="切换类3">
<script type="text/javascript">
$(function(){
var count=0;
$('#btn1').click(function(){
//$('li').toggleClass('red',true)
count++
alert(count)
$('li').toggleClass('red',count%==)
})
$('#btn2').click(function(){
$('li').toggleClass(function(index,className){
alert(className+(index+1))
return className+(index+)
})
}) $('#btn3').click(function(){
//$('li').toggleClass('red',false)
})
})
</script>
</body>
</html>
js进阶 11-4/5 jquery中css的类的操作有哪些的更多相关文章
- js进阶 11-3 jquery中css属性如何操作
js进阶 11-3 jquery中css属性如何操作 一.总结 一句话总结:通过css()方法 1.attr和css是有交叉的,比如width,两者中都可以设置,那么他们的区别是什么? 其实通俗一点 ...
- Javascript Jquery 中的数组定义与操作_子木玲_新浪博客
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- JQuery中的工具类（五）
一:1.serialize()序列表表格内容为字符串.返回值jQuery示例序列表表格内容为字符串,用于 Ajax 请求. HTML 代码:<p id="results"&g ...
- Jquery中css()方法获取边框长度
1. JQuery中可以使用css()方法获取块元素的边框宽度,如下: $("divMode").css("border-left-width");//左边框长 ...
- 前端开发入门到进阶附录一【JQuery中parent()，parents()，parentsUntil()区别和使用技巧】
JQuery中parent(),parents(),parentsUntil()区别和使用技巧:https://blog.csdn.net/china1223/article/details/5193 ...
- jquery中css获取颜色属性
Jquery获取颜色的方法为: var color = $(元素).css("color"); alert(color); 可以看到color如这样的格式; 但是; 因为rgb(0 ...
- Javascript Jquery 中的数组定义与操作
1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多维数组,但是因为数组里面可以包含对象(数组也是一个对象),所以数组可以通过相互嵌套实现类似多维数 ...
- 日期类的加减及java中所以日期类的操作算法大全
1.计算某一月份的最大天数 1Calendar time=Calendar.getInstance();2time.clear();3time.set(Calendar.YEAR,year); //y ...
- js进阶 11-1 jquery中的页面内容操作的三个方法
jquery中的页面内容操作的三个方法 一.总结 一句话总结:记三个方法即可.text,html,val.因为这里是方法,所以设置值的是后面方法的参数. 1.jquery中的页面内容操作的三个方法? ...
随机推荐
- BZOJ2118: 墨墨的等式（最短路构造/同余最短路）
Description 墨墨突然对等式很感兴趣,他正在研究a1x1+a2y2+…+anxn=B存在非负整数解的条件,他要求你编写一个程序,给定N.{an}.以及B的取值范围,求出有多少B可以使等式存在 ...
- Linux启动过程总结
当我们按开机键后,主机就会执行: 1.POST(Power-On Self Test 加电自检). 2.读取BIOS中定义的开机设备启动程序,并加载MBR(主引导记录(Master Boot Reco ...
- Spring学习总结（8）——25个经典的Spring面试问答
1.什么是Spring框架?Spring框架有哪些主要模块? Spring框架是一个为Java应用程序的开发提供了综合.广泛的基础性支持的Java平台.Spring帮助开发者解决了开发中基础性的问题, ...
- Android 手机插入电脑后提示“”ADB Interface"安装失败的问题
安装ADB Interface 1. Android Studio开发时,如果在真机上测试并不是那么的顺利.直接将手机插入电脑,并不能识别.往往提示ADB Interface驱动未安装.如下图所示. ...
- 【hihocoder 1562】⼩Hi的钟表
[链接]点击打开链接 [题意] 在这里写题意 [题解] 时针每过1分钟转0.5°. (360/(12*60)) 分钟每过1分钟转6° (360/60); 根据这个就能算出时针和分针的角度之差了. [错 ...
- 【Codeforces Round #431 (Div. 2) A】Odds and Ends
[链接]点击打开链接 [题意] 让你把一个数组分成奇数个部分. 且每个部分的长度都是奇数. [题解] 很简单的脑洞题. 开头和结尾一定要为奇数,然后 n为奇数的话,就选整个数组咯. n为偶数的话,不能 ...
- 【COGS1672】【SPOJ375】QTREE
这是我的第一个边权链剖 COGS上和SPOJ有点不一样就是没有多组数据了本质还是一样的 我写的是COGS那个事实上改一改就能够去SPOJ AC了= -= (但是我如今上不去SPOJ卧槽(╯‵□′)╯︵ ...
- opencv cvtColor dtype issue(error: (-215) )
opencv cvtColor dtype issue(error: (-215) ) 更详细的错误信息如下,color.cpp:9710: error: (-215) depth == CV_8U ...
- vue-cli 构建vue项目
师父说,咱们还是要用vue-cli 去构建前端项目.然后我就开始了 懵逼之旅. 今天上午主要就是搞懂用webpack和vue-cli怎么搭建 运行项目 首先找到了咱们博客园 园友的博客,提供了大概五个 ...
- Declarative Widgets is a QML plugin that adds Qt Widgets support to QML
05.04.2018 Nathan Collins 8 comments FacebookTwitterGoogle+LinkedInEmail Declarative Widgets is a ...