案例：网站换肤
分析：
关键点：
- jQuery click事件
- jquery操作css样式： css("属性名")
css("属性名","属性值");
步骤：
- 页面加载完成时，获取三个不同颜色的小div
- 给三个div绑定点击事件
- 点击事件中：获取当前div的backgourd-color值
- 把backgourd-color值赋值给大div
代码实现：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .buttonDiv{ width: 25px; height: 25px; cursor: pointer; } </style> <script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script> <script> //1、页面加载完成时，获取三个不同颜色的小div $(function () { var d1 = $("#d1"); var divs = $(".buttonDiv"); //2、给三个div绑定点击事件 divs.click(function () { //3、点击事件中：获取当前div的background-color值 var bgColor = $(this).css("background-color"); //4、把backgourd-color值赋值给大div d1.css("background-color",bgColor); }); }); </script> </head> <body> <div id="d1" style="width: 100px;height: 100px;border: 10px solid black;"></div> <div class="buttonDiv" style="background-color: red;"></div> <div class="buttonDiv" style="background-color: yellow;"></div> <div class="buttonDiv" style="background-color: blue;"></div> </body> </html>
关键点：
1，jQuery click事件
2，jQuery操作css样式：css（“属性名”）css（“属性名”，“属性值”）
注意：进行css操作时，赋值也是为行内样式进行赋值
案例：图片放大
分析：
关键点：
- jQuery事件：mouseover，mouseout
- jQuery自定义动画：animate
步骤：
- 页面加载完成时，为三张图片分别绑定mouseover，mouseout事件
- mouseover事件：开启自定义动画，宽和高都是原来的两倍
- mouseout事件：开启自定义动画，宽和高还原
代码实现：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> img{ width:80px; height:80px; border: 2px solid black; } </style> <script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script> <script> //1、页面加载完成时，为三张图片分别绑定mouseover，mouseout事件 $(function () { var arr = $("p>img"); arr.mouseover(function () { $(this).stop(); //2、mouseover事件：开启自定义动画，宽和高都是原来的两倍 $(this).animate({ width:'160px', height:'160px' },500); }).mouseout(function () { //鼠标移出时，如果还在进行放大的动画，就会导致动画队列里数据越来越多，效果越来越延迟 //鼠标移出时，将原先动画停止 $(this).stop(); //3、mouseout事件：开启自定义动画，宽和高还原 $(this).animate({ width:'80px', height:'80px' },500); }); }); </script> </head> <body> <p align="center"> <img src="img/p1.png"/> <img src="img/p2.png"/> <img src="img/p3.png"/> </p> </body> </html>
