jQuery中addClass()方法用法实例


Posted in Javascript onJanuary 05, 2015

本文实例讲述了jQuery中addClass()方法用法。分享给大家供大家参考。具体分析如下:

此方法向匹配元素添加一个或多个类。
此方法有多个语法形式。

语法结构一:

为匹配元素添加指定的类名。如果要一次性添加多个类名,它们之间要用空格分隔。

$(selector).addClass(class)

参数列表:

参数 描述
class 定义被添加类的名称

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>addClass函数-三水点靠木</title> 

<style type="text/css">

div{

  height:200px;

  width:200px;

}

.border{

  border:1px solid red;

}

.reset{

  font-size:20px;

  color:green;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("#btn").click(function(){

    $("div").addClass("border reset");

  })

})

</script>

</head>

<body>

<div>三水点靠木欢迎您</div>

<button id="btn">点击查看效果</button>

</body>

</html>

以上代码可以为div添加两个类,能够设置div的边框和字体的样式。

语法结构二:

以函数的返回值作为要添加的类名。

$(selector).addClass(function(index,oldclass))

参数列表:

参数 描述
function(index,oldclass) 函数定义返回需要添加的一个或多个类名。 index - 可选,接受选择器的索引位置。 oldclass- 可选,接受选择器的当前的类名。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>addClass()函数-三水点靠木</title> 

<style type="text/css">

div{

  height:200px;

  width:200px;

}

.border{

  border:1px solid red;

}

.reset{

  font-size:20px;

  color:green;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("#btn").click(function(){

    $("div").addClass(function(){

      return "border reset";

    })

  })

})

</script>

</head>

<body>

  <div>三水点靠木欢迎您</div>

  <button id="btn">点击查看效果</button>

</body>

</html>

上面代码和第一个实例的功能是一样的,只不过要添加的类是通过函数返回值得到的。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery常见开发技巧详细整理
Jan 02 Javascript
nodeType属性返回被选节点的节点类型介绍
Nov 22 Javascript
JavaScript获取table中某一列的值的方法
May 06 Javascript
深入学习jQuery Validate表单验证
Jan 18 Javascript
Bootstrap模仿起筷首页效果
May 09 Javascript
浅谈javascript中的Function和Arguments
Aug 30 Javascript
JavaScript仿聊天室聊天记录
Dec 27 Javascript
JS实现unicode和UTF-8之间的互相转换互转
Jul 05 Javascript
Javacript中自定义的map.js  的方法
Nov 26 Javascript
微信小程序授权登录及解密unionId出错的方法
Sep 26 Javascript
JavaScript时间日期操作实例小结【5个示例】
Dec 22 Javascript
JS绘图Flot如何实现可选显示曲线图功能
Oct 16 Javascript
js Calender控件使用详解
Jan 05 #Javascript
js的回调函数详解
Jan 05 #Javascript
判断浏览器的内核及版本号方法汇总
Jan 05 #Javascript
jQuery中removeProp()方法用法实例
Jan 05 #Javascript
jQuery中prop()方法用法实例
Jan 05 #Javascript
jQuery中removeAttr()方法用法实例
Jan 05 #Javascript
jQuery实现鼠标滚轮动态改变样式或效果
Jan 05 #Javascript
You might like
php生成xml时添加CDATA标签的方法
2014/10/17 PHP
PHP基于自定义函数生成笛卡尔积的方法示例
2017/09/30 PHP
jquery 卷帘效果实现代码(不同方向)
2013/02/05 Javascript
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
javascript实现控制文字大中小显示
2015/04/28 Javascript
18个非常棒的jQuery代码片段
2015/11/02 Javascript
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
2016/05/05 Javascript
jQuery编写网页版2048小游戏
2017/01/06 Javascript
JS基于递归实现网页版计算器的方法分析
2017/12/20 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
微信小程序实现富文本图片宽度自适应的方法
2019/01/20 Javascript
JavaScript多种页面刷新方法小结
2019/04/04 Javascript
微信小程序开发实现消息推送
2020/11/18 Javascript
vuex存值与取值的实例
2019/11/06 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
Js和VUE实现跑马灯效果
2020/05/25 Javascript
解决vue项目获取dom元素宽高总是不准确问题
2020/07/29 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
简介Django框架中可使用的各类缓存
2015/07/23 Python
Python连接数据库学习之DB-API详解
2017/02/07 Python
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
澳洲健康食品网上商店:Aussie Health Products
2018/06/15 全球购物
我们的节日中秋活动方案
2014/08/19 职场文书
个人剖析材料及整改措施
2014/10/07 职场文书
2014年行政部工作总结
2014/11/19 职场文书
深入详解JS函数的柯里化
2021/06/09 Javascript
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB
SQL Server远程连接的设置步骤(图文)
2022/03/23 SQL Server
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL
Vue2项目中对百度地图的封装使用详解
2022/06/16 Vue.js