JQuery 样式设置、追加、移除与切换
有了JQuery,元素的样式操作会变得相当简易。下面我们来看看如何使用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);
|
转载于:https://www.cnblogs.com/zqn518/archive/2012/02/10/2345664.html
JQuery 样式设置、追加、移除与切换相关推荐
- 2015-07-22 JQuery 第二课(JQ元素获取,添加,删除,判断,遍历,取值,样式设置,改变对象,切换)...
1.获取元素: 1).size(): 获取元素的个数. $("img").size():获取有多少个img. 2).eq():获取元素. $("img[title]&qu ...
- 怎样设置html的元素属性,Jquery怎么设置元素的属性和样式?
Jquery怎么设置元素的属性和样式?下面本篇文章给大家介绍一下使用jQuery操作元素属性与样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 元素属性和Dom属性 对于下 ...
- jQuery(一)—— jQuery 概述 / jQuery 选择器 / jQuery 样式操作 / jQuery 效果
原以为 jQuery 不需要学习,但是接触了一些 VUE 框架,发现用到了好多 jQuery 的知识,于是返回来重新学习.本系列笔记大概分为三篇,陆续更新. 参考:W3school -- jQuery ...
- 118.Python修炼之路【123-前端-JQuery样式操作】2018.08.01
jquery样式操作 jquery用法思想二 同一个函数完成取值和赋值 操作行间样式 // 获取div的样式 $("div").css("width"); $ ...
- 【08】jQuery:01-jQuery介绍、jQuery基本使用、jQuery选择器、jQuery样式操作、jQuery效果、jQuery入口函数、jQuery对象
文章目录 day01 - jQuery 1.1. jQuery 介绍 1.1.1 JavaScript 库 1.1.2 jQuery的概念 1.1.3 jQuery的优点 1.2. jQuery 的基 ...
- (JavaScript学习记录):jQuery 样式操作
写在前面:参考哔哩哔哩黑马程序员pink老师教程 地址:https://www.bilibili.com/video/BV1Sy4y1C7ha?t=41&p=4 目录 jQuery 样式操作 ...
- jQuery介绍 jQuery基本使用 jQuery选择器 jQuery样式操作 jQuery动画效果
1.1. jQuery 介绍 1.1.1 JavaScript 库 JavaScript库:即 library,是一个封装好的特定的集合(方法和函数).从封装一大堆函数的角度理解库,就是在这个库中,封 ...
- input文本框设置和移除默认值
input文本框设置和移除默认值 这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失. 1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: ...
- 元素的样式设置 元素类样式的操作 开关灯效果 获取兄弟元素 当前元素的兄弟元素样式
元素的样式设置 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
最新文章
- leetcod算法题--找出星型图的中心节点
- 用tftp 下载/更新ios和配置文件
- 机器学习理论《统计学习方法》学习笔记:第九章 EM算法及其推广
- MySQL数据库-笔记04【查询练习题*8道(附解析)】
- Native Application 开发详解
- python实现路由功能_python 实现重启路由器
- tcp_tw_reuse、tcp_tw_recycle 使用场景及注意事项
- 用户行为分析笔记(二):系统的整体架构
- T-SQL Optimization Tips (3): SELECT COUNT(*)
- yum php mysql5.5_CentOS 5.5使用yum来安装LAMP(php运行环境)
- Mac下Docker镜像加速
- MySQL学习笔记.数据的导入和导出
- 学计算机为什么伤眼,电脑族用眼过度最伤眼!专家教你如何缓解视疲劳
- 按键1按下数码管显示1,按键2按下数码管显示2,按键3按下8个LED灯实现流水灯效果;
- MS-DOC 文件格式概述
- OpenGL ply
- spin_lock到spin_lock_irqsave的使用
- 1142:单词的长度c语言解法
- 高度优先左高树(HBLT) - C语言
- WPS2019下载地址/网盘下载
热门文章
- android 4.4.2截屏方法,android4.4.2 使用 uiautoviewer 截屏报错
- Python、Perl 垫底,C语言才是最环保的编程语言
- C语言 | 二维数组
- 今晚课题:2019-3-22
- linux 读取内存颗粒,Linux虚拟内存地址转化成物理内存地址
- mybatis mysql demo_SpringBoot(入门Demo,整合mybatis,连接mysql)
- 用计算机怎么弹离人愁数字,拇指琴新手入门曲谱——离人愁
- linux mcelog 运行,服务器硬件检测(采用mcelog)
- td 字典表_数据库怎么设计字典表
- 大学计算机应用基础第三版简答题答案,大学计算机应用基础习题答案