JQueryDOM之样式操作

 更新时间£º2019年03月27日 09:51:14   作者£ºcc小马哥   我要评论

这篇文章主要介绍了JQueryDOM之样式操作£¬文中通过示例代码介绍的非常详细£¬对大家的学习或者工作具有一定的参考学习价值£¬需要的朋友们下面随着小编来一起学习学习吧

设置样式和获取样式

class 也是节点元素的属性£¬因此获取class 和设置class 都可以使用attr()方法来完成

追加样式

直接使用attr()方法设置class属性£¬会将原来的class属性替换掉

如果在添?#26377;?#30340;样式时£¬还需要保留原有样式£¬可以使用addClass()方法

注意£º当一个节点元素包含了多个class样式时£¬将按照以下方式进行处理£º

  1. 如果给一个元素添加了多个 class 值£¬ 那么就相当于合并了它们的样式
  2. 如果有不同的 class 设定了同一样式属性£¬ 则后者覆盖前者 

移除样式 

如果要删除class某个值£¬可以使用removeClass()方法完成£¬它的作用是从匹配的元素中删除全部或者指定的class

不传递参数时£¬删除所有£»给定参数时只删除指定的class

判断是否含有某个样式 

hasClass()方法可以用来判断元素中是否包含某个class£¬如果有则返回true£¬否则返回false

案例源码£º

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>DOM样式操作</title>
 <script src="../js/jquery-3.1.1.js"></script>
 <script>
  	// 
  	$(function(){
  		// 给id为p2的元素添加一个样式p_content
  		$("#btn1").click(function(){
  			$("#p2").attr("class","p_content");
  		});
  		// 追加样式
  		$("#btn2").click(function(){
  			$("#p1").addClass("p_bg");
  		});
  		// 移除样式
  		$("#btn3").click(function(){
  			// 如果removeClass里面不写参数的话¡£就是移除全部样式
  			$("#p1").removeClass("p_bg");
  			$("#p2").addClass("p_bg").removeClass("p_content");
  		});
  		// 判断样式
  		$("#btn4").click(function(){
  			alert($("#p2").hasClass("p_content"));
  		});
  	})
 </script>
 <style>
  .p_content {
   color: red;
   font-size: 15px;
  }
 
  .p_bg {
   background-color: red;
   color: yellow;
   font-weight: bold;
  }
 </style>
</head>
<body>
 <p id="p1" class="p_content">你最?#19981;?#30340;水果?</p>
 <ul>
  <li title="苹果">苹果</li>
  <li title="桔子">桔子</li>
  <li title="香蕉">香蕉</li>
 </ul>
 
 <p id="p2">你最?#19981;?#30340;运动是£¿</p>
 <ul>
  <li>游泳</li>
  <li>篮球</li>
  <li>足球</li>
 </ul>
 
 <button id="btn1">设置和获取样式</button>
 <button id="btn2">追加样式</button><br /><br />
 <button id="btn3">移除样式</button>
 <button id="btn4">判断样式</button><br /><br />
</body>
</html>
 

以上所述是小编给大家介绍的JQueryDOM之样式操作详解整合£¬希望对大家有所帮助£¬如果大家有任?#25105;?#38382;请给我留言£¬小编会及时回复大家的¡£在此也非常?#34892;?#22823;家对脚本之家网站的支持£¡

相关文章

  • 深入理解JavaScript系列£¨30£©£º设计模式之外观模式详解

    深入理解JavaScript系列£¨30£©£º设计模式之外观模式详解

    这篇文章主要介绍了深入理解JavaScript系列£¨30£©£º设计模式之外观模式详解,外观模式£¨Facade£©为子系统中的一组接口提供了一个一致的界面,此模块定义了一个高层接口,这个接口值得这一子系统更加容易使用,需要的朋友可以参考下
    2015-03-03
  • javascript与有限状态机详解

    javascript与有限状态机详解

    有限状态机£¨Finite-state machine£©是一个非常有用的模型£¬可以模拟世界上大部?#36136;?#29289;,下面是使用示例
    2014-05-05
  • JavaScript在IE和FF下的兼容性问题

    JavaScript在IE和FF下的兼容性问题

    长久以来JavaScript兼容性一直是Web开发者的一个主要问题¡£在正式规范¡¢事?#24403;ê×家¼s案÷Ö质?#29616;之间的存在的差异让许多开发者日夜煎熬¡£为此£¬主要从以下几方面差异总结IE和Firefox的Javascript兼容性:
    2014-05-05
  • JavaScript中__proto__与prototype的关系深入理解

    JavaScript中__proto__与prototype的关系深入理解

    本文将讨论下对象的内部原型(__proto__)和构造器的原型£¨prototype£©的关系£¬需要了解更多的朋友可以参考下
    2012-12-12
  • JavaScript中的prototype.bind()方法介绍

    JavaScript中的prototype.bind()方法介绍

    在JavaScript中£¬我们经常用到函数绑定£¬而当你需要在另一个函数中保持this上下文时£¬使用Function.prototype.bind()会很方便
    2014-04-04
  • 前端js文件合并的三种方式推荐

    前端js文件合并的三种方式推荐

    下面小编就为大家带来一篇前端js文件合并的三种方式推荐¡£小编觉得挺不错的£¬现在就分享给大家£¬也给大家做个参考¡£一起跟随小编过来看看吧
    2016-05-05
  • 最新评论

    常用在线小工具

    ÁÉÄþ35Ñ¡7¿ª½±½á¹û