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 相关文章推荐
禁止选中文字兼容IE、Chrome、FF等
Sep 04 Javascript
javascript获取当前鼠标坐标的方法
Jan 10 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
Nov 20 Javascript
微信小程序 简单教程实例详解
Jan 13 Javascript
JS 调试中常见的报错问题解决方法
May 20 Javascript
webpack2.0配置postcss-loader的方法
Aug 17 Javascript
js禁止Backspace键使浏览器后退的实现方法
Sep 01 Javascript
babel的使用及安装配置教程
Feb 22 Javascript
vue.js使用v-if实现显示与隐藏功能示例
Jul 06 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 13 Javascript
VUE实时监听元素距离顶部高度的操作
Jul 29 Javascript
分享几个JavaScript运算符的使用技巧
Apr 24 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
解析数组非数字键名引号的必要性
2013/08/09 PHP
PHP打印输出函数汇总
2016/08/28 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
PHP模版引擎原理、定义与用法实例
2019/03/29 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
javascript比较文档位置
2008/04/08 Javascript
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
2009/11/26 Javascript
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
2014/01/07 Javascript
javascript检测两个数组是否相似
2015/05/19 Javascript
javascript的函数劫持浅析
2016/09/26 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
微信小程序页面生命周期详解
2018/01/31 Javascript
JavaScript防止全局变量污染的方法总结
2018/08/02 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
浅谈vue权限管理实现及流程
2020/04/23 Javascript
Python实现合并两个列表的方法分析
2018/05/28 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
朴素贝叶斯Python实例及解析
2018/11/19 Python
Python 函数返回值的示例代码
2019/03/11 Python
Pytorch中膨胀卷积的用法详解
2020/01/07 Python
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
Johnston & Murphy官网: 约翰斯顿·墨菲牛津总统鞋
2018/01/09 全球购物
娇韵诗俄罗斯官方网站:Clarins俄罗斯
2020/10/03 全球购物
必须要使用游标的SQL语句有那些
2012/05/07 面试题
企业项目策划书
2014/01/11 职场文书
药品采购员岗位职责
2014/02/08 职场文书
安全教育感言
2014/03/04 职场文书
爱情寄语大全
2014/04/09 职场文书
勤俭节约倡议书
2014/04/14 职场文书
新员工试用期自我评价
2015/03/10 职场文书
深入浅析React中diff算法
2021/05/19 Javascript
使用canvas仿Echarts实现金字塔图的实例代码
2021/11/11 HTML / CSS