获取与设置样式

获取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中有以下两条规定。

  1. 如果给一个元素添加了多个class值,那么就相当于合并了它们的样式。
  2. 如果有不同的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添加移除样式的更多相关文章

  1. jQuery动态添加删除CSS样式

    jQuery框架提供了两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个小例子讲解用法. jQuery动态追加移除CSS样式 <!DOCT ...

  2. jQuery添加、移除、改变class属性

    jQuery中一般有3个关于改变元素class的函数addClass.removeClass.toggleClass addClass描述: 为每个匹配的元素添加指定的样式类名$('div').add ...

  3. 用css 添加手状样式,鼠标移上去变小手,变小手

    用css 添加手状样式,鼠标移上去变小手,变小手 cursor:pointer; 用JS使鼠标变小手onmouseover(鼠标越过的时候) onmouseover="this.style. ...

  4. 用css 添加手状样式,鼠标移上去变小手

    用css 添加手状样式,鼠标移上去变小手,变小手 用css 添加手状样式,鼠标移上去变小手,变小手 cursor:pointer; 用JS使鼠标变小手onmouseover(鼠标越过的时候) onmo ...

  5. jquery系列教程2-style样式操作全解

    全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...

  6. JQuery操作属性、样式、风格(attr、class、css)

    样式操作 <p class="myclass" title="选择喜欢的水果">你最喜欢的水果是?</p> 在上面代码中,class也是 ...

  7. jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法(转)

    系统默认的滚动条样式,真的已经看的够恶心了.试想一下,如果在一个很有特色和创意的网页中,出现了一根系统中默认的滚动条样式,会有多么的别扭. 为了自己定义网页中的滚动条的方法,我真的已经找了很久了,就目 ...

  8. jQuery学习之------元素样式的操作

    jQuery学习之------元素样式的操作 一..addClass( className )方法----增加样式 1.addClass( className ) : 为每个匹配元素所要增加的一个或多 ...

  9. jQuery属性操作之类样式操作

    类样式的操作:指对DOM属性className进行添加.移除操作.比如addClass().removeClass().toggleClass(). 1. addClass() 1.1 概述 $(se ...

随机推荐

  1. RIA技术

    Rich Internet Application(富互联网应用程序,简称RIA),一种全新的Web应用程序架构,它结合了桌面软件良好的用户体验和web应用程序易部署的优点,很快获得了企业的青睐. 近 ...

  2. js如何判断一个对象是不是Array

    typeof 操作符 对于Function, String, Number ,Undefined 等几种类型的对象来说,他完全可以胜任,但是为Array时 var arr=new Array(&quo ...

  3. UVa 1594 (Floyd判圈) Ducci Sequence

    大白书上P42那个计算器的题目就用到了这个办法,Floyd判圈法. 当然,用STL里的map也是可以的. #include <cstdio> #include <cmath> ...

  4. js模拟实现继承功能

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. SeuRain的归来

    不知不觉二十载寒窗苦读要结束了,还没有到回顾过去的时候.马上进入研三了,现在要努力加油了.还记得曾经的那个在凌晨两点奋战的宇么?归来吧!

  6. ios 内存管理 心得

    - alloc, copy, retain会把引用计数+1 - release会把引用计数-1 - 局部变量如果初始化时不是autorelease的,要及时调用release释放,并且赋值为nil否则 ...

  7. 小结JS中的OOP(下)

    关于JS中OOP的具体实现,许多大神级的JS专家都给出了自己的方案. 一:Douglas Crockford 1.1 Douglas Crockford实现的类继承 /** * 原文地址:http:/ ...

  8. poj 2185(二维kmp)

    题意:让你求一个最小的覆盖子矩阵. 分析:首先第一点是确定的:那就是这个子矩阵肯定位于左上角,然后按行考虑,求出每一行可能的重复子串的长度,然后取所有行都存在并且长度最短的长度最为最小子矩阵的宽, 最 ...

  9. GitHub的代码托管和使用方法

    原文  GitHub托管 借助GitHub托管你的项目代码 PS:话说自己注册了GitHub都很久了,却没有怎么去弄,现在系统学习一下,也把自己的学习经历总结下来share给大家,希望大家都能把Git ...

  10. ylb:exists(存在)的应用实例

    ylbtech-SQL Server:exists(存在)的应用实例 SQL Server exists(存在)的应用实例. 1,exists(存在)的应用实例 返回顶部 -- =========== ...