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 相关文章推荐
Javascript string 扩展库代码
Apr 09 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
Aug 02 Javascript
struts2+jquery组合验证注册用户是否存在
Apr 30 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
Nov 16 Javascript
浅谈javascript中createElement事件
Dec 05 Javascript
纯JavaScript代码实现移动设备绘图解锁
Oct 16 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
Apr 30 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 Javascript
微信小程序开发之转发分享功能
Oct 22 Javascript
vant中的toast层级改变操作
Nov 04 Javascript
js动态生成表格(节点操作)
Jan 12 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+mysql实现用户注册登陆的方法
2015/01/03 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
javascript实现的鼠标链接提示效果生成器代码
2007/06/28 Javascript
Javascript 判断客户端浏览器类型代码
2010/03/01 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
2013/08/07 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
2017/02/14 Javascript
javascript中apply/call和bind的使用
2017/02/15 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
微信小程序实现红包雨功能
2018/07/11 Javascript
vue代码分割的实现(codesplit)
2018/11/13 Javascript
微信小程序页面缩放式侧滑效果的实现代码
2018/11/15 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
[47:55]Ti4第二日主赛事败者组 NaVi vs EG 1
2014/07/20 DOTA
[03:42]2018完美盛典-《加冕》
2018/12/16 DOTA
centos系统升级python 2.7.3
2014/07/03 Python
利用Python自动监控网站并发送邮件告警的方法
2016/08/24 Python
python 每天如何定时启动爬虫任务(实现方法分享)
2018/05/21 Python
Django利用cookie保存用户登录信息的简单实现方法
2019/05/27 Python
Pandas时间序列基础详解(转换,索引,切片)
2020/02/26 Python
在python3中使用shuffle函数要注意的地方
2020/02/28 Python
python函数map()和partial()的知识点总结
2020/05/26 Python
python3:excel操作之读取数据并返回字典 + 写入的案例
2020/09/01 Python
pymysql模块使用简介与示例
2020/11/17 Python
美国大尺码女装零售商:TORRID
2016/10/01 全球购物
阿里健康官方海外旗舰店:阿里健康国际自营
2017/11/24 全球购物
体操比赛口号
2014/06/10 职场文书
中秋手机店促销方案
2014/06/16 职场文书
开展读书活动总结
2014/06/30 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
晚会闭幕词
2015/01/28 职场文书
MySQL的安装与配置详细教程
2021/06/26 MySQL
磁贴还没死, 微软Win11可修改注册表找回Win10开始菜单
2021/11/21 数码科技