《《jQuery基础入门》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《jQuery基础入门》PPT课件.ppt（30页珍藏版）》请在金锄头文库上搜索。
1、jQuery 基础教程基础教程唐四薪唐四薪 http:/http:/基于基于WebWeb标准的网页设计与制作标准的网页设计与制作配套课件配套课件 V2.0 V2.0 清华大学出版社清华大学出版社使用使用jQueryjQuery创建动画效果创建动画效果jQuery 中的动画中的动画: 隐藏和显示隐藏和显示vhide(): 在在 HTML 文档中文档中, 为一个元素调用为一个元素调用 hide() 方法会将该元素的方法会将该元素的 display 样式改为样式改为 none. 代码功代码功能同能同 css(“display”, “none”);vshow(): 将元素的将元素的 display 样
2、式改为先前的显示状样式改为先前的显示状态态.v以上两个方法在不带任何参数的情况下以上两个方法在不带任何参数的情况下, 作用是作用是立即立即隐藏或显示匹配的元素隐藏或显示匹配的元素, 不会有任何动画不会有任何动画. 可可以通过制定速度参数使元素动起来以通过制定速度参数使元素动起来.v以上两个方法会同时减少以上两个方法会同时减少(增大增大)内容的高度内容的高度, 宽宽度和不透明度度和不透明度.jQuery 中的动画中的动画(2)vfadeIn(), fadeOut(): 只改变元素的透明度只改变元素的透明度. fadeOut() 会在指定的一段时间内降低元素的会在指定的一段时间内降低元素的不透明度
3、不透明度, 直到元素完全消失直到元素完全消失. fadeIn() 则相反则相反.vslideDown(), slideUp(): 只会改变元素的高度只会改变元素的高度. 如果一个元素的如果一个元素的 display 属性为属性为 none, 当调用当调用 slideDown() 方法时方法时, 这个元素将由上至下延伸这个元素将由上至下延伸显示显示. slideUp() 方法正好相反方法正好相反, 元素由下至上元素由下至上缩短隐藏缩短隐藏. jQuery 中的动画中的动画(3)vtoggle(): 切换元素的可见状态切换元素的可见状态: 如果元素时如果元素时可见的可见的, 则切换为隐藏则切换为隐
4、藏; 如果元素时隐藏的如果元素时隐藏的, 则切换为可见的则切换为可见的. vslideToggle(): 通过高度变化来切换匹配元通过高度变化来切换匹配元素的可见性素的可见性. vfadeTo(): 把不透明度以渐近的方式调整到把不透明度以渐近的方式调整到指定的值指定的值(0 1 之间之间). 练习练习3: 品牌列表品牌列表注意注意: 两个过滤函数两个过滤函数 is 和和 filter 的使用的使用练习4: 超链接和图片提示效果练习5: 单行文本框的用户体验练习6: 多选框应用练习7: 下拉框应用vJQuery 可以通过可以通过 $.get() 或或 $.post() 方法来加载方法来加载 x
5、ml.vJQuery 解析解析 XML 与解析与解析 DOM 一样一样, 可以使用可以使用 find(), children() 等函数来解析和用等函数来解析和用 each() 方法来进方法来进行遍历行遍历JQuery 加载并解析 XML练习练习8: 8: 使用使用 JQueryJQuery 实现级联对话框实现级联对话框练习练习9: 9: 使用使用 JQueryJQuery 实现实现在在 eclipse 中安装中安装 Aptana 插件插件v把下载好的插件里的内容（只保留把下载好的插件里的内容（只保留featuresfeatures和和pluginsplugins这两个文件夹）放在这两个文件夹
6、）放在eclipse eclipse 的的 aptanaaptana 文件夹中文件夹中v在在eclipseeclipse文件夹里新建一个文件夹里新建一个linkslinks文件夹，文件夹，里面再建一个里面再建一个aptana.linkaptana.link文件，内容为文件，内容为path=/path=/aptanaaptana 让让 Aptana 提示提示 jQueryvDreamweaver CS4和和Aptana都支持都支持jQuery提示提示 jQuery中的中的“$”及其作用及其作用 v1. “$”用作选择器用作选择器 $(document).ready(function() /页面载
7、入后执行页面载入后执行 $(h2a).css(color,red);$(h2a).css(textDecoration,none); );v则使得本来不支持子选择器的则使得本来不支持子选择器的IE 6也能支持子选择器也能支持子选择器了了 ,jQuery对象和对象和DOM对象的区别对象的区别v注意用注意用“$”选中的元素（选中的元素（jQuery对象）和用对象）和用DOM方法选中的元素（方法选中的元素（DOM对象）含义并不相对象）含义并不相同同vvar one=getElementById(“one”);v$(“#one”)v表现在表现在jQuery对象的方法和属性与对象的方法和属性与DOM对象
8、的并不相同，如对象的并不相同，如vone.onclick()v$(“#one”).click()jQuery中的中的“$”及其作用及其作用2. “$”用作功能函数前缀用作功能函数前缀 (1) 遍历数组遍历数组v$.each( 0,1,2, function(i)document.write( Item # + i +); );(2) 遍历选择器中的元素遍历选择器中的元素 v$(function()v$(img).each(function(index)vthis.title = 这是第这是第 + (index+1)+ 幅图，幅图，路径是：路径是： + this.src;v);v);jQuery
9、中的中的“$”及其作用及其作用v3. 用作用作$(document). ready()$(document).ready(function() (#loading).css(display,none);)vjQuery的写法则会使页面仅加载完的写法则会使页面仅加载完DOM结构后就执结构后就执行，即加载完行，即加载完html文档后，还没加载图像等其他文件文档后，还没加载图像等其他文件就执行就执行ready()函数，给图像添加函数，给图像添加“display:none”的的样式，因此样式，因此id为为“loading”的图片不可能被显示。的图片不可能被显示。v所以所以$(document). re
10、ady()比比window.onload载入执行载入执行更快更快 $(document). ready()比比window.onload的比较的比较v$(document). ready()的优势的优势v在在DOM文档载入后就执行，载入速度更快；文档载入后就执行，载入速度更快；v如果找不到如果找不到DOM中的元素，能够自动容错；中的元素，能够自动容错；v在页面中多个地方使用在页面中多个地方使用ready()方法不会发方法不会发生冲突生冲突 jQuery中的中的“$”及其作用及其作用v4. 创建创建DOM元素元素v使用使用“$”可以直接创建可以直接创建DOM元素：元素：var newP =$(武
11、广高速铁路即将通车！武广高速铁路即将通车！); v创建了创建了DOM元素后，将这个元素插入到在页面的元素后，将这个元素插入到在页面的某个具体位置上某个具体位置上 newP.insertAfter(“#chapter”); /将创建的将创建的newP元元素插入到素插入到ID为为#chapter的元素之后的元素之后 或者或者newP.appendTo(body); 创建创建DOM元素的方法总结元素的方法总结v将新元素插入到匹配元素的里的方法：将新元素插入到匹配元素的里的方法：vappend() appendTo () prepend () prependTo ()1.append()表示在原有元素
12、中插入新元素表示在原有元素中插入新元素2.$ (body) append(newP);3.appendTo ()表示将新元素插入到原有元素里表示将新元素插入到原有元素里newP.appendTo(body);4.将新元素插入到匹配元素的盘边将新元素插入到匹配元素的盘边5.after () insertafter () before () insertbefore ()6.将新元素包含住匹配的元素将新元素包含住匹配的元素7.wrap ()jQuery的选择器的选择器 v要使某个动作应用于特定的要使某个动作应用于特定的html元素，需元素，需要有办法找到这个元素。在要有办法找到这个元素。在jQue
13、ry中，执中，执行这一任务的方法称为行这一任务的方法称为jQuery选择器。选择器。vjQuery选择器把网页的结构和行为完全分选择器把网页的结构和行为完全分离。利用离。利用jQuery选择器，能快速地找出特选择器，能快速地找出特定的定的html元素，然后轻松的给元素添加一元素，然后轻松的给元素添加一系列行为动作。系列行为动作。vjQuery的选择器主要有三大类，即的选择器主要有三大类，即CSS 3的的基本选择器，基本选择器，CSS3的位置选择器和过滤选的位置选择器和过滤选择器。择器。jQuery中的常用方法中的常用方法 v1. find()方法方法vfind()方法可以通过查询获取新的元素集
14、合，通过方法可以通过查询获取新的元素集合，通过匹配选择器来筛选元素，例如：匹配选择器来筛选元素，例如：v$(div).find(p);v2. hover方法方法v一个模仿悬停事件（鼠标移动到一个对象上面及一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。移出这个对象）的方法。 v3. toggleclass方法方法vtoggleclass方法用于切换元素的样式。方法用于切换元素的样式。 jQuery的应用举例的应用举例 v1. 制作制作折叠式菜单（折叠式菜单（Accordion）v折叠式菜单是和折叠式菜单是和Tab面板一样流行的高级网面板一样流行的高级网页元素，它是一种二级菜单，
15、当点击某个页元素，它是一种二级菜单，当点击某个主菜单项时，就会以滑动的方式展开它下主菜单项时，就会以滑动的方式展开它下面的二级菜单，同时自动收缩隐藏其他主面的二级菜单，同时自动收缩隐藏其他主菜单项的二级菜单，如图菜单项的二级菜单，如图7-48所示。因此折所示。因此折叠式菜单有一个很好听的英文名叫叠式菜单有一个很好听的英文名叫“Accordion”（手风琴），它的折叠方式（手风琴），它的折叠方式是不是有点像在拉手风琴呢？是不是有点像在拉手风琴呢？1. 制作折叠式菜单（制作折叠式菜单（Accordion）$(document).ready(function()/页面载入时隐蔽除第一个元素外所有元素
16、页面载入时隐蔽除第一个元素外所有元素$(#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
17、(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
18、)+,+(240-i*16)+,+(240-i*16)+);); );3. 制作图片轮显效果制作图片轮显效果vvvvvvv1v234v5vvv7.8.7 jQuery的插件应用举例的插件应用举例 v1. 使用使用jQuery插件插件Lightbox制作制作Lightbox效果效果2. 使用使用jQuery插件插件jqzoom实现图片放大镜效果实现图片放大镜效果v在一些电子商务的商品展示网页上，为了更好的展示在一些电子商务的商品展示网页上，为了更好的展示商品，一般都会添加放大镜的效果。当把鼠标放到小商品，一般都会添加放大镜的效果。当把鼠标放到小图片上，右边会自动的出现小图局部的放大图，图片上，右边会自动的出现小图局部的放大图，
