jQuery案例

• 图片突出显示

效果：

页面加载进去的样子（原始样子）共有6张图片

当鼠标进入某张图片的时候，那这张图片透明度不变，其他图片透明度则变暗

当鼠标离开整个图片的范围（边框）时，则图片回到原始效果（也就是图片透明度一致）

html代码：

创建个div标签，给个类名为“wrap”，在里面嵌套个ul标签，在ul标签里面继续嵌套6个li标签，6个li标签里分别嵌套a标签，a标签里嵌套img标签，在src里添加图片路径

css:

使用通配符把网页原有的外边距和内边距变为0

把ul标签原有的小圆点给去除

设置body的背景颜色为黑色

给带有wrap类的元素（也就是div标签）设置上外边距为100px，左右外边距自适应，下外边距为0，宽为630px，高为394px，上内边距为10px，右和下内边距都为0，左内边距为10px，背景颜色为黑色，隐藏内容溢出，边框为1px的白色实线

给带有wrap类的元素后面所有的li标签设置左浮动，上和左外边距都为0，右和下外边距都为10px

给带有wrap类的元素后面所有的img标签设置宽为200px，高为186px，块级元素，边框为0

jQuery：

为ul标签下面的直接子标签li绑定鼠标进入事件，给当鼠标进入某张图片时，它的透明度为1（不变，还是原来的样子），它的其他兄弟元素li透明度为0.3（变暗）

为带有类为wrap的元素绑定鼠标离开事件，当鼠标离开带有类为wrap的元素时，找到li标签，设置它的透明度为1（变成原来的样子）

• 通过键盘按键改变背景颜色

效果：

页面加载进去的样子（原始样子）盒子的背景颜色为黄色

当按下键盘上的“A”时，这个盒子的背景颜色变成了红色

再按下键盘“B”时，这个盒子的背景颜色就变成了蓝色

.....从A到F，每个对应着不同的颜色

html:

给个id为dv的div标签

css:

给div设置样式，宽度为500px，高度为500px，背景颜色为黄色

jQuery：

在页面当按钮按下时，根据键盘A-F对应的keyCode设置对应的背景颜色，用流程控制的判断语句switch-case语句去判断