《jquery》.ppt

北京传智播客教育y编程讲师:牛亮亮课前说明内容:掌握JQuery编程思想,使用JQuery进行常见网页效果开发。目标:能够使用JQuery开发常见网页效果。参考书:《锋利的JQuery》JQuery简介普通JavaScript的缺点:每种控件的操作方式不统一,不同浏览器下有区别,要编写跨浏览器的程序非常麻烦。因此出现了很多对JavaScript的封装库,比如Prototype、Dojo、ExtJS、JQuery等,这些库对JavaScript进行了封装,简化了开发。这些库是对JavaScript的封装,也就是咱们调用JQuery的一句函数,JQuery内部这句函数帮我们调用JavaScript中的代码几十句,因为JQuery就是JavaScript语法写的一些函数类,内部仍然是调用JavaScript实现的,所以并不是代替JavaScript的。Jquery是最火的JavaScript库,已经被集成到VS2010了,得到了MS的支持,MS的Ajaxtoolkit和JQuery结合也是最方便,JQuery的扩展插件也是非常多。JQuery简介JQuery能做什么。JQuery能做的普通的Dom能做,普通Dom能做的JQuery也能做。JQuery的优点:尺寸小、使用简单方便(WriteLess,DoMore,吃得少干得多。链式编程($(“#div1”).draggble().show().hide().fly())、隐式迭代(自动对于多个元素进行迭代方法调用))、屏蔽浏览器差异跨浏览器兼容性好(+,FF2+,+,+,Chrome)、插件丰富、开源、免费。VS中JavaScript、JQuery的自动完成功能:在VS2010中直接有,VS2008需要安装VisualStudio和VS90SP1-KB958502-x86补丁会更强更好用,简单的JQuery$(document).ready(function(){alert("加载完毕!");});//注册事件的函数,和普通的dom不一样,不需要在元素上标记on**这样的事件。当页面Dom元素加载完毕时执行代码,可以简写为:$(function(){alert("加载完毕!");});和onload类似,但是onload只能注册一次(=function...),后注册的取代先注册的,而ready则可以多次注册都会被执行。JQuery的ready和Dom的onload的区别(*):onload是所有Dom元素创建完毕、图片、Css等都加载完毕后才被触发,而ready则是Dom元素创建完毕后就被触发,这样可以提高网页的响应速度。在jQuery中也可以用$(window).load()来实现onload那种事件调用的时机。jQuery对象(包装集)、Dom对象DOM对象的JavaScript方法Varobj=(“ID”);Varobjhtml=;jQuery对象是通过jQuery包装DOM对象后产生的对象$(“#ID”).html();jQuery对象不能使用DOM对象的方法,DOM对象也不能使用jQuery对象的方法var$cr=$(“#cr");varcr=$cr[0];//varcr=$(0);varcr=("cr");var$cr=$(cr);Array是JS语言本身的对象,不是Dom对象,因此不需要转换为Jquery对象才能用JQuery提供的函数$.map(array,fn)对数组array中每个元素调用fn函数逐个进行处理,fn函数将处理返回,最后得到一个新数组。猜猜内部实现。例子,得到一个元素值是原数组值二倍的新数组vararr=[3,5,9];vararr2=$.map(arr,function(item){returnitem*2;});//联想C#委托的例子。函数式编程。$.map不能处理Dictionary风格的数组。$.each(array,fn)对数组arry每个元素调用fn函数进行处理,没有返回值。猜猜内部实现。vararr={"tom":"汤姆","jerry":"杰瑞","lily":"莉莉"};$.each(arr,function(key,value){alert(key+"="+value);});如果是普通风格的数组,则key的值是序号。还可以省略function的参数,这时候用this可以得到遍历的当前元素:vararr=[3,6,9];$.each(arr,function(){alert(this);});//能读懂。普通数组推荐用无参,用dic