《jQuery基础入门》PPT课件

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,jQuery,基础教程,唐四薪,http:/,基于,Web,标准的网页设计与制作,配套课件,V2.0,清华大学出版社,使用,jQuery,创建动画效果,jQuery,中的动画,:,隐藏和显示,hide():,在,HTML,文档中,为一个元素调用,hide(),方法会将该元素的,display,样式改为,none.,代码功能同,css(“display,”,“none”);,show():,将元素的,display,样式改为先前的显示状态,.,以上两个方法在不带任何参数的情况下,作用是,立即,隐藏或显示匹配的元素,不会有任何动画,.,可以通过制定速度参数使元素动起来,.,以上两个方法会同时减少,(,增大,),内容的高度,宽度和不透明度,.,jQuery,中的动画,(2),fadeIn,(),fadeOut,():,只改变元素的透明度,.,fadeOut,(),会在指定的一段时间内降低元素的不透明度,直到元素完全消失,.,fadeIn,(),则相反,.,slideDown,(),slideUp,():,只会改变元素的高度,.,如果一个元素的,display,属性为,none,当调用,slideDown,(),方法时,这个元素将由上至下延伸显示,.,slideUp,(),方法正好相反,元素由下至上缩短隐藏,.,jQuery,中的动画,(3),toggle():,切换元素的可见状态,:,如果元素时可见的,则切换为隐藏,;,如果元素时隐藏的,则切换为可见的,.,slideToggle,():,通过高度变化来切换匹配元素的可见性,.,fadeTo,():,把不透明度以渐近的方式调整到指定的值,(0 1,之间,).,练习,3:,品牌列表,注意,:,两个过滤函数,is,和,filter,的使用,练习,4:,超链接和图片提示效果,练习,5:,单行文本框的用户体验,练习,6:,多选框应用,练习,7:,下拉框应用,JQuery,可以通过,$.get(),或,$.post(),方法来加载,xml.,JQuery,解析,XML,与解析,DOM,一样,可以使用,find(),children(),等函数来解析和用,each(),方法来进行遍历,JQuery,加载并解析,XML,练习,8:,使用,JQuery,实现级联对话框,练习,9:,使用,JQuery,实现,在,eclipse,中安装,Aptana,插件,把下载好的插件里的内容（只保留,features,和,plugins,这两个文件夹）放在,eclipse,的,aptana,文件夹中,在,eclipse,文件夹里新建一个,links,文件夹，里面再建一个,aptana.link,文件，内容为,path=/,aptana,让,Aptana,提示,jQuery,Dreamweaver,CS4,和,Aptana,都支持,jQuery,提示,jQuery,中的“,$”,及其作用,1.“$”,用作选择器,$(,document).ready(function,()/,页面载入后执行,$(h2,a).css(color,red,);,$(h2,a).css(textDecoration,none,);,);,则使得本来不支持子选择器的,IE 6,也能支持子选择器了,jQuery,对象和,DOM,对象的区别,注意用,“,$”,选中的元素（,jQuery,对象）和用,DOM,方法选中的元素（,DOM,对象）含义并不相同,var,one=,getElementById(“one,”);,$(“#one”),表现在,jQuery,对象的方法和属性与,DOM,对象的并不相同，如,one.onclick,(),$(“#,one”).click,(),jQuery,中的“,$”,及其作用,2.“$”,用作功能函数前缀,(1),遍历数组,$.each(0,1,2,function(i)document.write,(Item#+i+););,(2),遍历选择器中的元素,$(function(),$(,img).each(function(index,),this.title,=,这是第,+(index+1)+,幅图，路径是：,+,this.src,;,);,);,jQuery,中的“,$”,及其作用,3.,用作,$(document).ready(),$(,document).ready(function,(),(#,loading).css(display,none,);,),jQuery,的写法则会使页面仅加载完,DOM,结构后就执行，即加载完,html,文档后，还没加载图像等其他文件就执行,ready(),函数，给图像添加“,display:none,”,的样式，因此,id,为“,loading”,的图片不可能被显示。,所以,$(document).ready(),比,window.onload,载入执行更快,$(document).ready(),比,window.onload,的比较,$(document).ready(),的优势,在,DOM,文档载入后就执行，载入速度更快；,如果找不到,DOM,中的元素，能够自动容错；,在页面中多个地方使用,ready(),方法不会发生冲突,jQuery,中的“,$”,及其作用,4.,创建,DOM,元素,使用“,$”,可以直接创建,DOM,元素：,var,newP,=$(,武广高速铁路即将通车！,);,创建了,DOM,元素后，将这个元素插入到在页面的某个具体位置上,newP.insertAfter(“#chapter,”);/,将创建的,newP,元素插入到,ID,为,#chapter,的元素之后,或者,newP.appendTo(body,);,创建,DOM,元素的方法总结,将新元素插入到匹配元素的里的方法：,append(),appendTo,(),prepend,(),prependTo,(),append(),表示在原有元素中插入新元素,$(body),append(newP,);,appendTo,(),表示将新元素插入到原有元素里,newP.appendTo(body,);,将新元素插入到匹配元素的盘边,after(),insertafter,()before(),insertbefore,(),将新元素包含住匹配的元素,wrap(),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,）,$(,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,();/,展开当前点击的元素,););,2.,制作渐变背景色的下拉菜单,$(,document).ready(function,(),$(#,nav,li).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.,制作图片轮显效果,1,234,5,7.8.7,jQuery,的插件应用举例,1.,使用,jQuery,插件,Lightbox,制作,Lightbox,效果,2.,使用,jQuery,插件,jqzoom,实现图片放大镜效果,在一些电子商务的商品展示网页上，为了更好的展示商品，一般都会添加放大镜的效果。当把鼠标放到小图片上，右边会自动的出现小图局部的放大图，,