[计算机软件及应用]jquery简单教学-1.pptVIP

课前说明 内容：掌握JQuery编程思想，使用JQuery进行常见网页效果开发。 目标：能够使用JQuery开发常见网页效果。 参考书：《锋利的JQuery》 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的扩展插件也是非常多。 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。 简单的JQuery $(document).ready(function() { alert(加载完毕！); });//注册事件的函数，和普通的dom不一样，不需要在元素上标记on**这样的事件。 当页面Dom元素加载完毕时执行代码，可以简写为： $(function() { alert(加载完毕！); }); 和onload类似，但是onload只能注册一次(window.onload=function...)（没有C#中的+=机制），后注册的取代先注册的，而ready则可以多次注册都会被执行。 JQuery的ready和Dom 的onload的区别(*)：onload是所有Dom元素创建完毕、图片、Css等都加载完毕后才被触发，而ready则是Dom元素创建完毕后就被触发，这样可以提高网页的响应速度。在jQuery中也可以用$(window).load()来实现onload那种事件调用的时机。 JQuery提供的函数 $.map(array,fn)对数组array中每个元素调用fn函数逐个进行处理，fn函数将处理返回，最后得到一个新数组。猜猜内部实现。 例子，得到一个元素值是原数组值二倍的新数组 var arr = [3, 5, 9]; var arr2 = $.map(arr, function(item) { return item * 2; });//联想C#委托的例子。函数式编程。 $.map不能处理Dictionary风格的数组。 $.each(array,fn)对数组arry每个元素调用fn函数进行处理，没有返回值。猜猜内部实现。 var arr = { tom: 汤姆, jerry: 杰瑞, lily: 莉莉 }; $.each(arr, function(key, value) { alert(key+=+value); }); 如果是普通风格的数组，则key的值是序号。 还可以省略function的参数，这时候用this可以得到遍历的当前元素： var arr = [3, 6, 9]; $.each(arr, fun