js进阶 11-4/5  jquery中css的类的操作有哪些

一、总结

一句话总结:jquery中css的类的操作有增删切三种。

1、jquery中css的类的操作有哪些?

增删切三种

  1. addClass() - 向被选元素添加一个或多个类
  2. removeClass() - 从被选元素删除一个或多个类
  3. 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)

  1. classname 必需。规定添加或移除的一个或多个类名。如需规定若干个类,请使用空格分隔类名。
  2. function(index,currentclass) 可选。规定返回需要添加/删除的一个或多个类名的函数。
    1. index - 返回集合中元素的 index 位置。
    2. currentclass - 返回被选元素的当前类名。
  3. 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种情况

  1. addClass() - 向被选元素添加一个或多个类
  2. removeClass() - 从被选元素删除一个或多个类
  3. toggleClass() - 对被选元素进行添加/删除类的切换操作

    $(selector).toggleClass(classname,function(index,currentclass),switch)

    1. classname 必需。规定添加或移除的一个或多个类名。如需规定若干个类,请使用空格分隔类名。
    2. function(index,currentclass) 可选。规定返回需要添加/删除的一个或多个类名的函数。
      1. index - 返回集合中元素的 index 位置。
      2. currentclass - 返回被选元素的当前类名。
    3. 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的类的操作有哪些的更多相关文章

  1. js进阶 11-3 jquery中css属性如何操作

    js进阶 11-3  jquery中css属性如何操作 一.总结 一句话总结:通过css()方法 1.attr和css是有交叉的,比如width,两者中都可以设置,那么他们的区别是什么? 其实通俗一点 ...

  2. Javascript Jquery 中的数组定义与操作_子木玲_新浪博客

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  3. JQuery中的工具类(五)

    一:1.serialize()序列表表格内容为字符串.返回值jQuery示例序列表表格内容为字符串,用于 Ajax 请求. HTML 代码:<p id="results"&g ...

  4. Jquery中css()方法获取边框长度

    1. JQuery中可以使用css()方法获取块元素的边框宽度,如下: $("divMode").css("border-left-width");//左边框长 ...

  5. 前端开发入门到进阶附录一【JQuery中parent(),parents(),parentsUntil()区别和使用技巧】

    JQuery中parent(),parents(),parentsUntil()区别和使用技巧:https://blog.csdn.net/china1223/article/details/5193 ...

  6. jquery中css获取颜色属性

    Jquery获取颜色的方法为: var color = $(元素).css("color"); alert(color); 可以看到color如这样的格式; 但是; 因为rgb(0 ...

  7. Javascript Jquery 中的数组定义与操作

    1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多维数组,但是因为数组里面可以包含对象(数组也是一个对象),所以数组可以通过相互嵌套实现类似多维数 ...

  8. 日期类的加减及java中所以日期类的操作算法大全

    1.计算某一月份的最大天数 1Calendar time=Calendar.getInstance();2time.clear();3time.set(Calendar.YEAR,year); //y ...

  9. js进阶 11-1 jquery中的页面内容操作的三个方法

    jquery中的页面内容操作的三个方法 一.总结 一句话总结:记三个方法即可.text,html,val.因为这里是方法,所以设置值的是后面方法的参数. 1.jquery中的页面内容操作的三个方法? ...

随机推荐

  1. android通用JSON解析

    ackage cn.com.pcgroup.<a href="http://lib.csdn.net/base/15" class="replace_word&qu ...

  2. LINUX设备驱动程序笔记(三)字符设备驱动程序

          <一>.主设备号和次设备号        对字符设备的訪问时通过文件系统内的设备名称进行的.那些设备名称简单称之为文件系统树的节点,它们通常位于/dev文件夹. 字符设备驱动程 ...

  3. Mycat常见问题与解决方案---宜将剩勇追穷寇,不可沽名学霸王

    1 Mycat目前有哪些功能与特性? 答: • 支持 SQL 92标准 • 支持Mysql集群,可以作为Proxy使用 • 支持JDBC连接多数据库 • 支持NoSQL数据库 • 支持galera f ...

  4. 关于C++中用两个迭代器方式初始化string的知识

    string(iter1, iter2); 第一点:两个迭代器必须指向同一个容器. 第二点:iter2必须>=iter1. 第三点:假设iter1等于iter2,那么结果为空[] 另外一个比較特 ...

  5. Windows下编译OpenSSL(使用VS2013)

    简述 OpenSSL是一个开源的第三方库,它实现了SSL(Secure SocketLayer)和TLS(Transport Layer Security)协议,被广泛企业应用所采用.对于一般的开发人 ...

  6. CSS伪元素与伪类的区别

    伪类和伪元素介绍 伪类:伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id.class.属性等静态的标志.由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能 ...

  7. POJ 1274 The Perfect Stall || POJ 1469 COURSES(zoj 1140)二分图匹配

    两题二分图匹配的题: 1.一个农民有n头牛和m个畜栏,对于每个畜栏,每头牛有不同喜好,有的想去,有的不想,对于给定的喜好表,你需要求出最大可以满足多少头牛的需求. 2.给你学生数和课程数,以及学生上的 ...

  8. VMWare中装Linux系统常见问题

    1.安装VMWare的时候,可能会提示vtx-m没开启 解决办法:重启笔记本电脑,按完开机键后,按住del或者F1或者F2,进入BIOS,在BIOS中找到intel-cietue开关,开启就 可以(如 ...

  9. [Angular] Component architecture and Reactive Forms

    It it recommeded that when deals with form component, we can create a container component to hold st ...

  10. Spring Boot + Jersey

    Jersey是一个很好的Java REST API库.当你用Jersey实现REST的时候.是很自然的.同一时候Spring Boot是Java世界中还有一个很好的工具.它降低了程序的应用配置(< ...