jQuery 学习7 获取并设置 CSS 类

 
jQuery动态控制页面，那么什么是动态呢？我们就说一下静态，静态几乎又纯html+css完成，就是刷新页面之后，不会再出现什么变动，一个实打实的静态页面。那么动态，我们基于静态的特征说，动态：刷新页面之后，还可以发生样式改变等，就为动态。
这节课我们学习的是jQuery控制css，那么css样式都被改变了，算动态么？当然算啦，刷新页面之后发生了改变，就已经不是静态了，只要是变动了，就算是啦。
我们这节课学习四个控制css的方法：
  • addClass() - 向被选元素添加一个或多个类
  • removeClass() - 从被选元素删除一个或多个类
  • toggleClass() - 对被选元素进行添加/删除类的切换操作
  • css() - 设置或返回样式属性

以上引用w3c教程

 
这一节，学的是jQuery，但也是操作css样式表，当然啦，css样式，老师只会演示一些简单的，比如字体颜色、背景色、字体大小、加粗，等等简单的，重点还是学习jQuery是怎么控制的：
 
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>jQuery 学习7 控制css</title>

    <!--使用jQuery一定不要忘记引用jQuery文件-->

    <script src="../js/jquery-1.12.2.min.js"></script>

    <style>

        .red{

            color:red;

        }

        .font{

            font-size: 30px;

        }

        .blue{

            color:blue;

            background-color: #dedede;

        }

    </style>

</head>

<body>

<div>同学们，好好学，别上了战场被淘汰</div><br/><br/>

<div id="dd">龙枫................</div><br/><br/>

<p class="font">希望能帮到大家，一起努力吧</p>

<h3>我是小标题</h3>

<!--以上，给出元素，我们用jQuery来控制样式-->

<!--为了让同学们更方便看出效果，我们还是用一个点击事件来控制，先给一个点击按钮-->

<button onclick="zengc()">点击我，div增加class="red"</button>

<button onclick="shanc()">点击我，删除元素拥有class="font"的样式</button>

<button onclick="qiec()">点击我，让id为'dd'的元素发生样式切换</button>

<script>

    function zengc(){

        $("div").addClass("red");

        //给div元素增加 class类 值为red

    }

    function shanc(){

        $("p").removeClass("font");

        //找到p元素，删除它class类的值为 font

    }

    function qiec(){

        $("#dd").toggleClass("blue");

        //找到id为'dd'的， toggleClass是切换，增加或者删除，class类值为blue的

    }

    //以上是用的点击事件来调用的函数，，，下面我们用一个，页面加载，就运行的函数

    $("h3").css({"color":"red","background-color":"#000","font-size":"30px",

    "margin-left":"200px","width":"200px","height":"200px"});

    //这一段代码，是页面加载结束后，就直接运行的，修改元素为h3的css样式。写法如上

    //css()方法里，带一个花括号，用引号写属性和值，键值对的形式，逗号区分一组键值对

    //用花括号，就可以写多个键值对，不然的话，只能写一个，其写法为：

    //$("h3").css("color","red") 就不是冒号区分，而是逗号，因为只能写一个了。

</script>

</body>

</html>
 
以上代码演示，老师用的是css内联形式，外联要引用外部文件(演示的话嫌弃麻烦，而且担心同学们更加不易懂)，内嵌的话就跟class类没关系了，就无法在这里演示效果了。
 
在style里的样式，除了".font"其他两个都是类名上找是不到的，因为在html里，没有定义class="red" 和 class="blue" ，所有在css样式表里，内联或者外联，都是找不到的，但是呢，它一开始找不到，不代表，我后面就不能给它塞进去。所以我们用jQuery来实现动态改变样式。
 
参照上面的代码，我们打开页面刷新成功后，检查源码，调用点击事件zengc()，会发现，页面上不光产生了效果，而且能清楚的看见，div里增加了 class="值" ，而这个值，就是我们jQuery里写的，然后它在将这个值，塞给css样式表里，这样，效果也就跟着发生改变了。
 
我们继续，调用shanc()事件，会发现，p元素，它本身的css样式，是字体大小30px，然后变小了，在检查源码里能清晰的看见，class属性还在，但是值(font)被删除了，所以，它的css样式就没有了。
 
调用qiec()事件，页面上能看见，id为"dd"的元素，字体颜色改变、背景色改变，点击第二次，又变回去了。这里我们用到的是toggleClass()方法，toggle这个，同学们在前面学习jQuery的特效效果就见过了，它的意思很简单，可以理解为判断，什么判断呢？我们看这里的效果：我们给它加了一个class="blue"，当我再次点击，它就删除了blue，我们理解为“反向”，就是说，它有，就变成没有；没有，就变成有！ 这里我们要注意，id为"dd"的元素，它也是div，在zengc()事件，我们给它增加了class="red"，所以这里我们的blue，会在red的后面，删除的话，也只会删除blue，而不会影响red。不懂的同学，看页面效果，检查源码，就能看懂咯。
 
这里我们说一下，class类，它的值，是可以多个的，就比如我们上面演示的，给id="dd"的div元素，它既有red 也有blue，就是两个值，因为上面效果都是字体颜色，他们发生冲突，在没有没有优先级的情况下，同一个级别，就只会运行靠下方的代码(程序都是从上往下运行的)。
 
我们最后说说h3元素，它在html里，什么样式都没，css里也没有。老师是在jQuery里给它添加的css样式，运行代码，在检查源码里能发现，在jQuery里添加的css，是内嵌的方式哦。
 
以上学习的，两种类型，
第一种：
addClass()方法，是增加class
removeClass()方法，删除class(它的值)
toggleClass()方法，删除或者添加(反向)
以上三个方法，只是控制class类的值(就这样理解，简单点)，样式需要借助内联或者外联
 
第二种：
css()方法，直接在此方法括号里写css样式。它不需要借助其他的，就直接自己写，添加样式，在内嵌里。
 
以上，用得最多的，或许只有css()方法。当然了，同学们扩展以下，尽可能的多掌握一些方法，这样在实战中，就多一个选择。
 

第二十五篇 jQuery 学习7 获取并设置 CSS 类的更多相关文章

  1. 第二十六篇 jQuery 学习8 遍历-父亲兄弟子孙元素

    jQuery 学习8 遍历-父亲兄弟子孙元素   jQuery遍历,可以理解为“移动”,使用“移动”还获取其他的元素.   什么意思呢?老师举一个例子: 班上30位同学,我是新来负责教这个班学生的老师 ...

  2. 第二十二篇 jQuery 学习4 内容和属性

    jQuery 内容和属性   这节课,我们学习使用jQuery来控制元素的内容.值和属性.   html() 控制所选元素的内容(包括HTML标记): text() 控制所选元素的内容: val() ...

  3. 第二十四篇 jQuery 学习6 删除元素

    jQuery 学习6 删除元素   上节课我们做了添加元素,模拟的是楼主发的文章,路人评论,那么同学们这节课学了删除之后,去之前的代码上添加一个删除,模拟一个楼主删除路人的评论. jQuery的删除方 ...

  4. Python之路(第二十五篇) 面向对象初级：反射、内置方法

    [TOC] 一.反射 反射的概念是由Smith在1982年首次提出的,主要是指程序可以访问.检测和修改它本身状态或行为的一种能力(自省).这一概念的提出很快引发了计算机科学领域关于应用反射性的研究.它 ...

  5. jQuery 获取并设置 CSS 类

    通过 jQuery,可以很容易地对 CSS 元素进行操作. 切换 CSS 类 jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - ...

  6. jquery操作html元素之（ 获取并设置 CSS 类）

    jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一 ...

  7. SpringBoot非官方教程 | 第二十五篇：2小时学会springboot

    转载请标明出处: http://blog.csdn.net/forezp/article/details/61472783 本文出自方志朋的博客 一.什么是spring boot Takes an o ...

  8. 第二十五篇 玩转数据结构——链表（Linked List）

          1.. 链表的重要性 我们之前实现的动态数组.栈.队列,底层都是依托静态数组,靠resize来解决固定容量的问题,而"链表"则是一种真正的动态数据结构,不需要处理固定容 ...

  9. 第二十六篇 -- wifi学习

    参考网址:https://blog.csdn.net/zwl1584671413/article/details/77936950 https://blog.csdn.net/Righthek/art ...

随机推荐

  1. 九十三：CMS系统之cms后台登录功能

    config form from wtforms import Form, StringField, IntegerFieldfrom wtforms.validators import Email, ...

  2. Can't initialize physical volume "/dev/sdb" of volume group "cinder-volumes" without -ff /dev/sdb: physical volume not initialized.

    原因:无法初始化物理量,之前创建的cinder-volumes没有卸载 方法一: [root@storage cinder]# lsblk NAME MAJ:MIN RM SIZE RO TYPE M ...

  3. Scala中的列表可以添加元素吗？

    列表或许是Scala程序中最常用到的数据结构了,其与数组非常相似,最重要的两点差别为: 1.列表是不可变的: 2.列表具有递归结构,而数组是连续的. 在实际使用中非常容易这样用: val a = Li ...

  4. 状态管理之 Flux、Redux、Vuex、MobX（概念篇）

    本文是对 Flux.Redux.Vuex.MobX 几种常用状态管理模式的总结,偏向于概念层面,不涉及过多代码. 状态管理 什么是状态管理? 状态管理就是,把组件之间需要共享的状态抽取出来,遵循特定的 ...

  5. 说说mysql的存储引擎,有什么区别？索引的介绍

    InnoDB 支持ACID事务,支持事务的四种隔离级别,串行化,可重复读,读已提交,读未提交. 支持行级锁以及外检约束:所以可以支持写并发. 不存储总行数. 逐渐索引采用聚集索引,索引的数据域存储数据 ...

  6. kubeadm安装集群系列-1.基础服务安装

    基础服务 本文基于centos7.5部署 规划 10.8.28.200 master-VIP 10.8.31.84 k8s-test-master-1 10.8.152.149 k8s-test-ma ...

  7. 论文阅读及复现 | Effective Neural Solution for Multi-Criteria Word Segmentation

    主要思想 这篇文章主要是利用多个标准进行中文分词,和之前复旦的那篇文章比,它的方法更简洁,不需要复杂的结构,但比之前的方法更有效. 方法 堆叠的LSTM,最上层是CRF. 最底层是字符集的Bi-LST ...

  8. 添加SSH keys到github帐号

    使用git clone命令从github上同步github上的代码库时,如果使用SSH链接(如我自己的esesgrid项目:git@github.com:hmilycc/esesgrid.git),而 ...

  9. Oooooooo AAAAE 【网络流最小点权覆盖】

    Description “Let the bass kick!O-oooooooooo AAAAE-A-A-I-A-U- JO-oooooooooooo AAE-O-A-A-U-U-A- E-eee- ...

  10. Centos7 安装部署 Airflow

    本人在centos7 的环境下部署,怎么在centos7 下配置静态 IP 关闭防火墙 以及安装jdk在这里不多赘述, centos7 配置静态ip可以参考:https://www.cnblogs.c ...