Jquery介绍课件摘要.ppt

* * JQuery编程 信息工程系软件教研室：闫孝丽 四川化工职业技术学院 l l 课前说明 内容：掌握JQuery编程思想，使用JQuery进 行常见网页效果开发。 目标：能够使用JQuery开发常见网页效果。 参考书：《锋利的JQuery》 l l JQuery简介 普通JavaScript的缺点：每种控件的操作方式不统一，不同浏览 器下有区别，要编写跨浏览器的程序非常麻烦。因此出现了很多 对JavaScript的封装库，比如Prototype、Dojo、ExtJS、JQuery 等，这些库对JavaScript进行了封装，简化了开发。这些库是对 JavaScript的封装，也就是咱们调用JQuery的一句函数，JQuery 内部这句函数帮我们调用JavaScript中的代码几十句，因为 JQuery就是JavaScript语法写的一些函数类，内部仍然是调用 JavaScript实现的，所以并不是代替JavaScript的。使用JQuery 的代码、编写JQuery的扩展插件等仍然需要JavaScript的技术， Jquery本身就是一堆JavaScript函数。 Jquery是最火的JavaScript库，已经被集成到VS2010了，得到 了MS的支持，MS的Ajax toolkit和JQuery结合也是最方便， JQuery的扩展插件也是非常多。 l l l l l JQuery简介 JQuery能做什么。JQuery能做的普通的Dom能做，普通Dom能做的 JQuery也能做。 JQuery的优点：尺寸小、使用简单方便（Write Less, Do More，吃得少 干得多。链式编程（$(#div1).draggble().show().hide().fly()）、隐式迭 代（自动对于多个元素进行迭代方法调用））、屏蔽浏览器差异跨浏览 器兼容性好（IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome）、插 件丰富、开源、免费。 VS中JavaScript、JQuery的自动完成功能：在VS2010中直接有， VS008需要安装VisualStudio 和VS90SP1-KB958502-x86补丁会更强更 好用, 下载地址见备注。然后引用jquery-1.4.2.js，jquery-1.4.2-vsdoc.js 放到同目录下。（2010内置仅指的是不用自己把js文件放进去了，页面 照样引用） vsdoc是vs2008sp1以后增加的一个技术，将js文件对应的vsdoc（相当 于js库提供的方法的说明库）放到和js一起，就有会这个第三方js的自动 提示的功能。 通过DomJQuery的例子简单复习Dom。 l l l l l l l l 简单的JQuery $(document).ready(function() { alert(加载完毕！); });//注册事件的函数，和普通的dom不一样，不需要在元素上标记on**这样 的事件。 当页面Dom元素加载完毕时执行代码，可以简写为： $(function() { alert(加载完毕！); l }); 和onload类似，但是onload只能注册一次(window.onload=function...)（没有C# 中的+=机制），后注册的取代先注册的，而ready则可以多次注册都会被执行。 JQuery的ready和Dom 的onload的区别(*)：onload是所有Dom元素创建完毕、图 片、Css等都加载完毕后才被触发，而ready则是Dom元素创建完毕后就被触发 ，这样可以提高网页的响应速度。在jQuery中也可以用$(window).load()来实现 onload那种事件调用的时机。 l l l JQuery提供的函数 $.map(array,fn)对数组array中每个元素调用fn函数逐个进行处理，fn函数将处理 返回，最后得到一个新数组。猜猜内部实现。 例子，得到一个元素值是原数组值二倍的新数组 var arr = [3, 5, 9]; var arr2 = $.map(arr, function(item) { return item * 2; }); $.map不能处理Dictionary风格的数组。 $.each(array,fn)对数组arry每个元素调用fn函数进行处理，没有返回值。 var arr = { tom: 汤姆, jerry: 杰瑞, lily: 莉莉 }; $.each(arr, function(key, value) { alert(key+=+value); }); 如果是普通风格的数组，则key的值是序号