JavaScript客户端框架2

JavaScript客户端框架-JQuery开发入门第一章JQuery开发入门教学目的：使学生掌握JQuery的开发方法。基本要求：了解什么是JQuery，掌握JQuery的开发方法，掌握使用JQuery开发简单应用的方法。重点与难点：JQuery开发简单应用的方法。第一节课1.几个案例1）jquery-lightbox-0.52）基于jQuery焦点图片新闻代码（JS+CSS）3）.jQueryAutocompletePluginDemo）jquery插件合集之图片裁剪概述jQuery是一个兼容多浏览器的javascript库，核心理念是writeless,domore(写的更少,做的更多)。jQuery在2006年1月由美国人JohnResig在纽约的barcamp发布，吸引了来自世界各地的众多javascript高手加入，现在由DaveMethvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。​jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发者更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。jQuery库-特性jQuery是一个JavaScript函数库。jQuery库包含以下特性：HTML元素选取HTML元素操作CSS操作HTML事件函数JavaScript特效和动画HTMLDOM遍历和修改AJAXUtilities版本演进：jQuery1.0（2006年8月）：该库的第一个稳定版本，已经具有了对CSS选择符、事件处理和AJAX交互的稳健支持。jQuery1.1（2007年1月）：这一版大幅简化了API。许多较少使用的方法被合并，减少了需要掌握和解释的方法数量。jQuery1.1.3（2007年7月）：这次小版本变化包含了对jQuery选择符引擎执行速度的显著提升。从这个版本开始，jQuery的性能达到了Prototype、Mootools以及Dojo等同类JavaScript库的水平。jQuery1.2（2007年9月）：这一版去掉了对XPath选择符的支持，原因是相对于CSS语法它已经变得多余了。这一版能够支持对效果的更灵活定制，而且借助新增的命名空间事件，也使插件开发变得更容易。jQueryUI（2007年9月）：这个新的插件套件是作为曾经流行但已过时的Interface插件的替代项目而发布的。jQueryUI中包含大量预定义好的部件（widget），以及一组用于构建高级元素（例如可拖放的界面元素）的工具。jQuery1.2.6（2008年5月）：这一版主要是将BrandonAaron开发的流行的Dimensions插件的功能移植到了核心库中。jQuery1.3（2009年1月）：这一版使用了全新的选择符引擎Sizzle，库的性能也因此有了极大提升。这一版正式支持事件委托特性。jQuery1.3.2（2009年2月）：这次小版本升级进一步提升了库的性能，例如改进了：visible/:hidden选择符、.height()/.width()方法的底层处理机制。另外，也支持查询的元素按文档顺序返回。jQuery1.4（2010年1月14号)对代码库进行了内部重写组织，开始建立一些风格规范。老的core.js文件被分为attribute.js,css.js,data.js,manipulation.js,traversing.js和queue.js；CSS和attribute的逻辑分离。jQuery1.5（2011年1月31日）：该版本修复了83个bug，解决了460个问题。重大改进有：重写了Ajax模块；新增延缓对象（DeferredObjects）；jQuery替身——jQuery.sub()；增强了遍历相邻节点的性能；jQuery开发团队构建系统的改进。2012年03月24日jQuery1.7.2正式版发布。2012年11月14日jQuery1.8.3发布，修复bug和性能衰退问题2013-01jQuery1.93.JQuery的简单应用jQuery库是一个单独的javascript文件，可以保存到本地或者服务器直接引用，也可以从多个公共服务器中选择引用。有MediaTemple、Google、Microsoft等多家公司给jQuery提供CDN服务，比较常用的引用地址如下scripttype=text/javascriptsrc=$(document).ready(function(){//scriptgoeshere});或者其简写$(function(){//scriptgoeshere});当dom加载完就可以执行（比window.onload更早）。在同一个页面里可以多次出现.ready()；注意到在我们的实例中的所有jQuery函数位于一个documentready函数中：这是为了防止文档在完全加载（就绪）之前运行jQuery代码。实例为元素添加单击事件，发生对象隐藏效果htmlheadscripttype=text/javascriptsrc=jquery.js/scriptscripttype=text/javascript$(document).ready(function(){$(p).click(function(){$(this).hide();});});/script/headbodypIfyouclickonme,Iwilldisappear./p/body/htmljQuery使用$符号作为jQuery的简介方式。某些其他JavaScript库中的函数（比如Prototype）同样使用$符号。4.把jQuery添加到您的网页1)方案一：如需使用jQuery，您需要下载jQuery库（会在下面为您讲解），然后把它包含在希望使用的网页中。jQuery库是一个JavaScript文件，您可以使用HTML的script标签引用它：headscriptsrc=jquery.js/script/head请注意，script标签应该位于页面的head部分。提示：您是否很疑惑为什么我们没有在script标签中使用type=text/javascript？在HTML5中，不必那样做了。JavaScript是HTML5以及所有现代浏览器中的默认脚本语言！2）方案二（替代方案）如果您不希望下载并存放jQuery，那么也可以通过CDN（内容分发网络）引用它。谷歌和微软的服务器都存有jQuery。如需从谷歌或微软引用jQuery，请使用以下代码之一：提示：使用谷歌或微软的jQuery，有一个很大的优势：许多用户在访问其他站点时，已经从谷歌或微软加载过jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载jQuery，这样可以减少加载时间。同时，大多数CDN都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。5.如何使用jQueryIntellisense6.一些案例!DOCTYPEhtmlhtmlheadscriptsrc=//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js/scriptscripttype=text/javascript$(document).ready(function(){$(#hide).click(function(){$(p).hide();});$(#show).click(function(){$(p).show();});});/script/headbodypid=p1如果点击“隐藏”按钮，我就会消失。/pbuttonid=hidetype=button”隐藏/buttonbuttonid=showtype=button显示/button/body/html!DOCTYPEhtmlhtmlheadscriptsrc=//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js/scriptscript$(document).ready(function(){$(button).click(function(){$(#div1).fadeIn();$(#div2).fadeIn(slow);$(#div3).fadeIn(3000);});});/script/headbodyp演示带有不同参数的fadeIn()方法。/pbutton点击这里，使三个矩形淡入/buttonbrbrdivid=div1style=width:80px;height:80px;display:none;background-color:red;/divbrdivid=div2style=width:80px;height:80px;display:none;background-color:green;/divbrdivid=div3style=width:80px;height:80px;display:none;background-color:blue;/div/body/html!DOCTYPEhtmlhtmlheadscriptsrc=//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js/scriptscript$(document).ready(function(){$(button).click(function(){$(#div1).fadeToggle();$(#div2).fadeToggle(slow);$(#div3).fadeToggle(3000);});});/script/headbodyp演示带有不同参数的fadeToggle()方法。/pbutton点击这里，使三个矩形淡入淡出/buttonbrbrdivid=div1style=width:80px;height:80px;background-color:red;/divbrdivid=div2style=width:80px;height:80px;background-color:green;/divbrdivid=div3style=width:80px;height:80px;background-color:blue;/div/body/body/html附加：单独文件中的函数如果您的网站包含许多页面，并且您希望您的jQuery函数易于维护，那么请把您的jQuery函数放到独立的.js文件中。第二节课几个常用动画函数jQueryCallbackJQueryChaining一、几个常用动画函数1.jQuery滑动方法通过jQuery，可