第7章Javascript讲述.ppt

jQuery的选择器 要使某个动作应用于特定的html元素，需要有办法找到这个元素。在jQuery中，执行这一任务的方法称为jQuery选择器。 jQuery选择器把网页的结构和行为完全分离。利用jQuery选择器，能快速地找出特定的html元素，然后轻松的给元素添加一系列行为动作。 jQuery的选择器主要有三大类，即CSS 3的基本选择器，CSS3的位置选择器和过滤选择器。 jQuery中的常用方法 1. find()方法 find()方法可以通过查询获取新的元素集合，通过匹配选择器来筛选元素，例如： $(div).find(p); 2. hover方法 一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。 3. toggleclass方法 toggleclass方法用于切换元素的样式。 jQuery的应用举例 1. 制作折叠式菜单（Accordion） 折叠式菜单是和Tab面板一样流行的高级网页元素，它是一种二级菜单，当点击某个主菜单项时，就会以滑动的方式展开它下面的二级菜单，同时自动收缩隐藏其他主菜单项的二级菜单，如图7-48所示。因此折叠式菜单有一个很好听的英文名叫“Accordion”（手风琴），它的折叠方式是不是有点像在拉手风琴呢？ 1. 制作折叠式菜单（Accordion） script language=JavaScript src=jquery.min.js/script script type=text/JavaScript $(document).ready(function(){ //页面载入时隐蔽除第一个元素外所有元素 $(#accordion li a + *:not(:first)).hide(); //对所有元素的标题绑定点击动作 $(#accordion li a).click(function(){ $(this).parent().parent().each(function(){ $( li a + *,this).slideUp(); //隐蔽所有元素 }); $(+ *,this).slideDown(); //展开当前点击的元素 }); }); /script 2. 制作渐变背景色的下拉菜单 $(document).ready(function(){ $(#navli).hover(function(){ $(this).children(ul).fadeIn(600); $(this).find(img).attr(src,minus.gif); },function(){ $(this).children(ul).fadeOut(600); $(this).find(img).attr(src,plus.gif); }); $(#navli li).each(function(i){//下拉菜单项逐渐变色的代码部分 $(this).css(background-color,rgb(+(320-i*16)+,+(240-i*16)+,+(240-i*16)+)); }); }); 3. 制作图片轮显效果 div class=imgsBox div class=imgs a href=#img id=pic src=images/01.jpg width=282 height=164 //a /div div class=clickButton div a class=active href=1/a a class= href=2/aa class= href=3/aa class= href=4/a a class= href=5/a /div /div /div 7.8.7 jQuery的插件应用举例 1. 使用jQuery插件Lightbox制作Lightbox效果 2. 使用jQuery插件jqzoom实现图片放大镜效果 在一些电子商务的商品展示网页上，为了更好的展示商品，一般都会添加放大镜的效果。当把鼠标放到小图片上，右边会自动的出现小图局部的放大图， 复习题 1. 试说明以下代码输出结果的顺序，并解释其原因，最后在浏览器中验证。 script type=text/javascript setTimeout (function(){ alert(A); },0); alert(B); /script 2. 编写代码实现以下效果：打开一个新窗口，原始大小为400*300px，然后将窗口逐渐增大到600*450px，保持窗口的左上角位置不变。 地址栏