JQuery 样式设置、追加、移除与切换

有了JQuery,元素的样式操作会变得相当简易。下面我们来看看如何使用JQuery来实现元素样式的获取、设置、追加、删除以及其它一些操作。

获取与设置样式

获取class和设置class都可以使用attr()方法来完成。例如使用attr()方法来获取p元素的class,JQuery代码如下:

1var 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元素添加了如下样式:

1color : red;        /* 字体颜色设置红色*/ 
2font-style:italic;  
3color: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代码如下:

1toggleBtn.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);

转载于:https://www.cnblogs.com/zqn518/archive/2012/02/10/2345664.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/361689.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

关于Java的十件事

那么,您从一开始就一直在使用Java? 还记得曾经被称为“ Oak”的日子,OO仍然是热门话题,C 人士认为Java没有机会,Applet还是一件事吗? 我敢打赌,您至少不了解以下一半内容。 让我们从本周开始&a…

JQuery DataTables Selected Row

获取单行选中的值 $(#MonitoringTypeTable tbody).on(click, tr, function () {if ($(this).hasClass(selected)) {$(this).removeClass(selected);}else {dataTable.$(tr.selected).removeClass(selected);$(this).addClass(selected);var data dataTable.rows(.selected).da…

JSP9大内置对象

JSP9大内置对象 JSP9个内置对象:out对象 用于输出各种数据reuest对象 封装了来自客户端的各种信息response对象 封装了服务器的响应信息exception对象 封装了程序运行过程中发生的异常和错误信息config对象 封装了应用程序的配置信息page对象 指向了当前JSP程序本身…

【转】SQL Server中行列转换 Pivot UnPivot

PIVOT用于将列值旋转为列名(即行转列),在SQL Server 2000可以用聚合函数配合CASE语句实现 PIVOT的一般语法是:PIVOT(聚合函数(列) FOR 列 in (…) )AS P 完整语法: table_source PIVOT( 聚合函数(value_col…

ExecutorService – 10个提示和技巧

从Java 5开始就已经存在ExecutorService抽象。在这里我们谈论的是2004。 提醒一下:Java 5和6不再受支持,Java 7 将不在半年之内 。 之所以提出这一点,是因为许多Java程序员仍然不完全了解ExecutorService工作方式。 有很多地方可以学习&#…

.NET学习杂记

1..NET中一个组件可以是一个类,如:public class MyClass{public string GetMessage( ){return "Hello";}}2.组件开发尽量使用接口使用接口可以在基本不影响客户代码的清况下对级件进行更新.使用接口需要尽可能地利用封装性,尽量不要显露组件的内部如何实现.封装是实…

.net c# 序列化和反序列

所谓的序列化就是是将对象转换为容易传输的格式的过程,一般情况下转化打流文件,放入内存或者IO文件中。例如,可以序列化一个对象,然后使用 HTTP 通过 Internet 在客户端和服务器之间传输该对象,或者和其它应用程序共享…

注释,无处不在的注释

十年前的2004年 , Java 1.5开始提供注释。 很难想象没有此功能的代码。 实际上,首先引入了注释,以减轻开发人员编写繁琐的样板代码的痛苦,并使代码更具可读性。 考虑一下J2EE 1.4(没有可用的注释)和Java EE…

ajax长链接--拉实现

很多时候需要用在网页上实时显示数据&#xff0c;这个时候一般要用到长链接技术。最简单的实现就是ajax轮询&#xff0c;也就是拉的方式。 下面是一个简单的例子&#xff1a;在网页上实时显示服务器时间。 后端WebService代码&#xff1a; /// <summary>/// ServerTime 的…

EasyUI加zTree使用解析 easyui修改操作的表单回显方法 验证框提交表单前验证 datagrid的load方法

带参提交一次查询&#xff0c;从服务器加载新数据。这是一个神奇的方法 $(#dg).datagrid(load,{code: 01,name: name01 });easyui修改操作的回显方法 $("#standardForm").form(load,rows[0]); var toolbar [ {id : button-add,text : 增加,iconCls : icon-add,han…

jboss4。0下mysql数据源的配置

花了一个小时的时间&#xff0c;搞了一下jboss4。0下mysql数据源的配置。下面是一些具体过程 1、首先安装mysql数据库并将其驱动程序考到jboss的server\default\lib下面 2、将mysql-ds.xml文件放置到server\default\deploy下面 内容如下&#xff1a; <datasources&g…

JavaFX技巧15:ListView自动滚动

我最近不得不为FlexGanttFX实现自动滚动功能&#xff0c;并认为我的解决方案可能对其他人有用。 您可以在下面的清单中找到它的基本概念。 主要思想是使用后台线程来调整列表视图使用的虚拟流节点的像素位置。 当检测到“靠近”顶部或底部边缘的拖拉时&#xff0c;线程开始。 “…

Direct3D学习_绘制

运行了示例&#xff0c;重要步骤记录如下&#xff1a; 1&#xff1a;创建顶点和索引缓存 IDirect3DDevice9::CreateVertexBuffer IDirect3DDevice9::CreateIndexBuffer 2&#xff1a;填充数据 lock ........ unlock 3&#xff1a;设置摄像机 D3DXVECTOR3 position(x,y,z);   …

JZTK项目 驾照题库项目servlet层得到的json字符串在浏览器中 汉字部分出现问号?无法正常显示的解决方法

servlet层中的代码如下&#xff1a; package com.swift.jztk.servlet;import java.io.IOException;import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletReque…

【RTOS】基于V7开发板的uCOS-III,uCOS-II,RTX4,RTX5,FreeRTOS原版和带CMSIS-RTOS V2封装层版全部集齐...

RTOS模板制作好后&#xff0c;后面堆各种中间件就方便了。 1、基于V7开发板的最新版uCOS-II V2.92.16程序模板&#xff0c;含MDK和IAR&#xff0c;支持uC/Probehttps://www.cnblogs.com/armfly/p/11255981.html 2、基于V7开发板的最新版uCOS-III V3.07.03程序模板&#xff0c;含…

三极管开关电路设计(转)

三极管开关电路设计 三极管除了可以当做交流信号放大器之外&#xff0c;也可以做为开关之用。严格说起来&#xff0c;三极管与一般的机械接点式开关在动作上并不完全相同&#xff0c;但是它却具有一些机械式开关所没有的特点。图1所示&#xff0c;即为三极管电子开关的基本电路…

poj3009

样例和网上找的测试数据 都过了 还是 wa program poj3009;type starecord x,y:integer; end;var dir:array[1..4,1..2]of integer((1,0),(-1,0),(0,1),(0,-1)); w,h,ans,ansb:integer; map:array[0..21,0..21]of integer; start:sta; flag:boolean; procedur…

大小端测试程序

//大小端测试程序#include <stdio.h>#include <stdlib.h>voidcheckCPUendian();intmain(){ checkCPUendian();return0;}voidcheckCPUendian(){ union{ unsigned inti; unsigned chars[4]; }c; c.i 0x12345678; printf("%s\n", (0x12c.s[0]) ?"大端…

OpenShift上具有NetBeans的Java EE

今天是慕尼黑的NetBeans日 。 我很高兴提出一个关于将Red Hat产品与我著名的IDE集成的会议。 因此&#xff0c;我一直在谈论WildFly &#xff0c; EAP &#xff0c;Git和OpenShift Online&#xff0c;并展示了使用该工具集优化开发工作流程的所有不同方式。 大约有100位与会者…

tomcat.apache startup.bat闪退两种解决方法

tomcat bin文件夹中的startup.bat闪退原因及解决方法两种 方法一&#xff1a;在启动tomcat时闪退&#xff0c;重新检查java的jre运行环境。如果环境变量忘记配置一定会导致了tomcat的闪退。 追加 Apache的bin的环境变量也放到path中 注意检查一下看 JAVA_HOME是否写错&#xff…