《实验4jQuery技术的应用.docxVIP

实验4 jQuery技术的应用一、实验目的 1.掌握jQuery的事件处理机制； 2.掌握jQuery的事件处理、委派、切换的常用方法；掌握jQuery事件处理的常用事件。二、实验环境 操作系统：Windows 7开发环境：Microsoft Visual Studio 2012实验学时2学时实验内容1、实现类似京东商城的商品展示效果。当鼠标移入某一个图片时，图片模糊，鼠标移出时恢复。效果如图4-1所示。图4-1代码如下：photo.html!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=/1999/xhtml head title第一题/title meta http-equiv=Content-Type content=text/html; charset=gb2312/ script type=text/javascript src=js/jquery-1.4.2.js/script script type=text/javascript $(document).ready(function() { $(img).bind(mouseenter, function() { $(this).css(opacity, 0.4); }); $(img).bind(mouseleave, function() { $(this).css(opacity, 1.0); }); }); /script /head body !-- ImageReady Slices (1.psd) -- table align=center width=676 border=0 cellpadding=0 cellspacing=0 tr td img src=images/1_01.gif width=223 height=126 alt=//td td rowspan=2 img src=images/1_02.gif width=225 height=259 alt=//td td img src=images/1_03.gif width=228 height=126 alt=//td /tr tr td img src=images/1_04.gif width=223 height=133 alt=//td td img src=images/1_05.gif width=228 height=133 alt=//td /tr tr td img src=images/1_06.gif width=223 height=130 alt=//td td img src=images/1_07.gif width=225 height=130 alt=//td td img src=images/1_08.gif width=228 height=130 alt=//td /tr /table !-- End ImageReady Slices -- /body/html2、实现表格的隔行变色，当鼠标悬停时突出显示某行。其效果如图4-2所示。图3-2代码如下：table.html!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml