jQuery 属性操作 - addClass() 和 removeClass() 方法
实例
向第一个 p 元素添加一个类：
$("button").click(function(){
$("p:first").addClass("intro");
});
定义和用法
addClass() 方法向被选元素添加一个或多个类。
该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。
提示：如需添加多个类，请使用空格分隔类名。
语法
$(selector).addClass(class)
| 参数 | 描述 |
|---|---|
| class | 必需。规定一个或多个 class 名称。 |
使用函数来添加类
使用函数向被选元素添加类。
语法
$(selector).addClass(function(index,oldclass))
$(document).ready(function(){
$("button").click(function(){
$("p:first").addClass("intro note");
});
});
removeClass() 方法 实例
移除所有 <p> 的 "intro" 类：
$("button").click(function(){
$("p:first").removeClass("intro");
});
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$('ul li').removeClass(function() {
return 'listitem_' + $(this).index();
});
});
});
</script>
<style type="text/css">
.listitem_1, .listitem_3
{
color:red;
}
.listitem_0, .listitem_2
{
color:blue;
}
</style>
</head> <body>
<h1 id="h1">This is a heading</h1>
<ul>
<li class="listitem_0">Apple</li>
<li class="listitem_1">IBM</li>
<li class="listitem_2">Microsoft</li>
<li class="listitem_3">Google</li>
</ul>
<button>删除列表项中的类</button>
</body>
</html>
jQuery 属性操作 - addClass() 和 removeClass() 方法的更多相关文章
- jQuery 属性操作 - addClass() 方法
使用 addClass() 和 removeClass() 来移除 class,并添加新的 class. <html> <head> <script type=" ...
- 原生js模拟jquery中的addClass和removeClass方法
js代码: //添加类 function addClass(obj,className) { if(obj.className == '') { //如果没有class obj.className = ...
- JQuery中操作Css样式的方法
JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...
- 【转发】JQuery中操作Css样式的方法
JQuery中操作Css样式的方法 //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#t ...
- jQuery属性操作（四）
通过阅读jQuery为属性操作封装的基本方法和为处理兼容性问题提供的hooks,发现jQuery在属性操作方面并没有做过多的设计,只是处理一下兼容性问题,然后调用基础的DOM操作方法.以下是对JQue ...
- jquery——属性操作、特殊效果
1. attr().prop() 取出或者设置某个属性的值 <!DOCTYPE html> <html lang="en"> <head> &l ...
- jQuery 属性操作 - val() 方法
val() 方法返回或设置被选元素的值. 元素的值是通过 value 属性设置的.该方法大多用于 input 元素. 如果该方法未设置参数,则返回被选元素的当前值. <html> < ...
- jQuery 属性操作 - attr() 方法
定义和用法 attr() 方法设置或返回被选元素的属性值. 根据该方法不同的参数,其工作方式也有所差异. 实例1 设置被选元素的属性和值. <html><head><sc ...
- jQuery属性操作
jQuery 的属性操作的核心部分其实就是对底层 getAttribute().setAttributes()等方法的一系列兼容性处理 ...if ( notxml ) { name = name.t ...
随机推荐
- JavaScript 递归法排列组合二维数组
<html> <head> <title>二维数组排列组合</title> </head> <body> <div id= ...
- js数组方法 改变原数组和不改变原数组的方法整理
改变原数组: pop(): 删除 arrayObject 的最后一个元素,把数组长度减 1,并且返回它删除的元素的值.如果数组已经为空,则 pop() 不 改变数组,并返回 undefined 值 ...
- easyui汉化啊！
<script type="text/javascript" src="__PUBLIC__/jquery-easyui-1.4.4/locale/easyui-l ...
- C#链接数据库：SQL Server 2008
自己学习C#编程,在WinForm编程中,代码测试连接数据库. 现在sqlserver中测试使用的数据库能否以指定的用户名和密码登录. 如图所示,计算机名为administrator,数据库实例为sq ...
- memset用法详解
原文:http://www.cnblogs.com/PegasusWang/archive/2013/01/20/2868824.html 1.void *memset(void *s,int c,s ...
- Retrofit实现图文上传至服务器
Retrofit实现图文上传至服务器 前言:现在大多数的项目中都涉及图片+文字上传了,下面请详见实现原理: 开发环境:AndroidStudio 1.引入依赖: compile 'com.square ...
- EF多实体对应单表
1.EF多实体对应单表 适用场景:单数据库表,表数据有较长用字段,有不常用或者大数据字段. 2.建表语句 CREATE TABLE [Chapter2].[Photograph]( ,) primar ...
- 十大创客与微软智能云Azure
由微软举办的“2016年创客先锋—基于微软智能云Azure 的 SaaS 应用软件大赛”已于本周二在中关村圆满落幕.来自全国22家孵化园的创客,历时两个月,开发出百余项基于微软智能云Azure开发的创 ...
- 远程桌面连接无法验证您希望连接的计算机的身份-mac连接远程桌面
在使用Mac(苹果笔记本)连接远程桌面的时候提示:”远程桌面连接无法验证您希望连接的计算机的身份”,具体异常如截图:解决方法如下:1. 登录云服务器.2. 打开运行,然后输入命令gpedit.msc, ...
- UEditor 中配置可以跨域访问的图片路径
文档里很清楚:http://fex.baidu.com/ueditor/#server-path 进入配置文件 当域名不是直接配置到项目根目录时,例:http://a.com/b/c 域名下有两文件 ...