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. 18/9/9牛客网提高组Day1

    牛客网提高组Day1 T1 中位数 这好像是主席树??听说过,不会啊... 最后只打了个暴力,可能是n2logn? 只过了前30%  qwq #include<algorithm> #in ...

  2. maven仓库快速镜像

    国内连接maven官方的仓库更新依赖库,网速一般很慢,收集一些国内快速的maven仓库镜像以备用. ====================国内OSChina提供的镜像,非常不错=========== ...

  3. Java Servlet学习笔记（四）Servlet客户端Http请求

    Servlet 客户端 HTTP 请求 当浏览器请求网页时,它会向 Web 服务器发送特定信息,这些信息不能被直接读取,因为这些信息是作为 HTTP 请求的头的一部分进行传输的.您可以查看 HTTP ...

  4. 24岁程序员， 一个人撑起App开发项目

    "疲惫吾心,怎样躲藏! 四处荒芜,怎话忧伤?"临近中秋,看到艾瑞斯的QQ签名,无尽的伤感.这个年仅24的青年.连续3年没有回家了,近期一个月总是失眠,没有家人的陪伴,就连女朋友都没 ...

  5. Delphi部份函数,命令,属性中文说明

    Abort 函数 引起放弃的意外处理 Abs 函数 绝对值函数 AddExitProc 函数 将一过程添加到运行时库的结束过程表中 Addr 函数 返回指定对象的地址 AdjustLineBreaks ...

  6. 用PHP 去掉所有html标签里的部分属性

    用PHP 去掉所有html标签里的部分属性 http://zhidao.baidu.com/question/418471924.html 用PHP 去掉所有html标签里的部分属性 tppabs & ...

  7. animation- 动画效果实现（代码中）

    1,首先我们看一下如下的代码 import android.view.animation.LayoutAnimationController; import android.view.animatio ...

  8. Vue使用Promise自定义confirm确认框组件

    使用Promise模拟浏览器确认框,可自定义标题,内容,按钮文字和类型 参数名 类型 说明 title String 标题 content String 内容 yesBtnText String 确认 ...

  9. Android圆环控件

    Android圆环控件 近期在做一个功能.界面效果要求例如以下: 看到这个界面,我首先想到了曾经在做phone模块的时候,我们定制的来电界面InCallTouchUi,界面效果是相似的. 来电控件使用 ...

  10. Ten ways to improve the performance of large tables in MySQL--转载

    原文地址:http://www.tocker.ca/2013/10/24/improving-the-performance-of-large-tables-in-mysql.html Today I ...