jquery础入门2.ppt

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 type=text/JavaScript src=jquery-1.2.6.js/script script type=text/JavaScript $(document).ready(function(){ //页面载入后执行 $(h2a).css(color,red); $(h2a).css(textDecoration,none); }); /script 则使得本来不支持子选择器的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 +br /); }); (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”的样式