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 相关文章推荐
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
jQuery validata插件实现方法
Jun 25 jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
jQuery实现动态加载瀑布流
Sep 01 jQuery
基于jQuery拖拽事件的封装
Nov 29 jQuery
jQuery实现简单轮播图效果
Dec 27 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
用PHP实现读取和编写XML DOM代码
2010/04/07 PHP
基于php缓存的详解
2013/05/15 PHP
php通过smtp邮件验证登陆的方法
2016/05/11 PHP
thinkPHP数据库增删改查操作方法实例详解
2016/12/06 PHP
javascript prototype 原型链
2009/03/12 Javascript
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
2014/05/04 Javascript
node.js中的fs.stat方法使用说明
2014/12/16 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
jquery实现全屏滚动
2015/12/28 Javascript
jQuery EasyUI 入门必看
2016/06/03 Javascript
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
VUE前端cookie简单操作
2017/10/17 Javascript
vue生成token保存在客户端localStorage中的方法
2017/10/25 Javascript
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
2018/04/28 Javascript
在vue中v-bind使用三目运算符绑定class的实例
2018/09/29 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
python脚本实现分析dns日志并对受访域名排行
2014/09/18 Python
Cpy和Python的效率对比
2015/03/20 Python
python下载微信公众号相关文章
2019/02/26 Python
PyCharm设置Ipython交互环境和宏快捷键进行数据分析图文详解
2020/04/23 Python
Django获取model中的字段名和字段的verbose_name方式
2020/05/19 Python
沃尔玛加拿大:Walmart.ca
2020/03/02 全球购物
Chi Chi London官网:购买连衣裙和礼服
2020/10/25 全球购物
司法局火灾防控方案
2014/06/05 职场文书
邀请函格式范文
2015/02/02 职场文书
2015年打非治违工作总结
2015/04/02 职场文书
首次购房证明
2015/06/19 职场文书
《成长的天空》读后感3篇
2019/12/06 职场文书
springboot 多数据源配置不生效遇到的坑及解决
2021/11/17 Java/Android
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers
Redis 限流器
2022/05/15 Redis
JS前端监控采集用户行为的N种姿势
2022/07/23 Javascript