悦轩饼家商品详情动态页面

（1）主题（目标）：

完成悦轩饼家商品详情动态页面

（2）完成页面所需要的知识点（重难点）

jQuery click()方法：

当单击元素时，发生click事件。

click()方法触发click事件，或规定当发生click事件时运行的函数

jquery操作css

addClass()-向被选元素添加一个或多个类

removeClass-从被选元素删除一个或多个类

放大镜效果框架：

jQuery图片放大镜(原创)

（3）完成页面的步骤

给物品重量文字加上点击加边框效果：

给储存文字的span标签设相同的class名字，在css样式中自定义一个需要的边框效果，再用js代码写function函数即可完成：

/*自定义需要的边框CSS样式*/
.dj {
				border: 3px #FF4F0D solid;
			}

/*js代码：*/
$(function() {
			$(".bang").click(function() {
				$(this).addClass("dj").siblings().removeClass("dj");
			});
		});

图片放大镜效果：

通过网站找到放大镜效果框架代码并复制，根据需求将原来的静态图片代码替换掉，再将复制的图片的地址换成自己图片的地址，再把css代码和js代码复制进来，并引入jQuery插件就完成了

（4）写页面的过程中碰到的问题，怎么解决的？

问题：商品重量点击效果的代码和要引用的都弄了，但是点击没反应

解决：将原来静态页面的hover的css代码和原来的边框代码都删掉，用点击事件自定义的边框css代码就可以

问题：放大镜效果大的图片不显示，放大镜效果也不显示

解决：引入css和jQuery要分先后，先引入css再引入jQuery