JQurey入门基础一.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,*,JQuery,入门基础,JQuery,简介,JQuery,语法,JQuery,选择器,JQuery,事件,JQuery,效果,JQuery,简介,jQuery,库可以通过一行简单的标记被添加到网页中（,写更少的代码干更多的事,）。,jQuery,库,-,特性,向页面添加,jQuery,库,基础,jQuery,实例,下载,jQuery,库的替代,jQuery,库,-,特性,HTML,元素选取,HTML,元素操作,CSS,操作,HTML,事件函数,JavaScript,特效和动画,HTML DOM,遍历和修改,AJAX,向页面添加,jQuery,库,jQuery,库位于单个的,JavaScript,文件中，其中包含所有,jQuery,函数。,可以通过下面的标记把,jQuery,添加到网页中：,请注意，,标签应该位于页面的,部分。,基础,jQuery,实例,下面的例子演示了,jQuery,的,hide(),函数，隐藏了,HTML,文档中所有的,元素。,$(,document).ready(function,()$(,button).click(function,()$(,p).hide,();););,This is a heading This is a paragraph.This is another paragraph.Click me,下载,jQuery,存在两份,jQuery,拷贝可供下载，一是缩小版（由,Google Closure Compiler,），另一个是未压缩版（供,debugging,或,reading,）。,jquery-1.4.4.min.js,jquery-1.4.4.js,库的替代,使用,Google,的,CDN,使用,Microsoft,的,CDN,JQuery,语法,通过,jQuery,，您可以选取（查询，,query,）,HTML,元素，并对它们执行“操作”（,actions,）。,jQuery,语法是为,HTML,元素的选取编制，可以对元素执行某些操作。,基础语法是：,$(,selector).action,(),美元符号定义,jQuery,选择符（,selector,）“查询”和“查找”,HTML,元素,jQuery,action(),执行对元素的操作,提示：,jQuery,使用的语法是,XPath,与,CSS,选择器语法的组合。,jQuery,选择器,选择器允许对元素组或单个元素进行操作。,关键点是学习,jQuery,选择器是如何准确地选取您希望应用效果的元素。,jQuery,元素选择器和属性选择器允许您通过标签名、属性名或内容对,HTML,元素进行选择。,选择器允许您对,HTML,元素组或单个元素进行操作。,jQuery,选择器,jQuery,元素选择器,jQuery,属性选择器,jQuery,CSS,选择器,jQuery,元素选择器,jQuery,使用,CSS,选择器来选取,HTML,元素。,$(p),选取,元素。,$(,p.intro,),选取所有,class=intro,的,元素。,$(,p#demo,),选取,id=demo,的第一个,元素。,jQuery,属性选择器,jQuery,使用,XPath,表达式来选择带有给定属性的元素。,$(,href,),选取所有带有,href,属性的元素。,$(,href,=#),选取所有带有,href,值等于,#,的元素。,$(,href,!=#),选取所有带有,href,值不等于,#,的元素。,$(,href,$=.jpg),选取所有,href,值以,.jpg,结尾的元素。,jQuery,CSS,选择器,jQuery,CSS,选择器可用于改变,HTML,元素的,CSS,属性。,下面的例子把所有,p,元素的背景颜色更改为红色：,实例,$(,p).css(background-color,red,);,jQuery,事件,jQuery,是为事件处理特别设计的。,jQuery,事件函数,在,中,或,单独文件中的函数,jQuery,名称冲突,结论,常见,jQuery,事件,jQuery,事件函数,jQuery,事件处理函数是,jQuery,中的核心函数。,事件处理函数是当,HTML,中发生事件时自动被调用的函数。由“,事件,”（,event,）“,触发,”（,triggered,）是经常被用到的术语。,在,中,-1,在,中,由于,jQuery,是为事件处理特别设计的，通常是把,jQuery,代码置于网页,部分的“事件处理”函数中。,所有事件函数都在文档自身的“事件处理器”内部进行定义：,$(,document).ready(function,(),.some code.,),在,中,-2,定义了一个处理,HTML,按钮的点击事件的,click,函数：,$(,button).click(function,(),.some code.,),click,函数内部的代码改变所有,元素样式：,$(,p).css(background-color,red,);,单独文件中的函数,如果网站包含许多页面，并且您希望您的,jQuery,函数易于维护，那么请把,jQuery,函数放到独立的,.,js,文件中。,jQuery,名称冲突,jQuery,使用,$,符号作为,jQuery,的简介方式。,某些其他,JavaScript,库中的函数（比如,Prototype,）同样使用,$,符号。,jQuery,使用名为,noConflict,(),的方法来解决该问题。,var,jq,=,jQuery.noConflict,(),，帮助您使用自己的名称（比如,jq,）来代替,$,符号。,结论,由于,jQuery,是为处理,HTML,事件而特别设计的，那么当遵循以下原则时，代码会更恰当且更易维护：,把所有,jQuery,代码置于事件处理函数中,把所有事件处理函数置于文档就绪事件处理器中,把,jQuery,代码置于单独的,.,js,文件中,如果存在名称冲突，则重命名,jQuery,库,常见,jQuery,事件,$(,document).ready(function,),文档的就绪事件（当,HTML,文档就绪可用）,$(,selector).click(function,),被选元素的点击事件,$(,selector).dblclick(function,),被选元素的双击事件,$(,selector).focus(function,),被选元素的获得焦点事件,$(,selector).mouseover(function,),被选元素的鼠标悬停事件,jQuery,效果,隐藏、显示、切换、滑动 以及动画,哇。噻。,效果演示与代码讲解,jQuery,隐藏和显示,通过,hide(),和,show(),两个函数，,jQuery,支持对,HTML,元素的隐藏和显示。,语法：,$(,selector).hide(speed,callback,)$(,selector).show(speed,callback,)callback,参数是在,hide,或,show,函数完成之后被执行的函数名称。下面的章节学习更多有关,callback,参数的知识。,speed,参数可以设置这些值：,slow,fast,normal,或,milliseconds,jQuery,滑动函数,slideDown,slideUp,slideToggle,$(,selector).slideDown(speed,callback,),$(,selector).slideUp(speed,callback,),$(,selector).slideToggle(speed,callback,),jQuery,Fade,函数 淡入淡出,fadeIn,(),fadeOut,(),fadeTo,(),$(,selector).fadeIn(speed,callback,),$(,selector).fadeOut(speed,callback,),$(,selector).fadeTo(speed,opacity,callback,),jQuery,自定义动画,jQuery,函数创建自定义动画的语法：,$(,selector).animate(params,duration,easing,callback,),关键的参数是,params,。它定义了产生动画的属性。可以同时设置多个此类属性：,animate(width:70%,opacity:0.4,marginLeft:0.6in,fontSize:3em);,第二个参数是,duration,。它定义用来应用于动画的时间。它设置的值是：,slow,fast,normal,或 毫秒。,jQuery,切换,jQuery,toggle(),函数使用,show(),或,hide(),函数来切换,HTML,元素的可见状态。,隐藏显示的元素，显示隐藏的元素。,语法：,$(,selector).toggle(speed,callback,)speed,参数可以设置这些值：,slow,fast,normal,或 毫秒。,