jQuery基础分析

jQuery基础练习•要将页面的状态栏中显示“已经选中该文本框”，JavaScript语句正确的是（）。A.window.status=已经选中该文本框B.document.status=已经选中该文本框C.window.screen=已经选中该文本框D.document.screen=已经选中该文本框“•history对象的方法（）用于加载历史列表中的下一个URL页面。A.next()B.back()C.forward()D.go(-1)主要内容•使用JavaScript脚本编写程序有时过于繁琐，而且当实现一些特殊效果时程序量较大，有一定难度，可以使用JavaScript框架去解决这些问题，jQuery是用的最多的一个轻量级JavaScript框架。•要点–jQuery基础–jQuery特效和动画。–jQuery对XHTML元素操作。1jQuery基础•jQuery是轻量级JavaScript库。jQuery可以对XHTML元素进行选取和操作，通过程序对CSS进行控制，定义了很多XHTML事件函数，能够实现JavaScript特效和动画，而且更方便对HTMLDOM进行遍历和修改。jQuery极大地简化了JavaScript编程，并且很容易学习掌握。1jQuery基础——添加jQuery库•jQuery库位于一个JavaScript文件中，其中包含了所有的jQuery函数。可以通过下面的标记把jQuery添加到页面中：headscripttype=text/javascriptsrc=jquery.js/script/head•共有两个版本的jQuery可供下载（）：一个是精简的，另一个是未压缩的。1jQuery基础——添加jQuery库•如果不愿意在自己的计算机上存放jQuery库，可以从Google或Microsoft的CDN（内容分发网络）加载jQuery核心文件。•在页面的头部中加入下面的标记可以使用Google的CDN。scripttype=text/javascriptsrc=•在页面的头部中加入下面的标记可以使用Microsoft的CDN。scripttype=text/javascriptsrc=基础——jQuery语法•jQuery可以选取XHTML元素，并对它们执行操作。jQuery基础语法如下：$(selector).action()•其中美元符号“$”定义jQuery，选择符（selector）选取XHTML元素，action()执行对元素的操作。$(this).hide()/*隐藏当前元素*/$(p).hide()/*隐藏所有段落*/$(#test).hide()/*隐藏所有id=test的元素*/1jQuery基础——jQuery语法1.jQuery选择器•jQuery选择器主要有三种：•元素选择器–jQuery使用CSS选择器来选取XHTML元素，也就是说选取元素的方法和CSS是相同的。–如：$(p)选取p元素，$(p.intro)选取所有class=intro的p元素。1jQuery基础——jQuery语法•属性选择器–jQuery使用XPath表达式来选择带有给定属性的元素。XPath是一门在XML文档中查找信息的语言，XPath使用路径表达式。–如：$([href])选取所有带有href属性的元素，$([href='#'])选取所有带有href值等于#的元素。•CSS选择器–CSS选择器可用于改变元素的CSS属性。–下面例子把所有p元素的背景颜色更改为红色：$(p).css(background-color,red);1jQuery基础——jQuery语法2.jQuery事件•jQuery为事件处理进行了特别设计，jQuery事件处理方法也是采用函数的形式，通常会在页面head部分定义事件，在响应事件的函数中编写jQuery代码。基本结构如下：$(selector).event(function(){//响应事件代码})•其中event指选择器选择的元素某一事件，括号里面是响应事件的函数。1jQuery基础——jQuery语法•jQuery常用事件主要有：–$(document).ready(function)：将函数绑定到文档的就绪事件（当文档完成加载时）。–$(selector).click(function)：触发或将函数绑定到被选元素的单击事件。–$(selector).dblclick(function)：触发或将函数绑定到被选元素的双击事件。–$(selector).focus(function)：触发或将函数绑定到被选元素的获得焦点事件。–$(selector).mouseover(function)：触发或将函数绑定到被选元素的鼠标悬停事件。1jQuery基础——jQuery语法•实例jQuery(event).html中，当文档完成加载时，定义文档中的button按钮的单击事件，当单击按钮时，隐藏文档所有段落。headtitlejQuery(event)/titlescripttype=text/javascriptsrc=other/jquery-1.7.2.min.js/scriptscripttype=text/javascript$(document).ready(function(){$(button).click(function(){$(p).hide(1000);})})/script/headbodyp段落1/pp段落2/pbutton隐藏段落/button/body2特效和动画1.jQuery隐藏和显示•通过hide()和show()两个函数，jQuery支持对元素的隐藏和显示。语法如下：$(selector).hide(speed,callback)$(selector).show(speed,callback)•其中speed参数规定显示或隐藏速度，允许的值有slow、fast、normal或毫秒。如：$(button).click(function(){$(p).hide(1000);});2特效和动画2.jQuery切换•toggle()函数使用show()或hide()函数来切换元素的可见状态，隐藏显示的元素，显示隐藏的元素。语法如下：$(selector).toggle(speed,callback)•其中的参数同hide()函数一样。如：$(button).click(function(){$(p).toggle();});2特效和动画3.jQuery滑动函数•jQuery拥有以下滑动函数：$(selector).slideDown(speed,callback)$(selector).slideUp(speed,callback)$(selector).slideToggle(speed,callback)•其中函数slideDown()向下滑动显示被选元素，函数slideUp()向上滑动隐藏被选元素，函数slideToggle()对被选元素切换向上滑动和向下滑动。•如：$(.flip).click(function(){$(.panel).slideDown();});$(.flip).click(function(){$(.panel).slideUp()})$(.flip).click(function(){$(.panel).slideToggle();});2特效和动画4.jQuery淡入淡出函数•jQuery拥有以下淡入淡出函数：$(selector).fadeIn(speed,callback)$(selector).fadeOut(speed,callback)$(selector).fadeTo(speed,opacity,callback)•其中函数fadeIn()淡入被选元素，函数fadeOut()淡出被选元素，函数fadeTo()把被选元素淡出为给定的不透明度，fadeTo()函数中的opacity参数规定减弱到给定的不透明度。如：$(button).click(function(){$(div).fadeTo(slow,0.25);});$(button).click(function(){$(div).fadeOut(4000);});2特效和动画5.jQuery自定义动画•函数animate()对被选元素执行自定义动画。语法如下：$(selector).animate({params},[duration],[easing],[callback])–参数params定义产生动画的CSS属性。可以同时设置多个此类属性。如：–animate({width:70%,opacity:0.4,marginLeft:0.6in,fontSize:3em});–参数duration定义动画的时间，允许的值有slow、fast、normal或毫秒。–参数easing定义要使用的擦除效果的名称（需要插件支持），一般不用。2特效和动画•HTML元素默认是静态定位，无法移动，如需元素移动，必须把CSSposition设置为relative或absolute。•实例jQuery(animate).html演示了一个块元素变大又还原并移动的动画效果。2特效和动画•参数callback是在函数完成之后被执行的函数名称，也称为Callback函数，Callback函数在当前动画100%完成之后才能执行。•许多jQuery函数涉及动画，这些函数也许会将speed或duration作为可选参数。由于JavaScript语句是逐一执行的，按照次序，动画之后的语句可能提前执行、产生错误或页面冲突，因为动画还没有完成。2特效和动画•如下面代码：$(document).ready(function(){$(#start).click(function(){$(#box).hide(1000);alert(这个块已经隐藏);});});•当块元素还没有隐藏时，警告消息框已经弹出来了。为了避免这个情况，可以以参数的形式添加Callback函数。如：$(document).ready(function(){$(#start).click(function(){$(#box).hide(1000,function(){alert(这个块已经隐藏);});});});3XHTML操作1.改变XHTML内容•html()函数改变所匹配的XHTML元素的内容。语法如下：$(selector).html(content)•如将所有段落的内容改为“清华大学”：$(p).html(清华大学);3XHTML操作2.添加XHTML内容•append()函数向所匹配的XHTML元素内部追加内容。语法如下：$(selector).append(content)•如将所有段落的内容后边添加“清华大学”四个字：$(p).append(清华大学);3XHTML操作3.CSS函数•jQuery拥有三种用于CSS操作的重要函数：•设置单一属性值–函数css(name,value)为所有匹配元素的给定CSS属性设置值。语法如下：$(selector).css(name,value)–如设置所有段落的背景色为红色：$(p).css(background-color,red);3XHTML操作•设置多个属性值–函数css({properties})同时为所有匹配元素的一系列CSS属性设置值。语法如下：$(selector).css({properties})–如