[b] - JQuery - 前端部分[/b]
[b]步骤1:增加class[/b]

通过addClass() 增加一个样式中的class
[code="java"]<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>
[/code]



[b]步骤2:删除class[/b]

通过removeClass() 删除一个样式中的class
[code="java"]<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>
[/code]



[b]步骤3:切换class[/b]

通过toggleClass() 切换一个样式中的class

这里的[b][u]切换[/u][/b]，指得是：

    如果存在就删除

    如果不存在，就添加
[code="java"]<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>
[/code]



[b]步骤4:css函数[/b]

通过css函数 直接设置样式
[code]
css(property,value)
[/code]
     第一个参数是样式属性，第二个参数是样式值
[code]
css({p1:v1,p2:v2})
[/code]
     参数是 {} 包含的属性值对。
     属性值对之间用 逗号，分割
     属性值之间用 冒号 ：分割
     属性和值都需要用引号 “
[code="java"]<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>
[/code]



[b]步骤5:比较可运行项目，快速定位问题[/b]

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

推荐使用diffmerge软件，进行文件夹比较。把你自己做的项目文件夹，和我的可运行项目文件夹进行比较。
这个软件很牛逼的，可以知道文件夹里哪两个文件不对，并且很明显地标记出来
这里提供了绿色安装和使用教程：[url=https://how2j.cn/k/softwares/softwares-diffmerge/1583.html?tid=50]diffmerge 下载和使用教程[/url]