Jquery添加移除样式
获取与设置样式
获取class和设置class都可以使用attr()方法来完成。例如使用attr()方法来获取p元素的class,JQuery代码如下:
var
p_class = $(
"p"
).attr(
"class"
);
//获取p元素的class
使用attr()方法来设置p元素的class,JQuery代码如下:
1 |
$( "p" ).attr( "'class" , "high" ); //设置p元素的class为 "high" |
在大多数情况下,它是将原来的class替换为新的class,而不是在原来的基础上追加新的class。
追加样式
什么是追加class呢?假如p元素原本的class为myClass,那么追加一个名叫high的class后,class属性变为 “myClass high”,即myClass和high两种样式的叠加。JQuery提供了专门的addClass()方法来追加样式。为了使例子更容易理解,首先在 style标签里添加另一组样式:
1 |
.high{ color:red; } |
2 |
.another{ font-style:italic; color:blue; } |
然后在网页中添加一个“追加class类”的按钮,按钮的事件代码如下:
1 |
$( "#btn_3" ).click( function (){ |
2 |
$( "#nm_p" ).addClass( "another" ); // 追加样式 |
3 |
}); |
最后当单击“追加class类”按钮时,p元素样式就会变为斜体,而先前的红色字体也会变为蓝色。此时p元素同时拥有两个class值,即"high"和"another"。在CSS中有以下两条规定。
- 如果给一个元素添加了多个class值,那么就相当于合并了它们的样式。
- 如果有不同的class设定了同一样式属性,则后者覆盖前者。
在上例中,相当于给p元素添加了如下样式:
1 |
color : red; /* 字体颜色设置红色*/ |
2 |
font-style:italic; |
3 |
color:blue; |
在以上的样式中,存在两个“color”属性,而后面的“color”属性会覆盖前面的“color”属性,因此最终的“color”属性的值为“blue”,而不是“red”。
移除样式
如果用户单击某个按钮时,要删除class的某个值,那么可以使用与addClass()方法相反的removeClass()方法来完成,它的 作用是从匹配的元素中删除全部或者指定的class。例如可以使用如下的JQuery代码来删除p元素中值为“high”的class:
1 |
$( "p" ).removeClass( "high" ); //移除p元素中值为"high"的class |
如果要把p元素的两个class都删除,就要使用两次removeClass()方法,代码如下:
1 |
$( "p" ).removeClass( "high" ).removeClass( "another" ); |
JQuery提供了更简单的方法。可以以空格的方式删除多个class名,代码如下:
1 |
$( "p" ).removeClass( "high another" ); |
另外,还可以利用removeClass()方法的一个特性来完成同样的效果。当它不带参数时,就会将class的值全部删除,JQuery代码如下:
1 |
$( "p" ).removeClass(); //移除p元素的所有class |
切换样式
JQuery中有一个方法toggle(),JQuery代码如下:
1 |
toggleBtn.toggle( function (){ |
2 |
//元素显示 代码③ |
3 |
}, function (){ |
4 |
//元素隐藏 代码④ |
5 |
}) |
toggle()方法此处的作用是交替执行代码③和代码④两个函数,如果元素原来是显示的,则隐藏它:如果元素原来是隐藏的,则显示它。此时,toggle()方法主要是控制行为上的重复切换。
另外JQuery还提供了一个toggleClass()方法控制样式上的重复切换。如果类名存在则删除它,如果类名不存在则添加它。例如对p元素进行toggleClass()方法操作。
1 |
$( "p" ).toggleClass( "another" ); //重复切换类名“another” |
当不断单击“切换样式”按钮时,p元素的class的值就会在“myClass”和“myClass another”之间重复切换。
判断是否含有某个样式
hasClass()可以用来判断元素中是甭含有某个class,如果有,则返回true,否则返回false。例如可以使用下面的代码来判断p元素中是否含有“another”的class:
1 |
$( "p" ).hasClass( "another" ); |
这个方法是为了增强代码可读性面产生的。在JQuery内部实际上是调用了is()方法来完成这个功能的.该方法等价于如下代码:
1 |
$( "p" ).is( ".another" ); //is("."+class); |
Jquery添加移除样式的更多相关文章
- jQuery动态添加删除CSS样式
jQuery框架提供了两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个小例子讲解用法. jQuery动态追加移除CSS样式 <!DOCT ...
- jQuery添加、移除、改变class属性
jQuery中一般有3个关于改变元素class的函数addClass.removeClass.toggleClass addClass描述: 为每个匹配的元素添加指定的样式类名$('div').add ...
- 用css 添加手状样式,鼠标移上去变小手,变小手
用css 添加手状样式,鼠标移上去变小手,变小手 cursor:pointer; 用JS使鼠标变小手onmouseover(鼠标越过的时候) onmouseover="this.style. ...
- 用css 添加手状样式,鼠标移上去变小手
用css 添加手状样式,鼠标移上去变小手,变小手 用css 添加手状样式,鼠标移上去变小手,变小手 cursor:pointer; 用JS使鼠标变小手onmouseover(鼠标越过的时候) onmo ...
- jquery系列教程2-style样式操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...
- JQuery操作属性、样式、风格(attr、class、css)
样式操作 <p class="myclass" title="选择喜欢的水果">你最喜欢的水果是?</p> 在上面代码中,class也是 ...
- jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法(转)
系统默认的滚动条样式,真的已经看的够恶心了.试想一下,如果在一个很有特色和创意的网页中,出现了一根系统中默认的滚动条样式,会有多么的别扭. 为了自己定义网页中的滚动条的方法,我真的已经找了很久了,就目 ...
- jQuery学习之------元素样式的操作
jQuery学习之------元素样式的操作 一..addClass( className )方法----增加样式 1.addClass( className ) : 为每个匹配元素所要增加的一个或多 ...
- jQuery属性操作之类样式操作
类样式的操作:指对DOM属性className进行添加.移除操作.比如addClass().removeClass().toggleClass(). 1. addClass() 1.1 概述 $(se ...
随机推荐
- RIA技术
Rich Internet Application(富互联网应用程序,简称RIA),一种全新的Web应用程序架构,它结合了桌面软件良好的用户体验和web应用程序易部署的优点,很快获得了企业的青睐. 近 ...
- js如何判断一个对象是不是Array
typeof 操作符 对于Function, String, Number ,Undefined 等几种类型的对象来说,他完全可以胜任,但是为Array时 var arr=new Array(&quo ...
- UVa 1594 (Floyd判圈) Ducci Sequence
大白书上P42那个计算器的题目就用到了这个办法,Floyd判圈法. 当然,用STL里的map也是可以的. #include <cstdio> #include <cmath> ...
- js模拟实现继承功能
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- SeuRain的归来
不知不觉二十载寒窗苦读要结束了,还没有到回顾过去的时候.马上进入研三了,现在要努力加油了.还记得曾经的那个在凌晨两点奋战的宇么?归来吧!
- ios 内存管理 心得
- alloc, copy, retain会把引用计数+1 - release会把引用计数-1 - 局部变量如果初始化时不是autorelease的,要及时调用release释放,并且赋值为nil否则 ...
- 小结JS中的OOP(下)
关于JS中OOP的具体实现,许多大神级的JS专家都给出了自己的方案. 一:Douglas Crockford 1.1 Douglas Crockford实现的类继承 /** * 原文地址:http:/ ...
- poj 2185(二维kmp)
题意:让你求一个最小的覆盖子矩阵. 分析:首先第一点是确定的:那就是这个子矩阵肯定位于左上角,然后按行考虑,求出每一行可能的重复子串的长度,然后取所有行都存在并且长度最短的长度最为最小子矩阵的宽, 最 ...
- GitHub的代码托管和使用方法
原文 GitHub托管 借助GitHub托管你的项目代码 PS:话说自己注册了GitHub都很久了,却没有怎么去弄,现在系统学习一下,也把自己的学习经历总结下来share给大家,希望大家都能把Git ...
- ylb:exists(存在)的应用实例
ylbtech-SQL Server:exists(存在)的应用实例 SQL Server exists(存在)的应用实例. 1,exists(存在)的应用实例 返回顶部 -- =========== ...