三大框架课件ajaxjquery等入门_第1页
三大框架课件ajaxjquery等入门_第2页
三大框架课件ajaxjquery等入门_第3页
三大框架课件ajaxjquery等入门_第4页
三大框架课件ajaxjquery等入门_第5页
已阅读5页，还剩57页未读， 继续免费阅读

下载本文档

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

文档简介

Copyright2008ByNeusoftGroup.Allrightsreserved第一章jQuery入门

东软IT人才实训中心第一章：jQuery初级语法学时：0.5学时教学方法：讲授+练习目标:使用jQuery的一些简单介绍jQuery库包含juery是JavaScript函数库HTML元素选取HTML元素操作CSS操作HTML事件函数JavaScript特效和动画HTMLDOM遍历和修改AJAXUtilitiesjQuery语法jQuery语法是为HTML元素的选取编制的，可以对元素执行某些操作。基础语法是：$(selector).action()javascriptdocument.getElementById("")美元符号定义jQuery选择符（selector）“查询”和“查找”HTML元素jQuery的action()执行对元素的操作示例：

$(this).hide()-隐藏当前元素$("p").hide()-隐藏所有段落$("p.test").hide()-隐藏所有class="test"的段落<tableclass="test">$("#test").hide()-隐藏所有id="test"的元素提示：jQuery使用的语法是XPath与CSS选择器语法的组合。在本教程接下来的章节，您将学习到更多有关选择器的语法。注意(一)请注意在实例中的所有jQuery函数位于一个documentready函数中：$(document).ready(function(){---jQueryfunctionsgohere----});这是为了防止文档在完全加载（就绪）之前运行jQuery代码。注意（二）如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：试图隐藏一个不存在的元素获得未完全加载的图像的大小第二章：jQuery选择器学时：0.5学时教学方法：讲授+练习目标:理解并掌握各种jquery选择器jQuery选择器在前面的章节中，我们展示了一些有关如何选取HTML元素的实例。关键点是学习jQuery选择器是如何准确地选取您希望应用效果的元素。jQuery元素选择器和属性选择器允许您通过标签名、属性名或内容对HTML元素进行选择。选择器允许您对HTML元素组或单个元素进行操作。在HTMLDOM术语中：选择器允许您对DOM元素组或单个DOM节点进行操作。jQuery元素选择器jQuery使用CSS选择器来选取HTML元素。$("p")选取<p>元素。$("ro")选取所有class="intro"的<p>元素。$("p#demo")选取id="demo"的第一个<p>元素。jQuery属性选择器jQuery使用XPath表达式来选择带有给定属性的元素。$("[href]")选取所有带有href属性的元素。$("[href='#']")选取所有带有href值等于"#"的元素。$("[href!='#']")选取所有带有href值不等于"#"的元素。$("[href$='.jpg']")选取所有href值以".jpg"结尾的元素。jQueryCSS选择器jQueryCSS选择器可用于改变HTML元素的CSS属性。下面的例子把所有p元素的背景颜色更改为红色：实例：<html><head><scripttype="text/javascript"src="js/jquery.js"></script><scripttype="text/javascript">$(document).ready(function(){$("button").click(function(){$("p").css("background-color","red");});});</script></head><body><h2>Thisisaheading</h2><p>Thisisaparagraph.</p><p>Thisisanotherparagraph.</p><buttontype="button">Clickme</button></body></html>第三章：jQuery事件函数学时：1学时教学方法：讲授+练习目标:理解并掌握各种jquery事件函数jQuery事件函数jQuery事件处理方法是jQuery中的核心函数。事件处理程序指的是当HTML中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。通常会把jQuery代码放到<head>部分的事件处理方法中：实例<html><head><scripttype="text/javascript"src="/jquery/jquery.js"></script><scripttype="text/javascript">$(document).ready(function(){$("button").click(function(){$("p").hide();});});</script></head><body><h2>Thisisaheading</h2><p>Thisisaparagraph.</p><p>Thisisanotherparagraph.</p><buttontype="button">Clickme</button></body></html>实例解析在上面的例子中，当按钮的点击事件被触发时会调用一个函数：$("button").click(function(){..somecode...})该方法隐藏所有<p>元素：$("p").hide();单独文件中的函数如果您的网站包含许多页面，并且您希望您的jQuery函数易于维护，那么请把您的jQuery函数放到独立的.js文件中。当我们在教程中演示jQuery时，会将函数直接添加到<head>部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过src属性来引用文件）：实例<head><scripttype="text/javascript"src="jquery.js"></script><scripttype="text/javascript"src="my_jquery_functions.js"></script></head>jQuery名称冲突jQuery使用$符号作为jQuery的简介方式。某些其他JavaScript库中的函数（比如Prototype）同样使用$符号。jQuery使用名为noConflict()的方法来解决该问题。varjq=jQuery.noConflict()，帮助您使用自己的名称（比如jq）来代替$符号实例<html><head><scripttype="text/javascript"src="js/jquery.js"></script><scripttype="text/javascript">varjq=jQuery.noConflict();jq(document).ready(function(){jq("button").click(function(){jq("p").hide();});});</script></head><body><h2>Thisisaheading</h2><p>Thisisaparagraph.</p><p>Thisisanotherparagraph.</p><buttontype="button">Clickme</button></body></html>结论由于jQuery是为处理HTML事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：把所有jQuery代码置于事件处理函数中把所有事件处理函数置于文档就绪事件处理器中把jQuery代码置于单独的.js文件中如果存在名称冲突，则重命名jQuery库jQuery事件详细的jQery事件请点击第三章：jQuery效果学时：2.5学时教学方法：讲授+练习目标:理解并掌握各种jquery效果jQuery隐藏和显示通过hide()和show()两个函数，jQuery支持对HTML元素的隐藏和显示：实例 <html><head><scripttype="text/javascript"src="js/jquery.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>语法：hide()和show()都可以设置两个可选参数：speed和callback。$(selector).hide(speed,callback)$(selector).show(speed,callback)speed参数规定显示或隐藏的速度。可以设置这些值："slow","fast","normal"或毫秒。callback参数是在hide或show函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关callback参数的知识。实例1<html><head><scripttype="text/javascript"src="/jquery/jquery.js"></script><scripttype="text/javascript">$(document).ready(function(){$("button").click(function(){$("p").hide(1000);});});</script></head><body><buttontype="button">隐藏</button><p>Thisisaparagraphwithlittlecontent.</p><p>Thisisanothersmallparagraph.</p></body></html>实例2<html><head><scripttype="text/javascript"src="js/jquery.js"></script><scripttype="text/javascript">$(document).ready(function(){$(".ex.hide").click(function(){$(this).parents(".ex").hide("slow");});});</script><styletype="text/css">div.ex{background-color:#e5eecc;padding:7px;border:solid1px#c3c3c3;}</style></head>

<body><h3>IslandTrading</h3><divclass="ex"><buttonclass="hide"type="button">Hideme</button><p>Contact:HelenBennett<br/>GardenHouseCrowtherWay<br/>London</p></div><h3>ParisTrading</h3><divclass="ex"><buttonclass="hide"type="button">Hideme</button><p>Contact:MarieBertrand<br/>265,BoulevardCharonne<br/>Paris</p></div></body></html>jQuery切换jQuerytoggle()函数使用show()或hide()函数来切换HTML元素的可见状态。隐藏显示的元素，显示隐藏的元素。语法：$(selector).toggle(speed,callback)speed参数可以设置这些值："slow","fast","normal"或毫秒。jQuery效果jQuery可以创建隐藏、显示、切换、滑动以及自定义动画等效果。详细描述见实例<html><head><scripttype="text/javascript"src="js/jquery.js"></script><scripttype="text/javascript">$(document).ready(function(){$("button").click(function(){$("p").toggle();});});</script></head><body><buttontype="button">切换</button><p>Thisisaparagraphwithlittlecontent.</p><p>Thisisanothersmallparagraph.</p></body></html>jQuery滑动函数jQuery拥有以下滑动函数：$(selector).slideDown(speed,callback)$(selector).slideUp(speed,callback)$(selector).slideToggle(speed,callback)speed参数可以设置这些值："slow","fast","normal"或毫秒。callback参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关callback参数的知识。slideDown()实例<html><head><scripttype="text/javascript"src="js/jquery.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;}</style></head>

<body>

<divclass="panel"><p>neusfot-领先的Web技术教程站点</p><p>在neusfot，你可以找到你所需要的所有网站建设教程。</p></div>

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

</body></html>slideUp()实例<html><head><scripttype="text/javascript"src="js/jquery.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></head>

<body>

<divclass="panel"><p>neusfot-领先的Web技术教程站点</p><p>在neusfot，你可以找到你所需要的所有网站建设教程。</p></div>

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

</body></html>slideToggle()实例<html><head><scripttype="text/javascript"src="js/jquery.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></head>

<body>

<divclass="panel"><p>neusoft-领先的Web技术教程站点</p><p>在W3School，你可以找到你所需要的所有网站建设教程。</p></div>

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

</body></html>jQueryFade函数jQuery拥有以下fade函数：$(selector).fadeIn(speed,callback)$(selector).fadeOut(speed,callback)$(selector).fadeTo(speed,opacity,callback)speed参数可以设置这些值："slow","fast","normal"或毫秒。fadeTo()函数中的opacity参数规定减弱到给定的不透明度。callback参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关callback参数的知识。fadeTo()实例<html><head><scripttype="text/javascript"src="js/jquery.js"></script><scripttype="text/javascript">$(document).ready(function(){$("button").click(function(){$("div").fadeTo("slow",0.25);});});</script></head><body><divid="test"style="background:yellow;width:300px;height:300px"><buttontype="button">点击这里查看淡出效果</button></div></body></html>fadeOut()实例<html><head><scripttype="text/javascript"src="js/jquery.js"></script><scripttype="text/javascript">$(document).ready(function(){$("#test").click(function(){$(this).fadeOut(4000);});});</script></head><body><divid="test"style="background:yellow;width:200px">CLICKMEAWAY!</div><p>如果您点击上面的框，它会淡出直到消失为止。</p></body></html>jQuery自定义动画jQuery函数创建自定义动画的语法：$(selector).animate({params},[duration],[easing],[callback])关键的参数是params。它定义产生动画的CSS属性。可以同时设置多个此类属性：animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});第二个参数是duration。它定义用来应用到动画的时间。它设置的值是："slow","fast","normal"或毫秒。实例1<html><head><scripttype="text/javascript"src="js/jquery.js"></script><scripttype="text/javascript">$(document).ready(function(){$("#start").click(function(){$("#box").animate({height:300},"slow");$("#box").animate({width:300},"slow");$("#box").animate({height:100},"slow");$("#box").animate({width:100},"slow");});});</script></head>

<body><p><ahref="#"id="start">StartAnimation</a></p><divid="box"style="background:#98bf21;height:100px;width:100px;position:relative"></div>

</body></html>实例2<html><head><scripttype="text/javascript"src="js/jquery.js"></script><scripttype="text/javascript">$(document).ready(function(){$("#start").click(function(){$("#box").animate({left:"100px"},"slow");$("#box").animate({fontSize:"3em"},"slow");});});</script></head>

<body><p><ahref="#"id="start">StartAnimation</a></p><divid="box"style="background:#98bf21;height:100px;width:200px;position:relative">HELLO</div>

</body></html>第三章：jQueryCallback学时：1.5学时教学方法：讲授+练习目标:理解并掌握各种jQueryCallbackjQueryCallback函数Callback函数在当前动画100%完成之后执行jQuery动画的问题许多jQuery函数涉及动画。这些函数也许会将speed或duration作为可选参数。例子：$("p").hide("slow")speed或duration参数可以设置许多不同的值，比如"slow","fast","normal"或毫秒。看一个例子<html><head><scripttype="text/javascript"src="js/jquery.js"></script><scripttype="text/javascript">$(document).ready(function(){$("button").click(function(){$("p").hide(1000);});});</script></head><body><buttontype="button">隐藏</button><p>Thisisaparagraphwithlittlecontent.</p><p>Thisisanothersmallparagraph.</p></body></html>注意由于JavaScript语句（指令）是逐一执行的-按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。为了避免这个情况，您可以以参数的形式添加Callback函数。典型的语法：$(selector).hide(speed,callback)callback参数是一个在hide操作完成后被执行的函数。错误（没有callback）$("p").hide(1000);alert("Theparagraphisnowhidden");实例<html><head><scripttype="text/javascript"src="js/jquery.js"></script><scripttype="text/javascript">$(document).ready(function(){$("button").click(function(){$("p").hide(2000);alert("Theparagraphisnowhidden");});});</script></head><body><buttontype="button">Hide</button><p>Thisisaparagraphwithlittlecontent.</p></body></html>正确（有callback）实例<html><head><scripttype="text/javascript"src="js/jquery.js"></script><scripttype="text/javascript">$(document).ready(function(){$("button").click(function(){$("p").hide(1000,function(){alert("Theparagraphisnowhidden");});});});</script></head><body><buttontype="button">Hide</button><p>Thisisaparagraphwithlittlecontent.</p></body></html>第四章：jQueryHTML学时：1.5学时教学方法：讲授+练习目标:理解并掌握各种jQueryHTML改变HTML内容语法$(selector).html(content)html()函数改变所匹配的HTML元素的内容（innerHTML）。实例<html><head><scripttype="text/javascript"src="js/jquery.js"></script><scripttype="text/javascript">$(document).ready(function(){$("button").click(function(){$("p").html("W3School");});});</script></head><body><h2>Thisisaheading</h2><p>Thisisaparagraph.</p><p>Thisisanotherparagraph.</p><buttontype="button">请点击这里</button></body></html>添加HTML内容语法$(selector).append(content)append()函数向所匹配的HTML元素内部追加内容。实例<html><head><scripttype="text/javascript"src="/jquery/jquery.js"></script><scripttype="text/javascript">$(document).ready(function(){$("button").click(function(){$("p").append("<b>W3School</b>.");});});</script></head><body><h2>Thisisaheading</h2><p>Thisi

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

温馨提示

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

最新文档

评论

0/150

提交评论