关闭

jQuery如何为指定标签添加和删除一个样式

时间: 2018-06-04阅读: 1274标签: 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>

以上代码可以进行指定样式类的删除与添加的切换。

 转载地址:jQuery如何为指定标签添加和删除一个样式


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/850

jQuery中四个绑定事件的区别 on,bind,live,delegate

jQ中提供了四种事件监听方式,bind、live、delegate、on,对应的解除监听的函数分别是unbind,die,undelegate,off.用.bind(),把相同的一个事件处理机制用到所有匹配的DOM元素上;多事件处理

jQuery属性操作之.val()函数

val()实例方法的三种用法:.val() : 获取匹配的元素集合中第一个元素的当前value属性值(property).val(value) : 设置匹配的元素集合中每个元素的value属性值(property).val(function(index,value){}) :钩子函数未设置或无效时

jQuery的淡入淡出

在jQuery中的一些特效中,可以通过四个方法来实现元素的淡入淡出,这四个方法分别是:fadeIn()、fadeOut()、fadeToggle() 以及 fadeTo(),下面为分别为大家介绍各个方式的使用。

高版本jquery中attr和prop的区别

在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

在jQuery中使用自定义属性

在jquery中 自定义属性及值,默认以下都是在class=‘acitve‘对象中 进行自定义属性操作:自定义属性格式:data-xxxx;审查元素是看不到该属性的,只能输出控制台可以看到该值。

时隔一年,jQuery 发布 3.4.0 版本

jQuery 团队的核心开发者 Timmy Willison 今天在官网宣布了 jQuery 3.4.0,这距离上个版本 3.3.x 系列的推出已过去了一年多。Timmy 表示这可能是 3.x 分支的最后一个小版本更新,接下来的工作重心将是 jQuery 4.0 大版本的更新。

jquery中toggleClass(), index()

toggleClass()对设置货已出被选元素的一个或多个类进行切换。该方法检查每个元素中指定的类,如果不存在则添加类,如果已设置则将之删除。这就是所谓的切换效果,不过通过“switch”参数,只能够规定只删除或者添加类。

JQuery 自动触发事件

在JQuery中,可以使用trigger()方法完成模拟操作,trigger()方法不仅能触发浏览器支持的具有相同名称的事件,也可以触发自定义名称的事件。rigger(type[,data])方法有两个参数

jQuery UI有四大功能

jQuery UI (译:jQuery用户界面) 是:以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件

是时候和 jQuery 说拜拜了么?

在网络上也时不时会看到,“是时候和jQuery说拜拜了”,最著名的莫过于在2013年的这篇文章You Might Not Need jQuery。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!