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 ...
随机推荐
- 前端面试经典题目合集（HTML+CSS）一
1.说说你对HTML语义化的理解? (1)什么是HTML语义化? 根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析. ( ...
- 移动端meta标签的使用和设置
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale= ...
- Oracle中创建Job实现自动插入值操作
在PL/SQL Developer中创建Job --临时测试表 create table test_job ( id ), c_date date ); --临时序列 create sequence ...
- Android 自定义ScrollView(具有反弹效果的ScrollView,能够兼容横向的滑动)
package com.itau.jingdong.widgets; import android.content.Context; import android.graphics.Rect; imp ...
- SQL Server ->> SQL Server 2016新特性之 --- Query Store
前言 SQL Server 2016引入新的查询语句性能监控.调试和优化工具/功能 -- Query Store.以前我们发现一条查询语句性能突然下降,我们要去找出问题的所在往往需要通过调用一些DMV ...
- SQL-SERVER学习（一） 数据表的基本操作
1.创建一个数据库,数据库的名字是UserInfo create database UserInfo; 2.创建一个数据表,数据表的名字是UserInfocreate table UserInfo( ...
- Python学习---socketServer编程
学会去看源码 服务器端: import socketserver class MyServer(socketserver.BaseRequestHandler): def handle(self): ...
- 华为HCNP实验 DHCP配置
HCNP实验 DHCP配置 学习目的 1.掌握ip pool的配置方法2.掌握DHCP服务器的配置方法3.掌握DHCP客户端的配置方法4.掌握DHCP中继的配置方法5.掌握DHCP Snooping的 ...
- Yii 多表关联relations
1,首先多表关联是在models/xx.php的relations里配置的.而且是互配,但有区别.格式:'VarName'=>array('RelationType', 'ClassName', ...
- shiro权限配置的细节问题&认证
细节: ---[urls]部分配置,其格式是 url=拦截器[参数] ,拦截器[参数] ---如果当前请求的 url 匹配 [urls] 部分或者某个url模式,将会执行配置的拦截器 ---an ...