JavaScript客户端框架2.ppt

JavaScript客户端框架,- JQuery开发入门,第一章 JQuery开发入门 教学目的：使学生掌握JQuery的开发方法。 基本要求：了解什么是JQuery，掌握JQuery的开发方法，掌握使用JQuery开发简单应用的方法。 重点与难点：JQuery开发简单应用的方法。,第一节课,1.几个案例,1）jquery-lightbox-0.5,2）基于jQuery焦点图片新闻代码（JS+CSS）,3）. jQuery Autocomplete Plugin Demo http:/jquery.bassistance.de/autocomplete/demo/,4）jquery插件合集之图片裁剪,/demo/cropZoom/,2.JQuery概述,jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写的更少,做的更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多javascript高手加入，现在由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。 jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发者更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。,jQuery 库 - 特性,jQuery 是一个 JavaScript 函数库。 jQuery 库包含以下特性： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM遍历和修改 AJAX Utilities,版本演进：,jQuery 1.0（2006年8月）：该库的第一个稳定版本，已经具有了对CSS选择符、事件处理和AJAX交互的稳健支持。 jQuery 1.1（2007年1月）：这一版大幅简化了API。许多较少使用的方法被合并，减少了需要掌握和解释的方法数量。 jQuery 1.1.3（2007年7月）：这次小版本变化包含了对jQuery选择符引擎执行速度的显著提升。从这个版本开始，jQuery的性能达到了Prototype、Mootools以及Dojo等同类JavaScript库的水平。 jQuery 1.2（2007年9月）：这一版去掉了对XPath选择符的支持，原因是相对于CSS语法它已经变得多余了。这一版能够支持对效果的更灵活定制，而且借助新增的命名空间事件，也使插件开发变得更容易。 jQuery UI（2007年9月）：这个新的插件套件是作为曾经流行但已过时的Interface插件的替代项目而发布的。jQuery UI中包含大量预定义好的部件（widget），以及一组用于构建高级元素（例如可拖放的界面元素）的工具。 jQuery 1.2.6（2008年5月）：这一版主要是将Brandon Aaron开发的流行的Dimensions插件的功能移植到了核心库中。,jQuery 1.3（2009年1月）：这一版使用了全新的选择符引擎Sizzle，库的性能也因此有了极大提升。这一版正式支持事件委托特性。 jQuery 1.3.2（2009年2月）：这次小版本升级进一步提升了库的性能，例如改进了：visible/:hidden选择符、.height()/.width()方法的底层处理机制。另外，也支持查询的元素按文档顺序返回。 jQuery 1.4（2010年1月14号)对代码库进行了内部重写组织，开始建立一些风格规范。老的core.js文件被分为attribute.js,css.js,data.js,manipulation.js,traversing.js和queue.js；CSS和attribute的逻辑分离。 jQuery 1.5（2011年1月31日）：该版本修复了83个bug，解决了460个问题。重大改进有：重写了Ajax模块；新增延缓对象（Deferred Objects）；jQuery替身jQuery.sub()；增强了遍历相邻节点的性能；jQuery开发团队构建系统的改进。,2012年03月24日jQuery 1.7.2正式版发布。 2012年11月14日 jQuery 1.8.3 发布，修复 bug 和性能衰退问题 2013-01 jQuery 1.9,3.JQuery的简单应用,jQuery库是一个单独的javascript文件，可以保存到本地或者服务器直接引用，也可以从多个公共服务器中选择引用。有Media Temple、Google、Microsoft等多家公司给jQuery提供CDN服务，比较常用的引用地址如下 $(document).ready(function() /script goes here ); 或者其简写 $(function() /script goes here );,当dom加载完就可以执行（比window.onload更早）。在同一个页面里可以多次出现.ready()； 注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中： 这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。,实例,为元素添加单击事件，发生对象隐藏效果 $(document).ready(function() $(“p“).click(function() $(this).hide(); ); ); If you click on me, I will disappear. ,jQuery 使用 $ 符号作为 jQuery 的简介方式。 某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。,4.把 jQuery 添加到您的网页,1)方案一 ： 如需使用 jQuery，您需要下载 jQuery 库（会在下面为您讲解），然后把它包含在希望使用的网页中。 jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 标签引用它： 请注意， 标签应该位于页面的 部分。 提示：您是否很疑惑为什么我们没有在 标签中使用 type=“text/javascript“ ？ 在 HTML5 中，不必那样做了。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！,2）方案二（替代方案） 如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络） 引用它。 谷歌和微软的服务器都存有 jQuery 。 如需从谷歌或微软引用 jQuery，请使用以下代码之一：,提示：使用谷歌或微软的 jQuery，有一个很大的优势： 许多用户在访问其他站点时，已经从谷歌或微软加载过 jQuery。所有结果是，当他们访问您的 站点时，会从缓存中加载 jQuery，这样可以减少加载时间。 同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应， 这样也可以提高加载速度。,5.如何使用jQuery Intellisense,6.一些案例, $(document).ready(function() $(“#hide“).click(function() $(“p“).hide(); ); $(“#show“).click(function() $(“p“).show(); ); ); 如果点击“隐藏”按钮，我就会消失。 隐藏 显示 , $(document).ready(function() $(“button“).click(function() $(“#div1“).fadeIn(); $(“#div2“).fadeIn(“slow“); $(“#div3“).fadeIn(3000); ); ); 演示带有不同参数的 fadeIn() 方法。 点击这里，使三个矩形淡入 , $(document).ready(function() $(“button“).click(function() $(“#div1“).fadeToggle(); $(“#div2“).fadeToggle(“slow“); $(“#div3“).fadeToggle(3000); ); ); 演示带有不同参数的 fadeToggle() 方法。 点击这里，使三个矩形淡入淡出 ,附加：单独文件中的函数,如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。,第二节课 几个常用动画函数 jQuery Callback JQuery Chaining,一、几个常用动画函数,1.,jQuery 滑动方法 通过 jQuery，可以在元素上创建滑动效果。 jQuery 拥有以下滑动方法： slideDown() slideUp() slideToggle(),1）,jQuery slideDown() 方法 jQuery slideDown() 方法用于向下滑动元素。 语法： $(selector).slideDown(speed,callback); 可选的 speed 参数规定效果的时长。它可以取以下值：“slow“、“fast“ 或毫秒。 可选的 callback 参数是滑动完成后所执行的函数名称。, $(document).ready(function() $(“.flip“).click(function() $(“.panel“).slideDown(“slow“); ); ); div.panel,p.flip margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; div.panel height:120px; display:none; , 点击观看 领略下拉效果的魅力 请点击这里 ,2）,jQuery slideUp() 方法 jQuery slideUp() 方法用于向上滑动元素。 语法： $(selector).slideUp(speed,callback); 可选的 speed 参数规定效果的时长。它可以取以下值：“slow“、“fast“ 或毫秒。 可选的 callback 参数是滑动完成后所执行的函数名称。, $(document).ready(function() $(“.flip“).click(function() $(“.panel“).slideUp(“slow“); ); ); div.panel,p.flip margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; div.panel height:120px; , W3School - 领先的 Web 技术教程站点 在 W3School，你可以找到你所需要的所有网站建设教程。 请点击这里 ,3）,jQuery slideToggle() 方法 jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。 如果元素向下滑动，则 slideToggle() 可向上滑动它们。 如果元素向上滑动，则 slideToggle() 可向下滑动它们。 $(selector).slideToggle(speed,callback); 可选的 speed 参数规定效果的时长。它可以取以下值：“slow“、“fast“ 或毫秒。 可选的 callback 参数是滑动完成后所执行的函数名称。, $(document).ready(function() $(“.flip“).click(function() $(“.panel“).slideToggle(“slow“); ); ); div.panel,p.flip margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; div.panel height:120px; display:none; , W3School - 领先的 Web 技术教程站点 在 W3School，你可以找到你所需要的所有网站建设教程。 请点击这里 ,2.,jQuery 动画 - animate() 方法 jQuery animate() 方法用于创建自定义动画。 语法： $(selector).animate(params,speed,callback); 必需的 params 参数定义形成动画的 CSS 属性。 可选的 speed 参数规定效果的时长。它可以取以下值：“slow“、“fast“ 或毫秒。 可选的 callback 参数是动画完成后所执行的函数名称。, $(document).ready(function() $(“button“).click(function() $(“div“).animate(left:250px); ); ); 开始动画 默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。 ,1）,jQuery animate() - 操作多个属性 请注意，生成动画的过程中可同时使用多个属性： 实例 $(“button“).click(function() $(“div“).animate( left:250px, opacity:0.5, height:150px, width:150px ); );,同时，色彩动画并不包含在核心 jQuery 库中。 如果需要生成颜色动画，您需要从 jQ 下载 Color Animations 插件。,提示：可以用 animate() 方法来操作所有 CSS 属性吗？ 是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时， 必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。,2),jQuery animate() - 使用相对值 也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=： 实例 $(“button“).click(function() $(“div“).animate( left:250px, height:+=150px, width:+=150px ); );,3),jQuery animate() - 使用预定义的值 您甚至可以把属性的动画值设置为 “show“、“hide“ 或 “toggle“： 实例 $(“button“).click(function() $(“div“).animate( height:toggle ); );,4),jQuery animate() - 使用队列功能 默认地，jQuery 提供针对动画的队列功能。 这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。 实例 1 隐藏，如果您希望在彼此之后执行不同的动画，那么我们要利用队列功能： $(“button“).click(function() var div=$(“div“); div.animate(height:300px,opacity:0.4,“slow“); div.animate(width:300px,opacity:0.8,“slow“); div.animate(height:100px,opacity:0.4,“slow“); div.animate(width:100px,opacity:0.8,“slow“); );,3.,jQuery stop() 方法用于在动画或效果完成前对它们进行停止。 jQuery stop() 方法用于停止动画或效果，在它们完成之前。 stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。,stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。 语法 $(selector).stop(stopAll,goToEnd); 可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。 可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。 因此，默认地，stop() 会清除在被选元素上指定的当前动画。,二、jQuery Callback,由于 JavaScript 语句（指令）是逐一执行的 - 按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。 为了避免这个情况，您可以以参数的形式添加 Callback 函数。,jQuery Callback 函数 当动画 100% 完成后，