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中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
Jquery获取radio选中的值
May 05 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
详解jquery选择器的原理
Aug 01 jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 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网页后退不再出现过期
2007/03/08 PHP
php微信公众号js-sdk开发应用
2016/11/28 PHP
php 微信开发获取用户信息如何实现
2016/12/13 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
js实现拉伸拖动iframe的具体代码
2013/08/03 Javascript
百度移动版的url编码解码示例
2014/04/29 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
2015/08/25 Javascript
图解js图片轮播效果
2015/12/20 Javascript
JavaScript文本框脚本编写的注意事项
2016/01/25 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
JavaScript仿支付宝6位数字密码输入框
2016/12/29 Javascript
JS中Array数组学习总结
2017/01/18 Javascript
原生javascript上传图片带进度条【实例分享】
2017/04/06 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
vue使用xe-utils函数库的具体方法
2018/03/06 Javascript
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
2018/05/16 Javascript
js 获取扫码枪输入数据的方法
2020/06/10 Javascript
Python 执行字符串表达式函数(eval exec execfile)
2014/08/11 Python
利用Python读取文件的四种不同方法比对
2017/05/18 Python
Python网络爬虫中的同步与异步示例详解
2018/02/03 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
Python发展简史 Python来历
2019/05/14 Python
手写一个python迭代器过程详解
2019/08/27 Python
python采集百度搜索结果带有特定URL的链接代码实例
2019/08/30 Python
tensorflow 获取所有variable或tensor的name示例
2020/01/04 Python
如何理解Python中的变量
2020/06/01 Python
高中毕业生生活的自我评价
2013/12/08 职场文书
小学生植树节活动总结
2014/07/04 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
党员自我剖析材料
2014/08/31 职场文书
2015年留守儿童工作总结
2015/05/22 职场文书
离婚财产分割协议书
2015/08/11 职场文书
情况说明书格式及范文
2019/06/24 职场文书