复旦大学高级web技术课件05初识 jQuery

初识jQueryAdwebTAs2011.4.19什么是jQuery▪jQuery是一个快速、简洁的JavaScript库▪Writeless,domore.▪帮助开发人员简化：▪文档遍历▪事件处理▪动画▪AJAX▪…谁在使用jQuery▪GoogleCode▪Amazon▪IBM▪Dell▪Microsoft▪土豆网▪豆瓣▪CCTV▪京东网▪…为什么要使用jQuery？▪Web应用程序界面不断丰富，Web页面将包含越来越多的JavaScript代码▪基于原生JavaScript编程过程较为繁琐，且各浏览器下存在差异▪jQuery帮助开发人员简化JavaScript开发，提高开发效率jQuery做了什么？▪为JavaScript编程提供了通用的抽象层▪对多数主流浏览器的兼容▪IE6.0+,FF2+,Safari3.0+,Opera9.0+,ChromejQuery的特点▪简单易学的API▪精简的体积▪当前Release版本v1.4.2最小化且使用gzip压缩后仅24KB▪支持CSS3加载jQuery▪下载到自己的服务器进行部署scripttype=text/javascriptsrc=jquery.js/scriptOR▪使用Google托管的代码scripttype=text/javascriptsrc==1.4.2/script▪节省服务器流量▪充分利用浏览器缓存▪亦可使用GoogleAJAXLibrariesAPI进行加载jQuery对象▪几乎每个jQuery函数都返回一个jQuery对象▪每个jQuery对象包装了若干个DOM元素▪“链接性”▪Java的String类，多数方法返回String类型值Stringtext=newString(Slideshow).toUpperCase().substring(0,5).toLowerCase();▪jQuery对象$(div#slide).addClass(hover).show().text(Welcome!);jQuery能做些什么？▪取得文档元素▪遍历文档元素▪处理元素样式▪处理文档内容▪响应交互操作▪为文档添加动态效果▪简化异步请求过程jQuery能做些什么？▪取得文档元素▪遍历文档元素▪处理元素样式▪处理文档内容▪响应交互操作▪为文档添加动态效果▪简化异步请求过程取得文档元素▪原生JavaScript▪document.getElementById()▪document.getElementsByTagName()▪document.getElementsByName()▪jQuery▪jQuery()等价于$()取得文档元素▪jQuery(selector)▪使用CSS选择器来取得文档元素▪采用SizzleCSS选择器引擎▪对于HTML代码divclass=foosomecontent/div▪获取一个包装了该元素的jQuery对象varfoo=$('div.foo');▪支持CSS3选择器jQuerySelectorsAPIW3CselectorspecjQuerySelector▪$('*')▪$('div:animated')▪$('a[hreflang|=“en]')▪jQuery('[attribute|=value]')▪jQuery('[attribute*=value]')▪jQuery('[attribute~=value]')▪jQuery('[attribute$=value]')▪jQuery('[attribute=value]')▪jQuery('[attribute!=value]')▪jQuery('[attribute^=value]')jQuerySelector▪$(':button')$(':checkbox')▪伪类选择器▪$(':checked')$(':selected')$(':disabled')▪$('parentchild')▪Notsupportedbyie6,butbyjQuery▪$('parentchild')▪$('ul.topnavgatorli')▪$('.class')▪$(':contains(text)')▪…主流JS库中选择器引擎性能对比jQuery能做些什么？▪取得文档元素▪遍历文档元素▪处理元素样式▪处理文档内容▪响应交互操作▪为文档添加动态效果▪简化异步请求过程jQuery能做些什么？▪取得文档元素▪遍历文档元素▪处理元素样式▪处理文档内容▪响应交互操作▪为文档添加动态效果▪简化异步请求过程遍历文档元素▪通过$()取得的jQuery对象包装了一个元素集合，时常需要对其进行遍历▪each(callback)$('li').each(function(index){alert(index+':'+$(this).text());});▪next(),last(),first(),children(),parent(),…jQueryTraversingAPIjQuery能做些什么？▪取得文档元素▪遍历文档元素▪处理元素样式▪处理文档内容▪响应交互操作▪为文档添加动态效果▪简化异步请求过程jQuery能做些什么？▪取得文档元素▪遍历文档元素▪处理元素样式▪处理文档内容▪响应交互操作▪为文档添加动态效果▪简化异步请求过程处理元素样式▪为元素获取/设置CSS样式▪css(propertyName)varcolor=$('#content').css('color');▪css(propertyName,value)$('#content').css('color','red');▪css(map)$('#content').css({'color':'red','text-align':'center'});jQueryCSSAPIjQuery能做些什么？▪取得文档元素▪遍历文档元素▪处理元素样式▪处理文档内容▪响应交互操作▪为文档添加动态效果▪简化异步请求过程jQuery能做些什么？▪取得文档元素▪遍历文档元素▪处理元素样式▪处理文档内容▪响应交互操作▪为文档添加动态效果▪简化异步请求过程处理文档内容▪获取/修改元素内容/属性▪与css()一样，html()、text()和attr()函数根据参数列表不同可分别用作getter或setter▪jQuery的很多函数都遵循这一模式▪插入/删除/移动文档元素▪after(),before(),append(),appendTo(),insertAfter(),insertBefore(),remove(),wrap(),…▪大大简化了对DOM树修改的过程jQueryManipulationAPIjQuery能做些什么？▪取得文档元素▪遍历文档元素▪处理元素样式▪处理文档内容▪响应交互操作▪为文档添加动态效果▪简化异步请求过程jQuery能做些什么？▪取得文档元素▪遍历文档元素▪处理元素样式▪处理文档内容▪响应交互操作▪为文档添加动态效果▪简化异步请求过程响应交互操作▪jQuery提供了跨浏览器的事件处理方式▪绑定鼠标事件▪click(),mouseover(),mouseout(),mouseenter(),mouseleave(),hover(),…▪若不带参数则激发该事件，参数指定为函数时则将该eventhandler绑定到指定事件上响应交互操作▪绑定事件到“未来”的元素▪live(),delegate()▪如绑定事件到异步获取的按钮▪传统方式可在HTML中加入属性onclickdivclass=loadeddivclass=buttononclick=alert('Clicked!');Clickme!/div/div▪通过delegate()$('.loaded').delegate('.button','click',function(){alert('Clicked!');});响应交互操作▪取消事件绑定▪die(),unbind(),undelegate()jQueryEventsAPIjQuery能做些什么？▪取得文档元素▪遍历文档元素▪处理元素样式▪处理文档内容▪响应交互操作▪为文档添加动态效果▪简化异步请求过程jQuery能做些什么？▪取得文档元素▪遍历文档元素▪处理元素样式▪处理文档内容▪响应交互操作▪为文档添加动态效果▪简化异步请求过程为文档添加动态效果▪越来越丰富的Web应用界面可能需要动画与各种效果来增强交互效果▪原生JavaScript▪setInterval()并为每次个动作编写响应回调函数▪jQuery▪animate(),fadeIn(),fadeOut(),fadeTo(),slideDown(),slideUp(),…为文档添加动态效果▪一个简单的例子▪animate(properties,options)$('#button').click(function(){$('#box').animate({top:'300px',opacity:'0.1'},2000,'easeOutBounce',function(){alert('Done!');});});jQueryEffectsAPIjQuery能做些什么？▪取得文档元素▪遍历文档元素▪处理元素样式▪处理文档内容▪响应交互操作▪为文档添加动态效果▪简化异步请求过程jQuery能做些什么？▪取得文档元素▪遍历文档元素▪处理元素样式▪处理文档内容▪响应交互操作▪为文档添加动态效果▪简化异步请求过程简化异步请求过程▪不使用jQuery创建XMLHttpRequest对象▪根据浏览器及其版本不同有不同实现不使用jQuery创建XMLHttpRequest对象varxmlhttp=false;try{xmlhttp=newActiveXObject(Msxml2.XMLHTTP);}catch(e){try{xmlhttp=newActiveXObject(Microsoft.XMLHTTP);}catch(E){xmlhttp=false;}}if(!xmlhttp&&typeofXMLHttpRequest!='undefined'){try{xmlhttp=newXMLHttpRequest();}catch(e){xmlhttp=false;}}if(!xmlhttp&&window.createRequest){try{xmlhttp=window.createRequest();}catch(e){xmlhttp=false;}}...简化异步请求过程▪不使用jQuery创建XMLHttpRequest对象▪根据浏览器及其版本不同有不同实现▪使用jQuery处理AJAX操作▪$.ajax()▪$.get()▪$.post()▪$.load()简化异步请求过程▪$.ajax(settings)▪参数为本次AJAX请求的设定，为一名值对集合$.ajax(url:'test.php',type:'POST',data:'username=tom',success:function(){alert('Done!');});简化异步请求过程▪$.load(url)▪在一个id为stockPrice的元素中，异步加载当前IBM公司的股价信息$(#stockPrice).load(=ibm#yfs_l10_ibm).text());jQueryAJAXAPIjQueryresoursesjQueryUIjQueryPluginsJohnResig'sblog