网页设计之JQuery.pptx

JQuery教学内容与目标内容：掌握JQuery编程思想，使用JQuery进行常见网页效果开发目标：能够使用Jquery开发常见网页效果参考书：锋利的JQuery什么是JQuery普通Javascript的缺点：每种控件的操作方式不统一；缺乏便捷的工具盒调试工具；不同浏览器下有区别，要编写跨浏览器的程序非常麻烦。因此出现了很多对Javascript的封装库，例如Prototype、Dojo、ExtJS、JQuery等，这些库对JS进行封装，简化了开发。JQuery 是目前非常流行的Javascript库，已经集成到VS2010了， JQuery的扩展插件也很多， Jquery本身就是一堆Javascript函数。什么是JQueryJquery的优点：尺寸小、使用简单方便，链式编程（$(“#div1”).draggble().show().hide().fly()），例如Prototype、Dojo、ExtJS、JQuery等，这些库对JS进行封装，简化了开发。在JQuery库中， $就是Jquery的简写，$.ajax和Jquery.ajax是等价的。JQuery 是目前非常流行的Javascript库，已经集成到VS2010了， JQuery的扩展插件也很多， Jquery本身就是一堆Javascript函数。JQuery之Ready$(document).ready(function() { alert(“加载完毕!”); });当页面Dom元素加载完毕时执行代码，可以简写为$(function() { alert(“加载完毕!”); });和window.onload类似，但是onload只能注册一次，后注册的取代先注册的；ready则可以多次注册都会被执行。JQuery之ReadyWindow.onload = function(){alert(‘onload’);};Jquery的ready和Dom的onload的区别执行时机：onload必须等待网页中所有内容加载完毕后才能执行；而ready是所有Dom元素创建完毕后就执行，可能Dom元素关联的东西并没有加载完，这样可提高网页的响应速度。在Jquery中也可以用$(window).load()来实现onload事件调用的时机。onload不能同时编写多个,而ready则可同时编写多个。Jquery内置函数$.map(array, fn)对数组array中每个元素调用fn函数逐个进行处理，fn函数将处理返回，最后得到一个新数组。例如：得到一个元素值是原数组二倍的新数组Var arr=[3, 5, 9];Var arr2=$.map(arr, function(item){return item*2;});$.map不能处理Dictionary风格的数组。Window对象导航到指定地址：navigate(“”),Chrome不支持setInterval每隔一段时间执行指定的代码，setInterval(“alert(‘hello’)”, 5000)，第一个参数为代码的字符串，第二个参数为间隔时间（单位毫秒），返回值为定时器的标识。clearInterval取消setInterval的定时执行，因为setInterval可以设定多个定时，因此clearInterval要指定清除哪个定时器的标识。 var intervalId=setInterval(“alert(‘hello’)”, 5000); clearInterval(intervalId);JS除错与调试如果JS代码有语法错误，浏览器会弹出错误信息，查看报错信息能帮助排查错误。使用VS可以方便的进行JS调试，调试时需要注意：IE的调试选项要打开， Internet选项-高级，去掉“禁用脚本调试”前的勾选。以调试方式运行网页。设置断点、监视变量案例：用循环语句的方法计算1到100之间整数的和。判断变量初始化JS中判断变量、参数是否初始化有三种方法：Var x;If (x==null){ alert(‘null’);}If (typeof(x)==“undefined”){ alert(‘undefined’);}If (!x) {alert(‘x未初始化’);}If(x) {alert(‘x已初始化’);}函数的声明JS中声明函数的方法： function add(i1, i2){ return i1+i2; }不需要声明返回值类型、参数类型。函数定义以function开头 var r = add(1, 2) alert(r); r=add(“你好”, “Tom”); alert(r);函数的声明JS中不像C#中那样要求所有路径都有返回值 function add(i1,i2){ if (i1i2){