码迷,mamicode.com
首页 > Web开发 > 详细

JQuery 03 CSS

时间:2020-08-01 12:32:55      阅读:98      评论:0      收藏:0      [点我收藏+]

标签:loading   highlight   函数   通过   interview   mask   span   分割   s函数   

技术图片

 

 示例 1 : 

增加class

通过addClass() 增加一个样式中的class
 
<script src="https://how2j.cn/study/jquery.min.js"></script>
 
<script>
$(function(){
   $("#b1").click(function(){
      $("#d").addClass("pink");
   });
  
});
  
</script>
  <button id="b1">增加背景色</button>
<br>
<br>
 
<style>
.pink{
   background-color:pink;
}
</style>
  
<div id="d">
  
Hello JQuery
  
</div>

技术图片

 

 示例 2 : 

删除class

通过removeClass() 删除一个样式中的class

<script src="https://how2j.cn/study/jquery.min.js"></script>
 
<script>
$(function(){
   $("#b1").click(function(){
      $("#d").removeClass("pink");
   });
  
});
  
</script>
  <button id="b1">删除背景色</button>
<br>
<br>
 
<style>
.pink{
   background-color:pink;
}
</style>
  
<div id="d" class="pink">
  
Hello JQuery
  
</div>

技术图片

 

 

示例 3 : 

切换class

通过toggleClass() 切换一个样式中的class
这里的切换,指得是:
如果存在就删除
如果不存在,就添加

<script src="https://how2j.cn/study/jquery.min.js"></script>
  
<script>
$(function(){
   $("#b1").click(function(){
      $("#d").toggleClass("pink");
   });
   
});
   
</script>
  <button id="b1">切换背景色</button>
<br>
<br>
  
<style>
.pink{
   background-color:pink;
}
</style>
   
<div id="d" >
   
Hello JQuery
   
</div>

技术图片

 

 

示例 4 : 

css函数

通过css函数 直接设置样式

css(property,value)

第一个参数是样式属性,第二个参数是样式值

css({p1:v1,p2:v2})

参数是 {} 包含的属性值对。
属性值对之间用 逗号,分割
属性值之间用 冒号 :分割
属性和值都需要用引号 “

<script src="https://how2j.cn/study/jquery.min.js"></script>
  
<script>
$(function(){
   $("#b1").click(function(){
      $("#d1").css("background-color","pink");
   });
   
   $("#b2").click(function(){
      $("#d2").css({"background-color":"pink","color":"green"});
   });
 
});
   
</script>
  <button id="b1">设置单一样式</button>
  <button id="b2">设置多种样式</button>
<br>
<br>
  
<div id="d1" >
   
单一样式,只设置背景色
   
</div>
 
<div id="d2" >
   
多种样式,不仅设置背景色,还设置字体颜色
   
</div>

技术图片

 

 

 

JQuery 03 CSS

标签:loading   highlight   函数   通过   interview   mask   span   分割   s函数   

原文地址:https://www.cnblogs.com/JasperZhao/p/13413291.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!