技术入门介绍.ppt

讲解内容 认识jQuery 如何使用jQuery * * 认识jQuery jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多Javascript高手加入，包括来自德国的J?rn Zaefferer，罗马尼亚的Stefan Petre等等。 jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。 必威体育精装版版本——1.4.2 * * jQuery的特点 轻量级 经GZip压缩后传输的代码文件仅14KB，未经压缩传送的代码文件仅26KB 链式语法 $(“div).html(“hello, world”).addClass(“red).show(slow); CSS 1-3 选择器 支持CSS选择器选定DOM对象 跨浏览器 支持Internet Explorer 6+、Opera 9+、Firefox 1.5+、Safari 2+ 简单 较其它JS库更容易入门，中、英文档很齐全 易扩展 灵活的插件功能、丰富的插件库 * * jQuery Hello World 第一个例子 * * jQuery选择器 jQuery 选择器支持CSS1 、CSS2 的全部和CSS3 的部分选择器，同时它也有少量独有的选择器，因此对拥有一定CSS 基础的开发人员来说，学习jQuery 选择器是件非常容易的事，而对于没有接触过CSS 技术的开发人员来说，在学习jQuery 选择器的同时也可以掌握CSS 选择器的基本规则。 基本结构: $(“…”) * * 使用jQuery选择器 基本选择器 元素标签名：$(“a”)选出所有链接元素； #id：通过元素id进行选择，如$(“#form1”)会选择id为form1的元素； .class：通过元素的CSS类来选择，如$(“.boldstyle”)会选择CSS为boldstyle类的元素； 以上三种搭配使用：$(“input#name”)会选择id为name的input元素 * * 使用jQuery选择器 层级选择器 E F：匹配父元素E下的标签名为F的所有子元素（F可以为E的子类的子类，甚至更远）。 EF：匹配父元素E下的所有标签名为F的直接子元素； form? labelName:/label? input name=name /? fieldset? ??? labelNewsletter:/label? ??? input name=newsletter /?/fieldset/forminput name=none / $(form input) $(form input) * * 使用jQuery选择器 属性选择器 [attribute]：匹配包含给定属性的元素。如$(div[id]) [attribute=value]：匹配给定的属性是某个特定值的元素。如$(input[name=newsletter]“) [attribute!=value]：匹配所有含有指定的属性，但属性不等于特定值的元素。 [attribute^=value]：匹配给定的属性是以某些值开始的元素 [attribute$=value]：匹配给定的属性是以某些值结尾的元素 [attribute*=value]：匹配给定的属性是以包含某些值的元素 更多….. 见jQuery API * * 使用jQuery选择器 注意：jQuery选择器获取的DOM元素返回的是一个数组，即使只返回一个元素 If($(“input#name”).length 0){ // do something… } * * 应用jQuery CSS操作 css(), addClass(), removeClass() DOM操作 html(), val(), text() 事件 click(), change(),hover(), focus(), blur() 实现动画效果 fadeIn(), fadeOut(), show()/show(speed, callback), hide()/hide(speed, callback) AJAX $.ajax, $.get, $.post * * jQuery 插件 Flexigrid JqModal …… / * * 谢谢~ QA * * * * * * * * * * * * * * * * * * * * * * * * * *