jQuery CSS 添加/删除类名
addClass(class) — 为每个匹配的元素添加指定的类名。
参数 : class — 一个或多个要添加到元素中的CSS类名,请用空格分开(String)
示例 一 :
为匹配的元素加上 'selected' 类
HTML 代码:
<p>Hello</p>
jQuery 代码:
$("p").addClass("selected");
结果:
[ <p class="selected">Hello</p> ]
示例 二 :
为匹配的元素加上 selected highlight 类
HTML 代码:
<p>Hello</p>
jQuery 代码:
$("p").addClass("selected highlight");
结果:
[ <p class="selected highlight">Hello</p> ]
addClass(function(index, class)) — 为每个匹配的元素添加指定的类名。
参数 : function(index, class) — 此函数必须返回一个或多个空格分隔的class名。接受两个参数,index参数为对象在这个集合中的索引值,class参数为这个对象原先的class属性值。(Function)
示例 : 给li加上不同的class
HTML 代码:
<ul><li>Hello</li><li>Hello</li><li>Hello</li></ul>
jQuery 代码:
$('ul li:last').addClass(function() {
return 'item-' + $(this).index();
});
removeClass([class]) — 从所有匹配的元素中删除全部或者指定的类。
参数 : class (可选) — 一个或多个要删除的CSS类名,请用空格分开(String)
示例 :
从匹配的元素中删除 'selected' 类
HTML 代码:
<p class="selected first">Hello</p>
jQuery 代码:
$("p").removeClass("selected");
结果:
[ <p class="first">Hello</p> ]
删除匹配元素的所有类
HTML 代码:
<p class="selected first">Hello</p>
jQuery 代码:
$("p").removeClass();
结果:
[ <p>Hello</p> ]
removeClass(function(index, class)) — 从所有匹配的元素中删除全部或者指定的类。
参数 : function(index, class) — 此函数必须返回一个或多个空格分隔的class名。接受两个参数,index参数为对象在这个集合中的索引值,class参数为这个对象原先的class属性值。(Function)
示例:
删除最后一个元素上与前面重复的class
jQuery 代码:
$('li:last').removeClass(function() {
return $(this).prev().attr('class');
});
toggleClass(class) — 如果存在(不存在)就删除(添加)一个类。
参数 : class — CSS类名(String)
示例 :
为匹配的元素切换 'selected' 类
HTML 代码:
<p>Hello</p><p class="selected">Hello Again</p>
jQuery 代码:
$("p").toggleClass("selected");
结果:
[ <p class="selected">Hello</p>, <p>Hello Again</p> ]
toggleClass(class, switch) — 如果开关switch参数为true则加上对应的class,否则就删除。
参数 :
class — 要切换的CSS类名(String)
switch — 用于决定元素是否包含class的布尔值(Boolean)
示例 :
每点击三下加上一次 'highlight' 类
HTML 代码:
<strong>jQuery 代码:</strong>
jQuery 代码:
var count = 0;
$("p").click(function(){
$(this).toggleClass("highlight", count++ % 3 == 0);
});
toggleClass(function(index, class), [switch])— 如果开关switch参数为true则加上对应的class,否则就删除。
参数 :
function(index, class)— 返回class名的一个函数,接受两个参数,index为元素在集合中的索引位置,class为原先元素的class值(Function)
switch — (可选)用于决定元素是否包含class的布尔值(Boolean)
示例 :
根据父元素来设置class属性
jQuery 代码:
$('div.foo').toggleClass(function() {
if ($(this).parent().is('.bar') {
return 'happy';
} else {
return 'sad';
}
});
转载于:https://www.cnblogs.com/xupeiyu/p/4012730.html
jQuery CSS 添加/删除类名相关推荐
- jQuery实现添加删除
用jQuery实现添加删除 用原生js实现的代码:https://blog.csdn.net/m0_53679993/article/details/124179917?spm=1001.2014.3 ...
- JQuery动态添加/删除class样式
有时我们会对某个控件的class样式进行获取.添加.修改.删除.下面是简单整理的一些实例用法: html样例代码如下: <ul class="pro_list fl cont" ...
- [PHP] JQuery+Layer实现添加删除自定义标签代码
JQuery+Layer实现添加删除自定义标签代码 实现效果如下: 实现代码如下: <!doctype html> <html> <head> <meta c ...
- jQuery使用toggleClass方法动态添加删除Class样式的方法
本文实例讲述了jQuery使用toggleClass方法动态添加删除Class样式的方法.分享给大家供大家参考.具体分析如下: jQuery通过toggleClass方法动态添加删除Class,一次执 ...
- jquery使用html()css不生效,jquery可以添加css样式吗?
jquery可以添加css样式吗?答案是:可以.那么如何添加css样式?下面本篇文章就来给大家介绍一下使用jquery添加css样式的方法,希望对大家有所帮助. 在jquery中,可以使用addCla ...
- jquery中添加属性和删除属性--------------------
jquery中添加属性和删除属性: 复制代码 代码如下: $("#2args").attr("disabled",'disabled'); $("#2 ...
- JavaScript经典案例:添加/删除元素类名
效果展示: CSS代码: <style type="text/css">#btn-wrapper {width: 300px;height: 100px;text-al ...
- jq添加或删除html元素,jQuery添加删除DOM元素方法详解
本文实例分析了jQuery添加删除DOM元素的方法.分享给大家供大家参考,具体如下: 介绍 DOM是Document Object Modeule的缩写,一般来说,DOM操作分成3个方面. 1.DOM ...
- jquery中添加属性和删除属性
jquery中添加属性和删除属性: 复制代码 代码如下: $("#2args").attr("disabled",'disabled'); $("#2 ...
- jQuery HTML 添加和删除元素
jQuery - 添加元素 通过 jQuery,可以很容易地添加新元素/内容. 添加新的 HTML 内容的四个 jQuery 方法: append() - 在被选元素的结尾插入内容 prepend() ...
最新文章
- 融合基础设施会给私有云带来什么?
- shtml与php的区别,htm,html.shtml区别
- 基于asp.net的Web开发架构探索(转)
- SQL Server-聚焦在视图和UDF中使用SCHEMABINDING(二十六)
- 蓝桥杯2014年省赛C/C++ 本科B组
- 51单片机——LED发光二极管、蜂鸣器C语言入门编程
- python定时任务管理系统_python定时任务最强框架APScheduler详细教程
- 如何用笔记本破解无线网络密码?破解无线网络密码的教程
- python隐藏窗口_python怎么隐藏界面?
- vue-element-admin的二次开发
- 招聘数据采集+数据清洗与分析+数据可视化
- 算法:什么是宠物收养所问题?
- 飞机飞行轨迹可视化Tacview
- 冒泡排序-过程详细版
- 我在做售前-5.如何应聘售前
- 描述CFAR算法原理
- SQL server 如何建立两个表的关系
- 网易企业邮箱子邮箱发送邮件
- 赛门铁克网络版杀毒软件SEP布署小记
- 微软云计算业务表现强劲,股价创历史新高
热门文章
- C语言Register关键字:利用寄存器提升访问效率
- C++链接和运行相关错误
- Pyinstaller将外部数据文件打包到可执行文件中(onefolder or onefile)教程
- 编译异常例子java_Java中异常发生时代码执行流程
- 蓝桥杯2015年第六届C/C++省赛A组第九题-垒骰子
- Android SurfaceView动画(二)
- The block problem poj1208
- Java加密与解密笔记(二) 对称加密
- iOS 证书, provision profile作用
- name after, name for, name as