jQuery基入门2.pptVIP

jQuery 基础教程 唐四薪 《基于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: 品牌列表 练习4: 超链接和图片提示效果 练习5: 单行文本框的用户体验 练习6: 多选框应用 练习7: 下拉框应用 JQuery 加载并解析 XML JQuery 可以通过 $.get 或 $.post 方法来加载 xml.JQuery 解析 XML 与解析 DOM 一样, 可以使用 find, children 等函数来解析和用 each 方法来进行遍历 练习8: 使用 JQuery 实现级联对话框 练习9: 使用 JQuery 实现 在 eclipse 中安装 Aptana 插件 把下载好的插件里的内容（只保留features和plugins这两个文件夹）放在eclipse 的 aptana 文件夹中 在eclipse文件夹里新建一个links文件夹，里面再建一个aptana.link文件，内容为path/aptana 让 Aptana 提示 jQuery Dreamweaver CS4和Aptana都支持jQuery提示 jQuery中的“$”及其作用 1. “$”用作选择器 script typetext/JavaScript srcjquery-1.2.6.js/script script typetext/JavaScript $document.readyfunction//页面载入后执行$h2a.csscolor,red; $h2a.csstextDecoration,none; ; /script 则使得本来不支持子选择器的IE 6也能支持子选择器了 , jQuery对象和DOM对象的区别 注意用“$”选中的元素（jQuery对象）和用DOM方法选中的元素（DOM对象）含义并不相同 var onegetElementById“one”; $“#one” 表现在jQuery对象的方法和属性与DOM对象的并不相同，如 one.onclick $“#one”.click jQuery中的“$”及其作用 2. “$”用作功能函数前缀 1 遍历数组 $.each [0,1,2], functionidocument.write Item # + i +br /; ; 2 遍历选择器中的元素 $function $img.eachfunctionindex this.title 这是第 + index+1+ 幅图，路径是： + this.src; ; ; jQuery中的“$”及其作用 3. 用作$document. ready $document.readyfunction #loading.cssdisplay,none; jQuery的写法则会使页面仅加载完DOM结构后就执行，即加载完html文档后，还没加载图像等其他文件就执行ready函数，给图像添加“display:none”的样式，因此id为“loading”的图片不可能被显示。 所以$document. ready比window.onload载入执行更快 $document. ready比window.onload的比较 $document. ready的优势 在DOM文档载入后就执行，载入速度更快； 如果找不到DOM中的元素，能