jQuery教程Word格式.docx
《jQuery教程Word格式.docx》由会员分享，可在线阅读，更多相关《jQuery教程Word格式.docx（38页珍藏版）》请在冰豆网上搜索。
∙HTML
∙CSS
∙JavaScript
如果您需要首先学习这些科目，请在我们的
首页
查找这些教程。
jQuery实例
通过实例来学习！
在W3School，您将找到许多可以在线编辑并测试的jQuery实例。
jQuery参考手册
在W3School，您将找到包含所有jQuery对象和函数的完整参考手册。
jQuery简介
∙
∙
jQuery库可以通过一行简单的标记被添加到网页中。
jQuery库-特性
jQuery是一个JavaScript函数库。
jQuery库包含以下特性：
∙HTML元素选取
∙HTML元素操作
∙CSS操作
∙HTML事件函数
∙JavaScript特效和动画
∙HTMLDOM遍历和修改
∙AJAX
∙Utilities
向您的页面添加jQuery库
jQuery库位于一个JavaScript文件中，其中包含了所有的jQuery函数。
可以通过下面的标记把jQuery添加到网页中：
请注意，<
script>
标签应该位于页面的<
部分。
基础jQuery实例
下面的例子演示了jQuery的hide（）函数，隐藏了HTML文档中所有的<
元素。
实例
$（"
button"
）.hide（）;
h2>
Thisisaheading<
/h2>
Thisisaparagraph.<
Thisisanotherparagraph.<
buttontype="
Clickme<
/button>
下载jQuery
共有两个版本的jQuery可供下载：
一份是精简过的，另一份是未压缩的（供调试或阅读）。
这两个版本都可从
jQ
下载。
库的替代
Google和Microsoft对jQuery的支持都很好。
如果您不愿意在自己的计算机上存放jQuery库，那么可以从Google或Microsoft加载CDNjQuery核心文件。
使用Google的CDN
/jquery/1.4.0/jquery.min.js"
使用Microsoft的CDN
/jquery-1.4.min.js"
jQuery语法
通过jQuery，您可以选取（查询，query）HTML元素，并对它们执行“操作”（actions）。
jQuery语法实例
$（this）.hide（）
演示jQueryhide（）函数，隐藏当前的HTML元素。
#test"
）.hide（）
演示jQueryhide（）函数，隐藏id="
test"
的元素。
演示jQueryhide（）函数，隐藏所有<
.test"
演示jQueryhide（）函数，隐藏所有class="
jQuery语法是为HTML元素的选取编制的，可以对元素执行某些操作。
基础语法是：
$（selector）.action（）
∙美元符号定义jQuery
∙选择符（selector）“查询”和“查找”HTML元素
∙jQuery的action（）执行对元素的操作
示例
$（this）.hide（）-隐藏当前元素
）.hide（）-隐藏所有段落
p.test"
）.hide（）-隐藏所有class="
的段落
）.hide（）-隐藏所有id="
的元素
提示：
jQuery使用的语法是XPath与CSS选择器语法的组合。
在本教程接下来的章节，您将学习到更多有关选择器的语法。
文档就绪函数
您也许已经注意到在我们的实例中的所有jQuery函数位于一个documentready函数中：
---jQueryfunctionsgohere----
这是为了防止文档在完全加载（就绪）之前运行jQuery代码。
如果在文档没有完全加载之前就运行函数，操作可能失败。
下面是两个具体的例子：
∙试图隐藏一个不存在的元素
∙获得未完全加载的图像的大小
jQuery选择器
选择器允许您对元素组或单个元素进行操作。
在前面的章节中，我们展示了一些有关如何选取HTML元素的实例。
关键点是学习jQuery选择器是如何准确地选取您希望应用效果的元素。
jQuery元素选择器和属性选择器允许您通过标签名、属性名或内容对HTML元素进行选择。
选择器允许您对HTML元素组或单个元素进行操作。
在HTMLDOM术语中：
选择器允许您对DOM元素组或单个DOM节点进行操作。
jQuery元素选择器
jQuery使用CSS选择器来选取HTML元素。
）选取<
p.intro"
）选取所有class="
intro"
的<
p#demo"
）选取id="
demo"
的第一个<
jQuery属性选择器
jQuery使用XPath表达式来选择带有给定属性的元素。
[href]"
）选取所有带有href属性的元素。
[href='
#'
]"
）选取所有带有href值等于"
#"
[href!
='
）选取所有带有href值不等于"
[href$='
.jpg'
）选取所有href值以"
.jpg"
结尾的元素。
jQueryCSS选择器
jQueryCSS选择器可用于改变HTML元素的CSS属性。
下面的例子把所有p元素的背景颜色更改为红色：
）.css（"
background-color"
"
red"
）;
更多的选择器实例
语法
描述
$（this）
当前HTML元素
）
所有<
元素
所有class="
.intro"
#intro"
id="
的第一个元素
ulli:
first"
每个<
ul>
li>
所有带有以"
结尾的属性值的href属性
div#intro.head"
div>
元素中的所有class="
head"
如需完整的参考手册，请访问我们的
jQuery选择器参考手册。
jQuery事件
jQuery是为事件处理特别设计的。
jQuery事件函数
jQuery事件处理方法是jQuery中的核心函数。
事件处理程序指的是当HTML中发生某些事件时所调用的方法。
术语由事件“触发”（或“激发”）经常会被使用。
通常会把jQuery代码放到<
部分的事件处理方法中：
button>
在上面的例子中，当按钮的点击事件被触发时会调用一个函数：
）.click（function（）{..somecode...}）
该方法隐藏所有<
元素：
单独文件中的函数
如果您的网站包含许多页面，并且您希望您的jQuery函数易于维护，那么请把您的jQuery函数放到独立的.js文件中。
当我们在教程中演示jQuery时，会将函数直接添加到<
部分中。
不过，把它们放到一个单独的文件中会更好，就像这样（通过src属性来引用文件）：
my_jquery_functions.js"
jQuery名称冲突
jQuery使用$符号作为jQuery的简介方式。
某些其他JavaScript库中的函数（比如Prototype）同样使用$符号。
jQuery使用名为noConflict（）的方法来解决该问题。
varjq=jQuery.noConflict（），帮助您使用自己的名称（比如jq）来代替$符号。
结论
由于jQuery是为处理HTML事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：
∙把所有jQuery代码置于事件处理函数中
∙把所有事件处理函数置于文档就绪事件处理器中
∙把jQuery代码置于单独的.js文件中
∙如果存在名称冲突，则重命名jQuery库
下面是jQuery中事件方法的一些例子：
Event函数
绑定函数至
$（document）.ready（function）
将函数绑定到文档的就绪事件（当文档完成加载时）
$（selector）.click（function）
触发或将函数绑定到被选元素的点击事件
$（selector）.dblclick（function）
触发或将函数绑定到被选元素的双击事件
$（selector）.focus（function）
触发或将函数绑定到被选元素的获得焦点事件
$（selector）.mouseover（function）
触发或将函数绑定到被选元素的鼠标悬停事件
jQuery事件参考手册。
jQuery效果
jQuery可以创建隐藏、显示、切换、滑动以及自定义动画等效果。
请试一下这个jQuery效果：
请点击这里
jQueryhide（）
演示简单的jQueryhide（）函数。
另一个hide（）演示。
如何隐藏部分文本。
jQueryslideToggle（）
演示简单的slidepanel效果。
jQueryfadeTo（）
演示简单的jQueryfadeTo（）函数。
jQueryanimate（）
演示简单的jQueryanimate（）函数。
jQuery隐藏和显示
通过hide（）和show（）两个函数，jQuery支持对HTML元素的隐藏和显示：
#hide"
#show"
）.show（）;
hide（）和show（）都可以设置两个可选参数：
speed和callback。
语法：
$（selector）.hide（speed,callback）
$（selector）.show（speed,callback）
speed
参数规定显示或隐藏的速度。
可以设置这些值：
"
slow"
"
fast"
normal"
或毫秒。
callback
参数是在hide或show函数完成之后被执行的函数名称。
您将在本教程下面的章节学习更多有关callback
参数的知识。
）.hide（1000）;
jQuery切换
jQuerytoggle（）函数使用show（）或hide（）函数来切换HTML元素的可见状态。
隐藏显示的元素，显示隐藏的元素。
$（selector）.toggle（speed,callback）
参数可以设置这些值：
或毫秒。
）.toggle（）;
参数是在该函数完成之后被执行的函数名称。
您将在本教程下面的章节学习更多有关
jQuery滑动函数-slideDown,slideUp,slideToggle
jQuery拥有以下滑动函数：
$（selector）.slideDown（speed,callback）
$（selector）.slideUp（speed,callback）
$（selector）.slideToggle（speed,callback）
slideDown（）实例
.flip"
.panel"
）.slideDown（）;
slideUp（）实例
）.slideUp（）
}）
slideToggle（）实例
）.slideToggle（）;
jQueryFade函数-fadeIn（）,fadeOut（）,fadeTo（）
jQuery拥有以下fade函数：
$（selector）.fadeIn（speed,callback）
$（selector）.fadeOut（speed,callback）
$（selector）.fadeTo（speed,opacity,callback）
fadeTo（）函数中的
opacity
参数规定减弱到给定的不透明度。
fadeTo（）实例
div"
）.fadeTo（"
0.25）;
fadeOut（）实例
）.fadeOut（4000）;
jQuery自定义动画
jQuery函数创建自定义动画的语法：
$（selector）.animate（{params},[duration],[easing],[callback]）
关键的参数是
params。
它定义产生动画的CSS属性。
可以同时设置多个此类属性：
animate（{width:
70%"
opacity:
0.4,marginLeft:
0.6in"
fontSize:
3em"
第二个参数是
duration。
它定义用来应用到动画的时间。
它设置的值是：
实例1
#start"
#box"
）.animate（{height:
300},"
）.animate（{width:
100},"
实例2
）.animate（{left:
100px"
},"
）.animate（{fontSize:
HTML元素默认是静态定位，且无法移动。
如需使元素可以移动，请把CSS的position设置为relative或absolute。
jQuery效果-来自本页
函数
$（selector）.hide（）
隐藏被选元素
$（selector）.show（）
显示被选元素
$（selector）.toggle（）
切换（在隐藏与显示之间）被选元素
$（selector）.slideDown（）
向下滑动（显示）被选元素
$（selector）.slideUp（）
向上滑动（隐藏）被选元素
$（selector）.slideToggle（）
对被选元素切换向上滑动和向下滑动
$（selector）.fadeIn（）
淡入被选元素
$（selector）.fadeOut（）
淡出被选元素
$（selector）.fadeTo（）
把被选元素淡出为给定的不透明度
$（selector）.animate（）
对被选元素执行自定义动画
jQueryEffect参考手册。
jQueryCallback函数
Callback函数在当前动画100%完成之后执行。
jQuery动画的问题
许多jQuery函数涉及动画。
这些函数也许会将
或
duration
作为可选参数。
例子：
）.hide（"
参数可以设置许多不同的值，比如"
由于JavaScript语句（指令）是逐一执行的-按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。
为了避免这个情况，您可以以参数的形式添加Callback函数。
当动画100%完成后，即调用Callback函数。
典型的语法：
参数是一个在hide操作完成后被执行的函数。
错误（没有callback）
alert（"
Theparagraphisnowhidden"
正确（有callback）
）.hide（1000,function（）{
Theparagraphisn
升级会员 