JQuery编程基础.docx

JQuery编程基础课前说明内容:掌握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的优点:尺寸小、使用简单方便(Write Less，Do More)，吃的少干的多。链式编程($(“#div1”).draggble().show().hide().fly())、隐式迭代(自动对于多个元素进行迭代方法调用))、屏蔽浏览器差异跨浏览器兼容性好(IE6.0+,FF2+,Safari3.0+.Opera9.0+,Chrome)、插件丰富、开源、免费。VS中JavaScript、JQuery的自动完成功能:在VS2010中直接有，VS2008需要安装VisualStudio和VS90SP1-KB958502-X86补丁会更强更好用。引用jquery-1.4.1.js,jquery-1.4.1-vsdoc.js放到同目录下，不需要在页面引用。VSdoc是VS2008sp1以后增加的一个技术，将JS文件对应的VSdoc放到和js一起，就会有这个第三方js自动提示的功能。简单的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函数将处理例子，得到一个元素值是原数组值两倍的新数组。Vararr = [3,5,9]；Var arr2 = $.map(arr, function(item){return item*2});$.map不能处理Dictionary风格的数组。$.each(array, fn)对数组array每个元素调用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);});获得的是每个元素值。普通数组推荐用无参，用dict风格的数组就用key、value。JQuery对象、Dom对象jQuery对象就是通过jQuery封装Dom对象后产生的对象：alert($(‘#div1’).html());Dom对象想要通过jQuery进行操作，先要转换为jQuery对象。$(‘#div1’).html()等价于：document.getElementById(‘div1’).innerHTML;$(‘div1’