JQuery系列教材（三）- 中对CSS样式的操作

通过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>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

通过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>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

通过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>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

通过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>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

跟着做了，但是还是有问题，跑不起来。
原有主要有二：
1. 自己做了改动，因为对项目还不熟悉，这些改动导致项目跑不起来。
2. 以为自己没做改动，其实还是做了改动，这个时常发生。
为了解决这个问题，站长特意把当前的可运行项目放在了右上角下载，这样通过比较，就可以快速定位问题所在，大大地提高学习效率。

推荐使用diffmerge软件，进行文件夹比较。把你自己做的项目文件夹，和我的可运行项目文件夹进行比较。
这个软件很牛逼的，可以知道文件夹里哪两个文件不对，并且很明显地标记出来
这里提供了绿色安装和使用教程：diffmerge 下载和使用教程
需要的附件在下载页的右上角,点击进入

JQuery系列教材 （三）- 中对CSS样式的操作

JQuery系列教材（三）- 中对CSS样式的操作