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插件开发发送短信倒计时功能代码
May 09 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
jQuery实现穿梭框效果
Jan 19 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
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
php对文件夹进行相关操作(遍历、计算大小)
2015/11/04 PHP
JS是否可以跨文件同时控制多个iframe页面的应用技巧
2007/12/16 Javascript
常用一些Javascript判断函数
2012/08/14 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
2013/06/19 Javascript
jQuery 全选/反选以及单击行改变背景色实例
2013/07/02 Javascript
Jquery方式获取iframe页面中的 Dom元素
2014/05/07 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
关于Jquery中的事件绑定总结
2016/10/26 Javascript
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
vuex vue简单使用知识点总结
2019/08/29 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
Vue插件之滑动验证码用法详解
2020/04/05 Javascript
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
Python中的True,False条件判断实例分析
2015/01/12 Python
在Python的Django框架中编写错误提示页面
2015/07/22 Python
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
Python语言的变量认识及操作方法
2018/02/11 Python
详解小白之KMP算法及python实现
2019/04/04 Python
Python中的相关分析correlation analysis的实现
2019/08/29 Python
pygame实现非图片按钮效果
2019/10/29 Python
如何基于Python pygame实现动画跑马灯
2020/11/18 Python
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
中科软笔试题和面试题
2014/10/07 面试题
数控技术专业推荐信
2013/11/01 职场文书
演讲比赛策划方案
2014/06/11 职场文书
社区服务活动小结
2014/07/08 职场文书
2014年监理工作总结范文
2014/11/17 职场文书
关于元旦的广播稿2016
2015/12/17 职场文书
Python中tkinter的用户登录管理的实现
2021/04/22 Python
Java多条件判断场景中规则执行器的设计
2021/06/26 Java/Android