jQuery CSS 添加/删除类名
来源:互联网 发布:vr制图软件 编辑:程序博客网 时间:2024/05/26 02:54
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';
}
});
- jQuery CSS 添加/删除类名
- jQuery CSS 添加删除类名
- jQuery:CSS类的操作—添加样式、删除样式、更改样式名 .
- 原生JS添加类名 删除类名 检查是否含有某个CSS类名
- jquery的样式操作,类操作(添加 删除 css)
- 添加删除更改类名
- jQuery来了--进行CSS操作的方法(添加/删除类),CSS()方法
- 原生JS添加类名 删除类名
- css+jQuery+angular+table查询排序添加和批量删除
- 查看是否存在某个class类名 原生JS添加类名 删除类名
- Jquery删除css属性
- Js和Jquery动态添加删除类
- jQuery基础 -- 添加/移除CSS类
- JQuery添加删除行
- jQuery添加删除html
- jquery 添加、删除元素
- jquery 添加\删除 cookie
- Jquery添加删除行
- android 实现图片的边框
- file_operations file inode
- Android 为Activity屏幕的标题添加图标
- C语言中置0标志的使用
- SYSCALL_DEFINE3 宏定义
- jQuery CSS 添加/删除类名
- http 错误代码解释 && nginx 自定义错误
- 2011-8-11 10:40:54
- Android 自定义RadioButton的样式
- 2011-8-11 10:16:54
- 困惑
- 为什么编程是独一无二的职业
- Android中的样式和主题(style & theme)
- iPhone开发之全局变量的使用