JQueryDOM之样式操作


Posted in jQuery onMarch 27, 2019

设置样式和获取样式

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

追加样式

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

如果在添加新的样式时,还需要保留原有样式,可以使用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">你最喜欢的水果?</p>
 <ul>
  <li title="苹果">苹果</li>
  <li title="桔子">桔子</li>
  <li title="香蕉">香蕉</li>
 </ul>
 
 <p id="p2">你最喜欢的运动是?</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之样式操作详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
简单实现jQuery手风琴效果
Aug 18 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
jquery实现直播视频弹幕效果
Feb 25 jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 jQuery
浅谈JS和jQuery的区别
Mar 27 #jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 #jQuery
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 #jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 #jQuery
详解jQuery-each()方法
Mar 13 #jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 #jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 #jQuery
You might like
如何删除多级目录
2006/10/09 PHP
php is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
用PHP写的一个冒泡排序法的函数简单实例
2016/05/26 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
PHP实现数据库的增删查改功能及完整代码
2018/04/18 PHP
PHP中Session ID的实现原理实例分析
2019/08/17 PHP
JAVASCRIPT对象及属性
2007/02/13 Javascript
读jQuery之二(两种扩展)
2011/06/11 Javascript
JavaScript中switch判断容易犯错的一个细节
2014/08/27 Javascript
简介JavaScript中getUTCMonth()方法的使用
2015/06/10 Javascript
全面理解JavaScript中的闭包
2016/05/12 Javascript
jquery 中toggle的2种用法详解(推荐)
2016/09/02 Javascript
JavaScript中日常收集常见的10种错误(推荐)
2017/01/08 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
Vue核心概念Action的总结
2019/01/18 Javascript
ES6 Iterator接口和for...of循环用法分析
2019/07/31 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
JS跨浏览器解析XML应用过程详解
2020/10/16 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
Python break语句详解
2014/03/11 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
Python 实现中值滤波、均值滤波的方法
2019/01/09 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
python3 实现的对象与json相互转换操作示例
2019/08/17 Python
Python imread、newaxis用法详解
2019/11/04 Python
Python中logging日志的四个等级和使用
2020/11/17 Python
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
联想澳大利亚官网:Lenovo Australia
2018/01/18 全球购物
秸秆管理实施方案
2014/03/15 职场文书
2014年保管员工作总结
2014/11/18 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书
物业保洁员管理制度
2015/08/05 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书
MySQL大小写敏感的注意事项
2021/05/24 MySQL
如何用Python搭建gRPC服务
2021/06/30 Python