jQuery添加和删除指定标签的方法


Posted in Javascript onDecember 16, 2015

jQuery如何为指定标签添加和删除一个样式:
在网页的实际应用中,需要根据不同的条件来改变元素的CSS样式,通过动态的给元素添加删除一个CSS类可以实现此功能,下面通过实例来介绍一下如何实现此种功能。
一.使用addClass()和removeClass()添加和删除一个CSS类:
代码实例如下:

<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>首页</title> 
<style type="text/css">
.mytest{
 border:1px solid green;
 width:100px;
 height:100px;
 color:red;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
 $("#add").click(function () {
 $("div").addClass("mytest");
 });
 $("#del").click(function () {
 $("div").removeClass("mytest");
 })
})
</script>
<body>
<div>珍惜当前,因为只有当前才是实实在在的</div>
<button id="add">添加样式</button>
<button id="del">删除样式</button>
</body>
</html>

以上代码可以添加删除指定的样式,上面只是一个演示,可以根据具体的需要进行添加或者删除。
二.使用toggleClass()进行样式类的添加和删除的切换:
如果匹配对象具有指定的样式类,那么toggleClass()就可以删除此指定的类,如果没有就会添加指定的类。代码实力如下:

<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>首页</title> 
<style type="text/css">
.mytest{
 border:1px solid green;
 width:100px;
 height:100px;
 color:red;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
 $("#switch").click(function () {
 $("div").toggleClass("mytest");
 });
})
</script>
<body>
<div class="mytest">珍惜当前,因为只有当前才是实实在在的</div>
<button id="switch">删除与添加切换</button>
</body>
</html>

以上代码可以进行指定样式类的删除与添加的切换,希望大家可以亲自动手进行操作,收获可能会更大。

Javascript 相关文章推荐
javascript 定义初始化数组函数
Sep 07 Javascript
asp.net 30分钟掌握无刷新 Repeater
Sep 16 Javascript
ie8本地图片上传预览示例代码
Jan 12 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
Jun 23 Javascript
js 实现省市区三级联动菜单效果
Feb 20 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
JS抛物线动画实例制作
Feb 24 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
Aug 15 Javascript
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
vue和iview实现Scroll 数据无限滚动功能
Oct 31 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
Nov 14 Javascript
解决ant Design中Select设置initialValue时的大坑
Oct 29 Javascript
详解JavaScript基于面向对象之继承实例
Dec 16 #Javascript
javascript实现拖放效果
Dec 16 #Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
Dec 15 #Javascript
Jquery插件easyUi实现表单验证示例
Dec 15 #Javascript
解决WordPress使用CDN后博文无法评论的错误
Dec 15 #Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
Dec 15 #Javascript
jQuery进行组件开发完整实例
Dec 15 #Javascript
You might like
怎样辨别一杯好咖啡
2021/03/03 新手入门
php使HTML标签自动补全闭合函数代码
2012/10/04 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
迁移PHP版本到PHP7
2015/02/06 PHP
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
2017/07/03 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
javascript:void(0)的真正含义实例分析
2008/08/20 Javascript
JavaScript和ActionScript的交互实现代码
2010/08/01 Javascript
jQuery简单实现banner图片切换
2014/01/02 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
javascript学习笔记之函数定义
2015/06/25 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
js 获取图像缩放后的实际宽高,位置等信息
2017/03/07 Javascript
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
解析Angular 2+ 样式绑定方式
2018/01/15 Javascript
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
2019/04/26 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
Nuxt的路由配置和参数传递方式
2020/11/06 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
Python对两个有序列表进行合并和排序的例子
2014/06/13 Python
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
Python使用OpenCV进行标定
2018/05/08 Python
pycharm 解除默认unittest模式的方法
2018/11/30 Python
浅谈python 中的 type(), dtype(), astype()的区别
2020/04/09 Python
法雷奥SQA(electric)面试问题
2016/01/23 面试题
自我反省检讨书
2014/01/23 职场文书
安全责任书模板
2014/07/22 职场文书
解除劳动合同协议书范本2014
2014/09/25 职场文书
2016年社区“我们的节日·中秋节”活动总结
2016/04/05 职场文书
HAM-2000摩机图
2021/04/22 无线电
MySQL创建表操作命令分享
2022/03/25 MySQL
Go 内联优化让程序员爱不释手
2022/06/21 Golang