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 相关文章推荐
经典海量jQuery插件 大家可以收藏一下
Feb 07 Javascript
Jquery插件之打造自定义的select标签
Nov 30 Javascript
js indexOf()定义和用法
Oct 21 Javascript
jquery实现背景墙聚光灯效果示例分享
Mar 02 Javascript
jQuery创建DOM元素实例解析
Jan 19 Javascript
js使用DOM操作实现简单留言板的方法
Apr 10 Javascript
js一维数组、多维数组和对象的混合使用方法
Apr 03 Javascript
jQuery实现字符串全部替换的方法【推荐】
Mar 09 Javascript
深入理解ES6之数据解构的用法
Jan 13 Javascript
JavaScript中创建原子的方法总结
Aug 26 Javascript
Vue props中Object和Array设置默认值操作
Jul 30 Javascript
javascript的hashCode函数实现代码小结
Aug 11 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
PHP5 面向对象程序设计
2008/02/13 PHP
php 防止单引号,双引号在接受页面转义
2008/07/10 PHP
使用VisualStudio开发php的图文设置方法
2010/08/21 PHP
php判断对象是派生自哪个类的方法
2015/06/20 PHP
[原创]解决wincache不支持64位PHP5.5/5.6的问题(提供64位wincache下载)
2016/06/22 PHP
PHP后台备份MySQL数据库的源码实例
2019/03/18 PHP
PHP 图片处理
2020/09/16 PHP
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
javascript判断office版本示例
2014/04/11 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
jQuery中:checkbox选择器用法实例
2015/01/03 Javascript
angularJS Provider、factory、service详解及实例代码
2016/09/21 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
使用 Node.js 开发资讯爬虫流程
2018/01/07 Javascript
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
Java 生成随机字符的示例代码
2021/01/13 Javascript
Python生成验证码实例
2014/08/21 Python
django实现分页的方法
2015/05/26 Python
利用Hyperic调用Python实现进程守护
2018/01/02 Python
Python简单爬虫导出CSV文件的实例讲解
2018/07/06 Python
python3实现字符串的全排列的方法(无重复字符)
2018/07/07 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
Python单链表原理与实现方法详解
2020/02/22 Python
Tensorflow中k.gradients()和tf.stop_gradient()用法说明
2020/06/10 Python
python类共享变量操作
2020/09/03 Python
C语言开发工程师测试题
2016/12/20 面试题
什么是ESB?请介绍一下ESB?
2015/05/27 面试题
财务科长个人对照检查材料
2014/09/18 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
先进集体事迹材料范文
2014/12/25 职场文书
试用期自我评价怎么写
2015/03/10 职场文书
Django 如何实现文件上传下载
2021/04/08 Python