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 12 Javascript
web页面数据展示新想法(json)
Jun 08 Javascript
js实现有时间限制消失的图片方法
Feb 27 Javascript
探究Javascript模板引擎mustache.js使用方法
Jan 26 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
Aug 25 Javascript
js导出excel文件的简洁方法(推荐)
Nov 02 Javascript
微信小程序实现锚点定位楼层跳跃的实例
May 18 Javascript
angularjs之$timeout指令详解
Jun 13 Javascript
基于vue通用表单解决方案的思考与分析
Mar 16 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
Mar 29 Javascript
JavaScript复制变量三种方法实例详解
Jan 09 Javascript
js实现简单的打印表格
Jan 15 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
颠覆常识!无色透明的咖啡诞生了(中日双语)
2021/03/03 咖啡文化
用 php 编写的日历
2006/10/09 PHP
在服务端进行目录建立、删除,文件上传、删除的过程的php代码
2008/09/10 PHP
php导出csv格式数据并将数字转换成文本的思路以及代码分享
2014/06/05 PHP
php自动载入类用法实例分析
2016/06/24 PHP
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
数组任意位置插入元素,删除特定元素的实例
2017/03/02 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
基于jquery的让textarea自适应高度的插件
2010/08/03 Javascript
JS 精确统计网站访问量的实例代码
2013/07/05 Javascript
jquerymobile局部渲染的各种刷新方法小结
2014/03/05 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
2020/08/11 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
2018/03/01 Javascript
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
2019/09/13 Javascript
Vue3 中的数据侦测的实现
2019/10/09 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
2020/11/07 Javascript
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
python元组的概念知识点
2019/11/19 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
pycharm 激活码及使用方式的详细教程
2020/05/12 Python
python线程优先级队列知识点总结
2021/02/28 Python
语文教师求职信范文
2015/03/20 职场文书
电力工程合作意向书
2015/05/11 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript
python 中的jieba分词库
2021/11/23 Python