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 ...
随机推荐
- Windows操作系统下给文件夹右键命令菜单添加启动命令行的选项
在命令行中或按下[WIN]+[R]键启动运行对话框的情况下,输入regedit命令启动注册表编辑器,在HKEY_CLASSES_ROOT\Folder\shell下增加一个“CMD”(此处名字可以随便 ...
- hive中的bucket table
前言 bucket table(桶表)是对数据进行哈希取值,然后放到不同文件中存储 应用场景 当数据量比较大,我们需要更快的完成任务,多个map和reduce进程是唯一的选择.但是如果输入文件是一个的 ...
- Ubuntu上如何搭建Android开发环境
1.以下是开始Android应用程序编程之前需要的软件列表: a.Java JDK5 及以后版本 b.Java运行环境 c.Android Studio 2.安装Android Studio: x64 ...
- 用C读取INI配置文件
http://blog.csdn.net/chexlong/article/details/6818017 #define CONF_FILE_PATH "Config.ini" ...
- 用两个栈实现队列(C++ 和 Python 实现)
(说明:本博客中的题目.题目详细说明及参考代码均摘自 “何海涛<剑指Offer:名企面试官精讲典型编程题>2012年”) 题目 用两个栈实现一个队列.队列的声明如下,请实现它的两个函数 a ...
- java操作svn【svnkit】实操
SVNKit中怎样使用不同的仓库访问协议? 当你下载了最新版的SVNKit二进制文件并且准备使用它时,一个问题出现了,要创建一个库需要做哪些初始化的步骤?直接与Subversion仓库交互已经在低级层 ...
- 数据库建模工具 PD的使用
1.1. 数据库建模工具 PD的使用 安装12.5版本,进行破解 PD 是最专业数据建模工具, 是 Sybase 公司一个 产品 PD 提供四种模型文件 PDM 物理数据模型,面向数据库表结构设计,直 ...
- yii2.0中解决post的400错误
不想用gii的表单自己写表单,但是又遇到了400错误,怎么解决?下面为你解答一下:
- Intellij idea用快捷键自动生成序列化id
ntellij idea用快捷键自动生成序列化id 类继承了Serializable接口之后,使用alt+enter快捷键自动创建序列化id 进入setting→inspections→seriali ...
- vsphere的P2V工具做的物理机迁移到虚拟机报错out of memory
vsphere的P2V工具做的物理机迁移到虚拟机 迁移成功,但是启动报错 进入rescue模式后发现是sysctl.conf文件的参数设大了因为虚拟机的内存没有物理机内存大 kernel.shm ...