JavaScript客户端框架JQuery开发入门_第1页
JavaScript客户端框架JQuery开发入门_第2页
JavaScript客户端框架JQuery开发入门_第3页
JavaScript客户端框架JQuery开发入门_第4页
JavaScript客户端框架JQuery开发入门_第5页
已阅读5页，还剩40页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

JavaScript客户端框架-jQuery开发入门

第一章JQuery开发入门教学目的：使学生掌握JQuery的开发方法。基本要求：了解什么是JQuery，掌握JQuery的开发方法，掌握使用JQuery开发简单应用的方法。重点与难点：JQuery开发简单应用的方法。VisualStudio2010开发环境1.开发环境介绍2.项目文件构成介绍第一节课1.几个案例1）jquery-lightbox-0.52）基于jQuery焦点图片新闻代码（JS+CSS）3）.中国地图/pins/demoshow/20304）jquery插件合集之图片裁剪

/demo/cropZoom/2.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遍历和修改AJAXUtilities版本演进：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.92013年4月18日jQuery2.0正式版发布3.JQuery的简单应用jQuery库是一个单独的javascript文件，可以保存到本地或者服务器直接引用，也可以从多个公共服务器中选择引用。有MediaTemple、Google、Microsoft等多家公司给jQuery提供CDN服务，比较常用的引用地址如下<scripttype="text/javascript"src="/ajax/libs/jquery/1.8/jquery.min.js"></script><scripttype="text/javascript">$(document).ready(function(){//scriptgoeshere});</script>或者其简写$(function(){//scriptgoeshere});当dom加载完就可以执行（比window.onload更早）。在同一个页面里可以多次出现.ready()；注意到在我们的实例中的所有jQuery

函数位于一个documentready函数中：这是为了防止文档在完全加载（就绪）之前运行jQuery

代码。实例

为元素添加单击事件，发生对象隐藏效果<html><head><scripttype="text/javascript"src="jquery.js"></script><scripttype="text/javascript">$(document).ready(function(){$("p").click(function(){$(this).hide();});});</script></head><body><p>Ifyouclickonme,Iwilldisappear.</p></body></html>jQuery使用$符号作为jQuery的简洁方式。某些其他JavaScript库中的函数（比如Prototype）同样使用$符号。4.如何把jQuery添加到网页

1)方案一：如需使用jQuery，需要下载jQuery库（会在下面为讲解），然后把它包含在希望使用的网页中。jQuery库是一个JavaScript文件，可以使用HTML的<script>标签引用它：<head><scriptsrc="jquery.js"></script></head>请注意，<script>标签应该位于页面的<head>部分。2）方案二（替代方案）如果不希望下载并存放jQuery，那么也可以通过CDN（内容分发网络）引用它。谷歌和微软的服务器都存有jQuery。如需从谷歌或微软引用jQuery，请使用以下代码之一：提示：使用谷歌或微软的jQuery，有一个很大的优势：许多用户在访问其他站点时，已经从谷歌或微软加载过jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载jQuery，这样可以减少加载时间。同时，大多数CDN都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。5.如何使用jQueryIntellisense

6.一些案例<!DOCTYPEhtml><html><head><scriptsrc="///ajax/libs/jquery/1.8.3/jquery.min.js"></script><scripttype="text/javascript">$(document).ready(function(){$("#hide").click(function(){$("p").hide();});$("#show").click(function(){$("p").show();});});</script></head><body><pid="p1">如果点击“隐藏”按钮，我就会消失。</p><buttonid="hide"type="button”>隐藏</button><buttonid="show"type="button">显示</button></body></html><!DOCTYPEhtml><html><head><scriptsrc="///ajax/libs/jquery/1.8.3/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("#div1").fadeIn();$("#div2").fadeIn("slow");$("#div3").fadeIn(3000);});});</script></head><body><p>演示带有不同参数的fadeIn()方法。</p><button>点击这里，使三个矩形淡入</button><br><br><divid="div1"style="width:80px;height:80px;display:none;background-color:red;"></div><br><divid="div2"style="width:80px;height:80px;display:none;background-color:green;"></div><br><divid="div3"style="width:80px;height:80px;display:none;background-color:blue;"></div></body></html><!DOCTYPEhtml><html><head><scriptsrc="///ajax/libs/jquery/1.8.3/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("#div1").fadeToggle();$("#div2").fadeToggle("slow");$("#div3").fadeToggle(3000);});});</script></head><body><p>演示带有不同参数的fadeToggle()方法。</p><button>点击这里，使三个矩形淡入淡出</button><br><br><divid="div1"style="width:80px;height:80px;background-color:red;"></div><br><divid="div2"style="width:80px;height:80px;background-color:green;"></div><br><divid="div3"style="width:80px;height:80px;background-color:blue;"></div></body></body></html>附加：单独文件中的函数

如果您的网站包含许多页面，并且您希望您的jQuery函数易于维护，那么请把您的jQuery函数放到独立的.js文件中。第二节课几个常用动画函数jQueryCallbackJQueryChaining一、几个常用动画函数

1.jQuery滑动方法通过jQuery，可以在元素上创建滑动效果。jQuery拥有以下滑动方法：slideDown()slideUp()slideToggle()1）jQueryslideDown()方法jQueryslideDown()方法用于向下滑动元素。语法：$(selector).slideDown(speed,callback);可选的speed参数规定效果的时长。它可以取以下值："slow"、"fast"或毫秒。可选的callback参数是滑动完成后所执行的函数名称。<scriptsrc="///ajax/libs/jquery/1.8.3/jquery.min.js"></script><scripttype="text/javascript">$(document).ready(function(){$(".flip").click(function(){$(".panel").slideDown("slow");});});</script>

<styletype="text/css">div.panel,p.flip{margin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid1px#c3c3c3;}div.panel{height:120px;display:none;}<body>

<divclass="panel"><p>点击观看</p><p>领略下拉效果的魅力</p></div>

<pclass="flip">请点击这里</p>

</body></html>2）jQueryslideUp()方法jQueryslideUp()方法用于向上滑动元素。语法：$(selector).slideUp(speed,callback);可选的speed参数规定效果的时长。它可以取以下值："slow"、"fast"或毫秒。可选的callback参数是滑动完成后所执行的函数名称。<scriptsrc="///ajax/libs/jquery/1.8.3/jquery.min.js"></script><scripttype="text/javascript">$(document).ready(function(){$(".flip").click(function(){$(".panel").slideUp("slow");});});</script><styletype="text/css">div.panel,p.flip{margin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid1px#c3c3c3;}div.panel{height:120px;}</style></html><body><divclass="panel"><p>W3School-领先的Web技术教程站点</p><p>在W3School，你可以找到你所需要的所有网站建设教程。</p></div>

<pclass="flip">请点击这里</p>

</body>3）jQueryslideToggle()方法jQueryslideToggle()方法可以在slideDown()与slideUp()方法之间进行切换。如果元素向下滑动，则slideToggle()可向上滑动它们。如果元素向上滑动，则slideToggle()可向下滑动它们。$(selector).slideToggle(speed,callback);可选的speed参数规定效果的时长。它可以取以下值："slow"、"fast"或毫秒。可选的callback参数是滑动完成后所执行的函数名称。<scriptsrc="///ajax/libs/jquery/1.8.3/jquery.min.js"></script><scripttype="text/javascript">$(document).ready(function(){$(".flip").click(function(){$(".panel").slideToggle("slow");});});</script><styletype="text/css">div.panel,p.flip{margin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid1px#c3c3c3;}div.panel{height:120px;display:none;}</style><body><divclass="panel"><p>W3School-领先的Web技术教程站点</p><p>在W3School，你可以找到你所需要的所有网站建设教程。</p></div>

<pclass="flip">请点击这里</p>

</body>2.jQuery动画-animate()方法jQueryanimate()方法用于创建自定义动画。语法：$(selector).animate({params},speed,callback);必需的params参数定义形成动画的CSS属性。可选的speed参数规定效果的时长。它可以取以下值："slow"、"fast"或毫秒。可选的callback参数是动画完成后所执行的函数名称。<!DOCTYPEhtml><html><head><script

src="///ajax/libs/jquery/1.8.3/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("div").animate({left:'250px'});});});</script></head>

<body><button>开始动画</button><p>默认情况下，所有HTML元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的CSSposition属性设置为relative、fixed或absolute。</p><divstyle="background:#98bf21;height:100px;width:100px;position:absolute;"></div></body></html>1）jQueryanimate()-操作多个属性请注意，生成动画的过程中可同时使用多个属性：实例$("button").click(function(){$("div").animate({left:'250px',opacity:'0.5',height:'150px',width:'150px'});});同时，色彩动画并不包含在核心jQuery库中。如果需要生成颜色动画，您需要从jQ下载ColorAnimations插件。提示：可以用animate()方法来操作所有CSS属性吗？是的，几乎可以！不过，需要记住一件重要的事情：当使用animate()时，必须使用Camel标记法书写所有的属性名，比如，必须使用paddingLeft而不是padding-left，使用marginRight而不是margin-right，等等。2)jQueryanimate()-使用相对值也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上+=或-=：实例$("button").click(function(){$("div").animate({left:'250px',height:'+=150px',width:'+=150px'});});3)jQueryanimate()-使用预定义的值您甚至可以把属性的动画值设置为"show"、"hide"或"toggle"：实例$("button").click(function(){$("div").animate({height:'toggle'});});4)jQueryanimate()-使用队列功能默认地，jQuery提供针对动画的队列功能。这意味着如果您在彼此之后编写多个animate()调用，jQuery会创建包含这些方法调用的“内部”队列。然后逐一运行这些animate调用。实例1隐藏，如果您希望在彼此之后执行不同的动画，那么我们要利用队列功能：$("button").click(function(){vardiv=$("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.jQuerystop()方法用于在动画或效果完成前对它们进行停止。jQuerystop()方法用于停止动画或效果，在它们完成之前。stop()方法适用于所有jQuery效果函数，包括滑动、淡入淡出和自定义动画。stop()方法适用于所有jQuery效果函数，包括滑动、淡入淡出和自定义动画。语法$(selector).stop(stopAll,goToEnd);可选的stopAll参数规定是否应该清除动画队列。默认是false，即仅停止活动的动画，允许任何排入队列的动画向后执行。可选的goToEnd参数规定是否立即完成当前动画。默认是false。因此，默认地，s

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论