第二十五篇 jQuery 学习7 获取并设置 CSS 类
Posted 幸享龙枫
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第二十五篇 jQuery 学习7 获取并设置 CSS 类相关的知识,希望对你有一定的参考价值。
jQuery 学习7 获取并设置 CSS 类
jQuery动态控制页面,那么什么是动态呢?我们就说一下静态,静态几乎又纯html+css完成,就是刷新页面之后,不会再出现什么变动,一个实打实的静态页面。那么动态,我们基于静态的特征说,动态:刷新页面之后,还可以发生样式改变等,就为动态。
这节课我们学习的是jQuery控制css,那么css样式都被改变了,算动态么?当然算啦,刷新页面之后发生了改变,就已经不是静态了,只要是变动了,就算是啦。
我们这节课学习四个控制css的方法:
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
这一节,学的是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 类的主要内容,如果未能解决你的问题,请参考以下文章