《复旦大学高级web技术课件05初识 jQuery》由会员分享，可在线阅读，更多相关《复旦大学高级web技术课件05初识 jQuery（41页珍藏版）》请在金锄头文库上搜索。
1、初识 jQueryAdweb TAs2011.4.19什么是 jQueryjQuery 是一个快速、简洁的 JavaScript 库Write less, do more.帮助开发人员简化：文档遍历事件处理动画AJAX谁在使用 jQueryGoogle CodeAmazonIBMDellMicrosoft土豆网豆瓣CCTV京东网为什么要使用 jQuery？ Web 应用程序界面不断丰富，Web 页面将包含越来越多的 JavaScript 代码 基于原生 JavaScript 编程过程较为繁琐，且各浏览器下存在差异 jQuery 帮助开发人员简化 JavaScript 开发，提高开发效率jQue
2、ry 做了什么？ 为 JavaScript 编程提供了通用的抽象层 对多数主流浏览器的兼容IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, ChromejQuery 的特点 简单易学的 API 精简的体积当前 Release 版本 v1.4.2 最小化且使用 gzip 压缩后仅 24KB 支持 CSS3加载 jQuery 下载到自己的服务器进行部署OR 使用 Google 托管的代码 节省服务器流量 充分利用浏览器缓存 亦可使用 Google AJAX Libraries API 进行加载jQuery 对象几乎每个 jQuery 函数都返回一个 jQuery 对
3、象每个 jQuery 对象包装了若干个 DOM 元素“链接性”Java 的 String 类，多数方法返回 String 类型值String text = new String(Slideshow).toUpperCase().substring(0,5).toLowerCase(); jQuery 对象$(div#slide).addClass(hover).show().text(Welcome!);jQuery 能做些什么？ 取得文档元素 遍历文档元素 处理元素样式 处理文档内容 响应交互操作 为文档添加动态效果 简化异步请求过程jQuery 能做些什么？ 取得文档元素 遍历文档元素 处
4、理元素样式 处理文档内容 响应交互操作 为文档添加动态效果 简化异步请求过程取得文档元素 原生 JavaScript document.getElementById() document.getElementsByTagName() document.getElementsByName() jQuery jQuery() 等价于 $()取得文档元素jQuery(selector)使用 CSS 选择器来取得文档元素采用 Sizzle CSS 选择器引擎对于 HTML 代码some content获取一个包装了该元素的 jQuery 对象var foo = $(div.foo);支持 CSS3 选
5、择器 jQuery Selectors API W3C selector specjQuery Selector $(*) $(div:animated) $(ahreflang|=“en)jQuery(attribute|=value)jQuery(attribute*=value)jQuery(attribute=value)jQuery(attribute$=value)jQuery(attribute=value)jQuery(attribute!=value)jQuery(attribute=value)jQuery Selector $(:button) $(:checkbox)伪
6、类选择器 $(:checked) $(:selected) $(:disabled) $(parent child)Not supported by ie6, but by jQuery $(parent child)$(ul.topnavgator li) $(.class) $(:contains(text) 主流 JS 库中选择器引擎性能对比jQuery 能做些什么？ 取得文档元素 遍历文档元素 处理元素样式 处理文档内容 响应交互操作 为文档添加动态效果 简化异步请求过程jQuery 能做些什么？ 取得文档元素 遍历文档元素 处理元素样式 处理文档内容 响应交互操作 为文档添加动态效果
7、 简化异步请求过程遍历文档元素 通过 $() 取得的 jQuery 对象包装了一个元素集合，时常需要对其进行遍历 each(callback)$(li).each(function(index) alert(index + : + $(this).text();); next(), last(), first(), children(), parent(), jQuery Traversing APIjQuery 能做些什么？ 取得文档元素 遍历文档元素 处理元素样式 处理文档内容 响应交互操作 为文档添加动态效果 简化异步请求过程jQuery 能做些什么？ 取得文档元素 遍历文档元素 处理元
8、素样式 处理文档内容 响应交互操作 为文档添加动态效果 简化异步请求过程处理元素样式 为元素获取/设置 CSS 样式css(propertyName)var color = $(#content).css(color);css(propertyName, value)$(#content).css(color, red);css(map)$(#content).css(color : red, text-align : center); jQuery CSS APIjQuery 能做些什么？ 取得文档元素 遍历文档元素 处理元素样式 处理文档内容 响应交互操作 为文档添加动态效果 简化异步请求
9、过程jQuery 能做些什么？ 取得文档元素 遍历文档元素 处理元素样式 处理文档内容 响应交互操作 为文档添加动态效果 简化异步请求过程处理文档内容获取/修改元素内容/属性与 css() 一样，html()、text() 和 attr() 函数根据参数列表不同可分别用作 getter 或 setterjQuery 的很多函数都遵循这一模式插入/删除/移动文档元素after(), before(), append(), appendTo(), insertAfter(), insertBefore(), remove(), wrap(), 大大简化了对 DOM 树修改的过程jQuery Man
10、ipulation APIjQuery 能做些什么？ 取得文档元素 遍历文档元素 处理元素样式 处理文档内容 响应交互操作 为文档添加动态效果 简化异步请求过程jQuery 能做些什么？ 取得文档元素 遍历文档元素 处理元素样式 处理文档内容 响应交互操作 为文档添加动态效果 简化异步请求过程响应交互操作 jQuery 提供了跨浏览器的事件处理方式 绑定鼠标事件click(), mouseover(), mouseout(), mouseenter(), mouseleave(), hover(), 若不带参数则激发该事件，参数指定为函数时则将该 event handler 绑定到指定事件上响
11、应交互操作 绑定事件到“未来”的元素live(), delegate()如绑定事件到异步获取的按钮 传统方式可在HTML中加入属性 onclickClick me! 通过delegate()$(.loaded).delegate(.button, click, function()alert(Clicked!););响应交互操作 取消事件绑定die(), unbind(), undelegate() jQuery Events APIjQuery 能做些什么？ 取得文档元素 遍历文档元素 处理元素样式 处理文档内容 响应交互操作 为文档添加动态效果 简化异步请求过程jQuery 能做些什么？
12、取得文档元素 遍历文档元素 处理元素样式 处理文档内容 响应交互操作 为文档添加动态效果 简化异步请求过程为文档添加动态效果越来越丰富的 Web 应用界面可能需要动画与各种效果来增强交互效果原生 JavaScriptsetInterval() 并为每次个动作编写响应回调函数jQueryanimate(), fadeIn(), fadeOut(), fadeTo(), slideDown(), slideUp(), 为文档添加动态效果一个简单的例子 animate(properties, options)$(#button).click(function() $(#box).animate( t
13、op : 300px, opacity : 0.1 , 2000, easeOutBounce, function() alert(Done!); );); jQuery Effects APIjQuery 能做些什么？ 取得文档元素 遍历文档元素 处理元素样式 处理文档内容 响应交互操作 为文档添加动态效果 简化异步请求过程jQuery 能做些什么？ 取得文档元素 遍历文档元素 处理元素样式 处理文档内容 响应交互操作 为文档添加动态效果 简化异步请求过程简化异步请求过程不使用 jQuery 创建 XMLHttpRequest 对象 根据浏览器及其版本不同有不同实现不使用 jQuery 创建
14、 XMLHttpRequest 对象var xmlhttp = false;try xmlhttp = new ActiveXObject(Msxml2.XMLHTTP); catch (e) try xmlhttp = new ActiveXObject(Microsoft.XMLHTTP); catch (E) xmlhttp = false; if (!xmlhttp & typeof XMLHttpRequest!=undefined) try xmlhttp = new XMLHttpRequest(); catch (e) xmlhttp=false; if (!xmlhttp &
15、 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(http:/ jQuery AJAX APIjQuery resourses jQuery UI jQuery Plugins John Resigs blog
