资源描述：
《《jQuery基础入门》PPT课件》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。
1、jQuery基础教程唐四薪http://ec.hynu.cn《基于Web标准的网页设计与制作》配套课件V2.0清华大学出版社使用jQuery创建动画效果jQuery中的动画:隐藏和显示hide():在HTML文档中,为一个元素调用hide()方法会将该元素的display样式改为none.代码功能同css(“display”,“none”);show():将元素的display样式改为先前的显示状态.以上两个方法在不带任何参数的情况下,作用是立即隐藏或显示匹配的元素,不会有任何动画.可以通过制定速度参数使元素动起来.以上两个方法会同时减少(增大)内容的高度,宽度和不透
2、明度.jQuery中的动画(2)fadeIn(),fadeOut():只改变元素的透明度.fadeOut()会在指定的一段时间内降低元素的不透明度,直到元素完全消失.fadeIn()则相反.slideDown(),slideUp():只会改变元素的高度.如果一个元素的display属性为none,当调用slideDown()方法时,这个元素将由上至下延伸显示.slideUp()方法正好相反,元素由下至上缩短隐藏.jQuery中的动画(3)toggle():切换元素的可见状态:如果元素时可见的,则切换为隐藏;如果元素时隐藏的,则切换为可见的.slideToggle():
3、通过高度变化来切换匹配元素的可见性.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中安装Apta
4、na插件把下载好的插件里的内容（只保留features和plugins这两个文件夹）放在eclipse的aptana文件夹中在eclipse文件夹里新建一个links文件夹，里面再建一个aptana.link文件，内容为path=/aptana让Aptana提示jQueryDreamweaverCS4和Aptana都支持jQuery提示jQuery中的“$”及其作用1.“$”用作选择器$(d
5、ocument).ready(function(){//页面载入后执行$("h2>a").css("color","red");$("h2>a").css("textDecoration","none");});则使得本来不支持子选择器的IE6也能支持子选择器了,jQuery对象和DOM对象的区别注意用“$”选中的元素（jQuery对象）和用DOM方法选中的元素（DOM对象）含义并不相同varone=getElementById(“one”);$(“#one”)表现在jQuery对象的方法和属性与DOM对象的并不相同，如one.onclick()$(
6、“#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()
7、{("#loading").css("display","none");})jQuery的写法则会使页面仅加载完DOM结构后就执行，即加载完html文档后，还没加载图像等其他文件就执行ready()函数，给图像添加“display:none”的样式，因此id为“loading”的图片不可能被显示。所以$(document).ready()比window.onload载入执行更快$(document).ready()比window.onload的比较$(document).ready()的优势在DOM文档载入后就执行，载入速度更快；如果找不到DOM中的
