书签分享收藏举报版权申诉 / 17

立即下载加入VIP,免费下载

当前位置：首页 > 经管营销 > JQuery教程.docx

JQuery教程.docx

文档编号：28940925
上传时间：2023-07-20
格式：DOCX
页数：17
大小：20.73KB

JQuery教程.docx

《JQuery教程.docx》由会员分享，可在线阅读，更多相关《JQuery教程.docx（17页珍藏版）》请在冰豆网上搜索。

JQuery教程.docx

JQuery教程

库的替代

Google和Microsoft对jQuery的支持都很好。

如果您不愿意在自己的计算机上存放jQuery库，那么可以从Google或Microsoft加载CDNjQuery核心文件。

使用Google的CDN

使用Microsoft的CDN

jQuery语法

jQuery语法是为HTML元素的选取编制的，可以对元素执行某些操作。

基础语法是：

$（selector）.action（）

∙美元符号定义jQuery

∙选择符（selector）“查询”和“查找”HTML元素

∙jQuery的action（）执行对元素的操作

示例

$（this）.hide（）-隐藏当前元素

$（"p"）.hide（）-隐藏所有段落

$（"p.test"）.hide（）-隐藏所有class="test"的段落

$（"#test"）.hide（）-隐藏所有id="test"的元素

提示：

jQuery使用的语法是XPath与CSS选择器语法的组合。

在本教程接下来的章节，您将学习到更多有关选择器的语法。

文档就绪函数

您也许已经注意到在我们的实例中的所有jQuery函数位于一个documentready函数中：

$（document）.ready（function（）{

---jQueryfunctionsgohere----

}）;

这是为了防止文档在完全加载（就绪）之前运行jQuery代码。

如果在文档没有完全加载之前就运行函数，操作可能失败。

下面是两个具体的例子：

∙试图隐藏一个不存在的元素

∙获得未完全加载的图像的大小

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"结尾的元素。

jQueryCSS选择器

jQueryCSS选择器可用于改变HTML元素的CSS属性。

下面的例子把所有p元素的背景颜色更改为红色：

实例

$（"p"）.css（"background-color","red"）;

亲自试一试

更多的选择器实例

语法

描述

$（this）

当前HTML元素

$（"p"）

所有

元素

$（"p.intro"）

所有class="intro"的

元素

$（".intro"）

所有class="intro"的元素

$（"#intro"）

id="intro"的第一个元素

$（"ulli:

first"）

每个

元素
$（"[href$='.jpg']"）
所有带有以".jpg"结尾的属性值的href属性
$（"div#intro.head"）
id="intro"的
元素中的所有class="head"的元素
jQuery事件函数
jQuery事件处理方法是jQuery中的核心函数。
事件处理程序指的是当HTML中发生某些事件时所调用的方法。
术语由事件“触发”（或“激发”）经常会被使用。
通常会把jQuery代码放到部分的事件处理方法中：
实例
$（document）.ready（function（）{
$（"button"）.click（function（）{
$（"p"）.hide（）;
}）;
}）;
Thisisaheading
Thisisaparagraph.
Thisisanotherparagraph.
亲自试一试
在上面的例子中，当按钮的点击事件被触发时会调用一个函数：
$（"button"）.click（function（）{..somecode...}）
该方法隐藏所有
元素：
$（"p"）.hide（）;
单独文件中的函数
如果您的网站包含许多页面，并且您希望您的jQuery函数易于维护，那么请把您的jQuery函数放到独立的.js文件中。
当我们在教程中演示jQuery时，会将函数直接添加到部分中。
不过，把它们放到一个单独的文件中会更好，就像这样（通过src属性来引用文件）：
实例
jQuery名称冲突
jQuery使用$符号作为jQuery的简介方式。
某些其他JavaScript库中的函数（比如Prototype）同样使用$符号。
jQuery使用名为noConflict（）的方法来解决该问题。
varjq=jQuery.noConflict（），帮助您使用自己的名称（比如jq）来代替$符号。
亲自试一试
结论
由于jQuery是为处理HTML事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：
∙把所有jQuery代码置于事件处理函数中
∙把所有事件处理函数置于文档就绪事件处理器中
∙把jQuery代码置于单独的.js文件中
∙如果存在名称冲突，则重命名jQuery库
jQuery事件
下面是jQuery中事件方法的一些例子：
Event函数
绑定函数至
$（document）.ready（function）
将函数绑定到文档的就绪事件（当文档完成加载时）
$（selector）.click（function）
触发或将函数绑定到被选元素的点击事件
$（selector）.dblclick（function）
触发或将函数绑定到被选元素的双击事件
$（selector）.focus（function）
触发或将函数绑定到被选元素的获得焦点事件
$（selector）.mouseover（function）
触发或将函数绑定到被选元素的鼠标悬停事件
如需完整的参考手册，请访问我们的jQuery事件参考手册。
jQuery隐藏和显示
通过hide（）和show（）两个函数，jQuery支持对HTML元素的隐藏和显示：
实例
$（"#hide"）.click（function（）{
$（"p"）.hide（）;
}）;
$（"#show"）.click（function（）{
$（"p"）.show（）;
}）;
亲自试一试
hide（）和show（）都可以设置两个可选参数：
speed和callback。
语法：
$（selector）.hide（speed,callback）
$（selector）.show（speed,callback）
speed参数规定显示或隐藏的速度。
可以设置这些值：
"slow","fast","normal"或毫秒。
callback参数是在hide或show函数完成之后被执行的函数名称。
您将在本教程下面的章节学习更多有关callback参数的知识。
实例
$（"button"）.click（function（）{
$（"p"）.hide（1000）;
}）;
亲自试一试
jQuery切换
jQuerytoggle（）函数使用show（）或hide（）函数来切换HTML元素的可见状态。
隐藏显示的元素，显示隐藏的元素。
语法：
$（selector）.toggle（speed,callback）
speed参数可以设置这些值：
"slow","fast","normal"或毫秒。
实例
$（"button"）.click（function（）{
$（"p"）.toggle（）;
}）;
亲自试一试
callback参数是在该函数完成之后被执行的函数名称。
您将在本教程下面的章节学习更多有关callback参数的知识。
jQuery滑动函数-slideDown,slideUp,slideToggle
jQuery拥有以下滑动函数：
$（selector）.slideDown（speed,callback）
$（selector）.slideUp（speed,callback）
$（selector）.slideToggle（speed,callback）
speed参数可以设置这些值：
"slow","fast","normal"或毫秒。
callback参数是在该函数完成之后被执行的函数名称。
您将在本教程下面的章节学习更多有关callback参数的知识。
slideDown（）实例
$（".flip"）.click（function（）{
$（".panel"）.slideDown（）;
}）;
亲自试一试
slideUp（）实例
$（".flip"）.click（function（）{
$（".panel"）.slideUp（）
}）
亲自试一试
slideToggle（）实例
$（".flip"）.click（function（）{
$（".panel"）.slideToggle（）;
}）;
亲自试一试
jQueryFade函数-fadeIn（）,fadeOut（）,fadeTo（）
jQuery拥有以下fade函数：
$（selector）.fadeIn（speed,callback）
$（selector）.fadeOut（speed,callback）
$（selector）.fadeTo（speed,opacity,callback）
speed参数可以设置这些值：
"slow","fast","normal"或毫秒。
fadeTo（）函数中的opacity参数规定减弱到给定的不透明度。
callback参数是在该函数完成之后被执行的函数名称。
您将在本教程下面的章节学习更多有关callback参数的知识。
fadeTo（）实例
$（"button"）.click（function（）{
$（"div"）.fadeTo（"slow",0.25）;
}）;
亲自试一试
fadeOut（）实例
$（"button"）.click（function（）{
$（"div"）.fadeOut（4000）;
}）;
亲自试一试
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
$（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"）;
}）;
}）;
亲自试一试
实例2
$（document）.ready（function（）{
$（"#start"）.click（function（）{
$（"#box"）.animate（{left:
"100px"},"slow"）;
$（"#box"）.animate（{fontSize:
"3em"},"slow"）;
}）;
}）;
亲自试一试
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（）
对被选元素执行自定义动画
Callback函数在当前动画100%完成之后执行。
jQuery动画的问题
许多jQuery函数涉及动画。
这些函数也许会将speed或duration作为可选参数。
例子：
$（"p"）.hide（"slow"）
speed或duration参数可以设置许多不同的值，比如"slow","fast","normal"或毫秒。
实例
$（"button"）.click（function（）{
$（"p"）.hide（1000）;
}）;
亲自试一试
由于JavaScript语句（指令）是逐一执行的-按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。
为了避免这个情况，您可以以参数的形式添加Callback函数。
jQueryCallback函数
当动画100%完成后，即调用Callback函数。
典型的语法：
$（selector）.hide（speed,callback）
callback参数是一个在hide操作完成后被执行的函数。
错误（没有callback）
$（"p"）.hide（1000）;
alert（"Theparagraphisnowhidden"）;
亲自试一试
正确（有callback）
$（"p"）.hide（1000,function（）{
alert（"Theparagraphisnowhidden"）;
}）;
亲自试一试
jQuery包含很多供改变和操作HTML的强大函数。
改变HTML内容
语法
$（selector）.html（content）
html（）函数改变所匹配的HTML元素的内容（innerHTML）。
实例
$（"p"）.html（"W3School"）;
亲自试一试
添加HTML内容
语法
$（selector）.append（content）
append（）函数向所匹配的HTML元素内部追加内容。
语法
$（selector）.prepend（content）
prepend（）函数向所匹配的HTML元素内部预置（Prepend）内容。
实例
$（"p"）.append（"W3School"）;
亲自试一试
语法
$（selector）.after（content）
after（）函数在所有匹配的元素之后插入HTML内容。
语法
$（selector）.before（content）
before（）函数在所有匹配的元素之前插入HTML内容。
实例
$（"p"）.after（"W3School."）;
亲自试一试
jQueryHTML操作-来自本页
函数
描述
$（selector）.html（content）
改变被选元素的（内部）HTML
$（selector）.append（content）
向被选元素的（内部）HTML追加内容
$（selector）.prepend（content）
向被选元素的（内部）HTML“预置”（Prepend）内容
$（selector）.after（content）
在被选元素之后添加HTML
$（selector）.before（content）
在被选元素之前添加HTML
如需完整的参考手册，请访问我们的jQueryHTML操作参考手册。
jQueryCSS操作
jQuery拥有三种用于CSS操作的重要函数：
∙$（selector）.css（name,value）
∙$（selector）.css（{properties}）
∙$（selector）.css（name）
CSS操作实例
函数css（name,value）为所有匹配元素的给定CSS属性设置值：
实例
$（selector）.css（name,value）
$（"p"）.css（"background-color","red"）;
亲自试一试
函数css（{properties}）同时为所有匹配元素的一系列CSS属性设置值：
实例
$（selector）.css（{properties}）
$（"p"）.css（{"background-color":
"red","font-size":
"200%"}）;
亲自试一试
函数css（name）返回指定的CSS属性的值：
实例
$（selector）.css（name）
$（this）.css（"background-color"）;
亲自试一试
jQuerySize操作
jQuery拥有两种用于尺寸操作的重要函数：
∙$（selector）.height（value）
∙$（selector）.width（value）
Size操作实例
函数height（value）设置所有匹配元素的高度：
实例
$（selector）.height（value）
$（"#id100"）.height（"200px"）;
亲自试一试
函数width（value）设置所有匹配元素的宽度：
实例
$（selector）.width（value）
$（"#id200"）.width（"300px"）;
亲自试一试
jQueryCSS函数-来自本页
CSS属性
描述
$（selector）.css（name,value）
为匹配元素设置样式属性的值
$（selector）.css（{properties}）
为匹配元素设置多个样式属性
$（selector）.css（name）
获得第一个匹配元素的样式属性值
$（selector）.height（value）
设置匹配元素的高度
$（selector）.width（value）
设置匹配元素的宽度
如需完整的参考手册，请访问我们的jQueryCSS函数参考手册。
jQuery拥有供AJAX开发的丰富函数（方法）库。
jQueryAJAX实例
AJAXisnotaprogramminglanguage.
Itisjustatechniqueforcreatingbetterandmoreinteractivewebapplications.
点击按钮，改变内容亲自试一试
上面的例子摘自我们的AJAX教程，但使用jQuery进行了修改。
什么是AJAX？
AJAX=AsynchronousJavaScriptandXML.
AJAX是一种创建快速动态网页的技术。
AJAX通过在后台与服务器交换少量数据的方式，允许网页进行异步更新。
这意味着有可能在不重载整个页面的情况下，对网页的一部分进行更新。
您可以在我们的AJAX教程中学习更多有关AJAX的知识。
AJAX和jQuery
jQuery提供了用于AJAX开发的丰富函数（方法）库。
通过jQueryAJAX，使用HTTPGet和HTTPPost，您都可以从远程服务器请求TXT、HTML、XML或JSON。
而且您可以直接把远程数据载入网页的被选HTML元素中！
写的更少，做的更多
jQuery的load函数是一种简单的（但很强大的）AJAX函数。
它的语法如下：
$（selector）.load（url,data,callback）
请使用selector来定义要改变的HTML元素，使用url参数来指定数据的web地址。
亲自试一试
只有当您希望向服务器发送数据时，才需要使用data参数。
只有当您需要在执行完毕之后触发一个函数时，您才需要使用callback参数。
LowLevelAJAX
$.ajax（options）是低层级AJAX函数的语法。

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载 加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：
如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：
部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关键词：
JQuery 教程

冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。
该用户的其他资源更多>>
猜你喜欢
关于本文

本文标题：JQuery教程.docx
链接地址：https://www.bdocx.com/doc/28940925.html

JQuery教程.docx

Thisisaheading

热门标签