jquery动态样式操作
获取与设置样式
获取class和设置class都可以使用attr()方法来完成。例如使用attr()方法来获取p元素的class,JQuery代码如下:
1 |
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内核 样式操作
基础回顾 jQuery里节点样式读取以及设置都是通过.css()这个方法来实现的,本章通一下分解探究下jquery里这部分代码的实现 那么jQuery要处理样式的哪些问题? 先简单回顾下样式操作会遇到 ...
- jQuery - 5.样式操作
样式操作 1.获取样式 attr("class"), 2.设置样式attr("class","myclass"), 3.追加样式addCla ...
- jquery动态出操作select
var citys = {1:'北京',2:'上海',3:'广州',4:'深圳'}; $("#city option:gt(0)").remove(); for(var k in ...
- jQuery 源码解析(二十九) 样式操作模块 尺寸详解
样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下尺寸这一块 jQuery通过样式操作模块里的尺寸相关的API可以很方便的获取一个元素的宽度.高度,而且可以很方便的区分padding.b ...
- 深入学习jQuery样式操作
× 目录 [1]设置样式 [2]增加样式 [3]删除样式[4]切换样式[5]判断样式[6]样式操作 前面的话 使用javascript脚本化CSS是一个系列,包括行间样式.计算样式.CSS类.样式表. ...
- jQuery编程基础精华02(属性、表单过滤器,元素的each,表单选择器,子元素过滤器(*),追加方法,节点,样式操作)
属性.表单过滤器 属性过滤选择器: $("div[id]")选取有id属性的<div> $("div[title=test]")选取title属性为 ...
- IE7中使用Jquery动态操作name问题
问题:IE7中无法使用Jquery动态操作页面元素的name属性. 在项目中有出现问题,某些客户的机器偶尔会有,后台取不到前台的数据值. 然开发和测试环境总是不能重现问题.坑爹之处就在于此,不能重现就 ...
- jQuery 2.0.3 源码分析 样式操作
根据API分类 CSS addClass() jQuery.cssHooks .hasClass() .removeClass() .toggleClass() .addClass() 对元素的样式操 ...
- 【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】
一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...
随机推荐
- Ceph的集群全部换IP
由于要对物理机器要做IP规划,所有物理机统一做到35网段,对于ceph集群来说,是有一定工作量的. 前提条件,ceph集群正常.原来的所有集群在44网段.mon地址是172.17.44.22 在44网 ...
- vsftpd匿名用户只能上传不能下载
目的 搭建一台FTP服务器,供学生上传作业使用. 要求 1.学生可以直接访问FTP服务器,无需登录: 2.只能上传文件,不能创建文件夹.重命名.删除等: 3.不能下载文件(防抄袭): 4.不能在线查看 ...
- TM1680的I2C的51例程
搞到一个例程,虽然是51的, 但是我的ST版本也是用的模拟I2C, 分析一下吧: unsigned char i=0;TM1680start(); //I2C起始信号 TM1680SendByte( ...
- mysql的sql文件的备份与还原
1.备份 $mysqldump –u root –p*** dbname > filename.sql 2.还原 前提是数据库必须存在 $mysql –u root –p*** dbname ...
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.4.Tabs控件
之前,我们已经介绍了 jQuery UI 库,CSS 框架.下面,我们将学习这些有增强可视化效果,高度可配置的用户交互组件. Tab 的特性是,点击 tab 后,会高亮该 tab,并显示他的关联con ...
- OpenStack集成Docker
声明:绝对原创,欢迎转载,但请标明出处,谢谢! 最近在做openstack与Docker的集成工作,走了不少弯路,遇到不少问题,不过最终搭建成功了.现在将过程分享出来,以供参考. 一.环境介绍 1.软 ...
- 以雅酷网为实例从技术上说说dedecms的seo优化要注意哪些?
目前在做雅酷网 ,雅酷卡是雅酷时空公司的产品,我个人感觉用雅酷卡消费还是比较实惠的,而雅酷卡的特色便是雅酷健身卡,很多站长成天的趴电脑上,可以考虑办一张这样的卡,在周末的时候去健身中心活动活动,还是比 ...
- JavaScript中创建类,赋值给ajax中的data参数
缘由:因为要给根据是否选中checkbox来动态增加ajax中data的属性(ajax的data属性格式的几种方法,参考http://www.jb51.net/article/46676.htm) d ...
- SlickGrid example 3b: 支持撤销操作的编辑单元
不同类型的属性可以按不同的风格编辑. 每个编辑单元可以设置不同的验证方法. 历史编辑可以撤销. 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTM ...
- c# UDP广播
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...