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和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
使用 jQuery 实现表单验证功能
Jul 05 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
JQuery获得内容和属性方法解析
May 30 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 htmlspecialchars加强版
2010/02/16 PHP
浅析Apache中RewriteCond规则参数的详细介绍
2013/06/30 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
JavaScript延迟加载
2021/03/09 Javascript
document.write()及其输出内容的样式、位置控制
2013/08/12 Javascript
jquery遍历数组与筛选数组的方法
2013/11/05 Javascript
javascript内置对象arguments详解
2014/03/16 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
DWR中各种java方法的调用
2016/05/04 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
2018/02/10 Javascript
vue组件传递对象中实现单向绑定的示例
2018/02/28 Javascript
Angular ElementRef简介及其使用
2018/10/01 Javascript
微信小程序中如何计算距离某个节日还有多少天
2019/07/15 Javascript
layui点击数据表格添加或删除一行的例子
2019/09/12 Javascript
BootstrapValidator验证用户名已存在(ajax)
2019/11/08 Javascript
Vuejs通过拖动改变元素宽度实现自适应
2020/09/02 Javascript
vue2.0 watch里面的 deep和immediate用法说明
2020/10/30 Javascript
解决element-ui的下拉框有值却无法选中的情况
2020/11/07 Javascript
Vue.extend 登录注册模态框的实现
2020/12/29 Vue.js
[01:01]2020完美高校联赛(秋)西安落幕
2021/03/11 DOTA
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
python求质数的3种方法
2018/09/28 Python
python3安装speech语音模块的方法
2018/12/24 Python
从0开始的Python学习016异常
2019/04/08 Python
Python partial函数原理及用法解析
2019/12/11 Python
会计职业生涯规划范文
2014/01/04 职场文书
2014年机关植树节活动方案
2014/02/27 职场文书
企业员工薪酬方案
2014/06/04 职场文书
四风问题对照检查材料整改措施
2014/09/27 职场文书
企业党支部工作总结2015
2015/05/21 职场文书
教师节获奖感言
2015/07/31 职场文书
生鲜超市—未来中国最具有潜力零售业态
2019/08/02 职场文书