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 相关文章推荐
W3C Group的JavaScript1.8 新特性介绍
May 19 Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
Oct 01 Javascript
11款新鲜的jQuery插件[附所有demo下载]
Jan 24 Javascript
js点击页面其它地方将某个显示的DIV隐藏
Jul 12 Javascript
学习使用bootstrap3栅格系统
Apr 12 Javascript
老生常谈JavaScript 函数表达式
Sep 01 Javascript
详解AngularJs中$resource和restfu服务端数据交互
Sep 21 Javascript
微信小程序中使用wxss加载图片并实现动画效果
Aug 13 Javascript
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
利用JavaScript将Excel转换为JSON示例代码
Jun 14 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
Jul 10 Javascript
Vue组件通信$attrs、$listeners实现原理解析
Sep 03 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
第十三节 对象串行化 [13]
2006/10/09 PHP
php中将网址转换为超链接的函数
2011/09/02 PHP
解析thinkphp基本配置 convention.php
2013/06/18 PHP
php实现购物车产品删除功能(2)
2020/07/23 PHP
laravel利用中间件防止未登录用户直接访问后台的方法
2019/09/30 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
js 文件引入实现代码
2010/04/23 Javascript
js 浏览器事件介绍
2012/03/30 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
2017/07/17 Javascript
微信小程序实现页面分享onShareAppMessage
2019/08/12 Javascript
vue 遮罩层阻止默认滚动事件操作
2020/07/28 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
详解Django中的ifequal和ifnotequal标签使用
2015/07/16 Python
举例讲解Python中的死锁、可重入锁和互斥锁
2015/11/05 Python
深入理解Python中的*重复运算符
2017/10/28 Python
python3解析库pyquery的深入讲解
2018/06/26 Python
django ajax发送post请求的两种方法
2020/01/05 Python
python3处理word文档实例分析
2020/12/01 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
在css3中background-clip属性与background-origin属性的用法介绍
2012/11/13 HTML / CSS
CSS去掉A标签(链接)虚线框的方法
2014/04/01 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
2014/01/14 HTML / CSS
一级方程式赛车官方网上商店:F1 Store(支持中文)
2018/01/12 全球购物
苏格兰销售女装、男装和童装的连锁店:M&Co
2018/03/16 全球购物
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
如何写你的创业计划书
2014/01/07 职场文书
元旦晚会邀请函
2014/02/01 职场文书
路政管理毕业自荐书范文
2014/02/10 职场文书
致跳远运动员广播稿
2014/02/11 职场文书
小学庆六一活动方案
2014/02/28 职场文书
班主任新年寄语
2014/04/04 职场文书
2014年减负工作总结
2014/12/10 职场文书
世界遗产导游词
2015/02/13 职场文书
2015年乡镇食品安全工作总结
2015/10/22 职场文书
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL
Python日志模块logging用法
2022/06/05 Python