Jquery 使用教程文档格式.docx
《Jquery 使用教程文档格式.docx》由会员分享,可在线阅读,更多相关《Jquery 使用教程文档格式.docx(17页珍藏版)》请在冰豆网上搜索。
$("
button"
).hide();
h2>
Thisisaheading<
/h2>
Thisisaparagraph.<
Thisisanotherparagraph.<
buttontype="
Clickme<
/button>
jQuery语法实例
$(this).hide()
演示jQueryhide()函数,隐藏当前的HTML元素。
#test"
).hide()
演示jQueryhide()函数,隐藏id="
test"
的元素。
演示jQueryhide()函数,隐藏所有<
.test"
演示jQueryhide()函数,隐藏所有class="
jQuery语法
jQuery语法是为HTML元素的选取编制,可以对元素执行某些操作。
基础语法是:
$(selector).action()
∙美元符号定义jQuery
∙选择符(selector)“查询”和“查找”HTML元素
∙jQueryaction()执行对元素的操作
$(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中的核心函数。
事件处理函数是当HTML中发生事件时自动被调用的函数。
由“事件”(event)“触发”(triggered)是经常被用到的术语。
在您<
中
由于jQuery是为事件处理特别设计的,通常是把jQuery代码置于网页<
部分的“事件处理”函数中:
在上面的例子中,定义了一个处理HTML按钮的点击事件的click函数:
).click(function(){..somecode...})
click函数内部的代码隐藏所有<
元素:
所有事件函数都在文档自身的“事件处理器”内部进行定义:
$(document).ready(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事件
下面是jQuery中事件函数的一些例子:
Event函数
绑定函数至
$(document).ready(function)
文档的就绪事件
(当HTML文档就绪可用)
$(selector).click(function)
被选元素的点击事件
$(selector).dblclick(function)
被选元素的双击事件
$(selector).focus(function)
被选元素的获得焦点事件
$(selector).mouseover(function)
被选元素的鼠标悬停事件
(selector)jQuery元素选择器
隐藏、显示、切换、滑动以及动画。
WOW!
Becausetimeisvaluable,wedeliverquickandeasylearning.
AtW3School,youcanstudyeverythingyouneedtolearn,inanaccessibleandhandyformat.
ClickHeretoShow/HidePanel
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)
callback参数是在hide或show函数完成之后被执行的函数名称。
您将在本教程下面的章节学习更多有关callback参数的知识。
speed参数可以设置这些值:
"
slow"
"
fast"
normal"
或milliseconds:
).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。
它定义了产生动画的属性。
可以同时设置多个此类属性:
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()
对被选元素执行自定义动画
动画创造了对callback函数的需求。
Becauseanimationstaketime.Wehavetowaitbeforewecanexecutethenextinstruction.
Thecallbackfunctioniscalledaftertheanimationis100%finished.
jQuery动画的问题
许多jQuery函数涉及动画。
这些函数也许会将speed或duration作为可选参数。
例子:
).hide("
speed或duration参数可以设置许多不同的值,比如"
或毫秒。
由于JavaScript语句(指令)是逐一执行的-按照次序,动画之后的语句可能会产生错误或页面冲突,因为动画还没有完成。
为了避免这个情况,您可以以参数的形式添加Callback函数。
jQueryCallback函数
当动画100%完成后,即调用Callback函数。
典型的语法:
callback参数是一个在hide操作完成后被执行的函数。
错误(没有callback)
alert("
Theparagraphisnowhidden"
正确(有callback)
).hide(1000,function(){
结论:
如果您希望在一个涉及动画的函数之后来执行语句,请使用callback函数。
jQuery包含很多供改变和操作HTML的强大函数。
改变HTML内容
$(selector).html(content)
html()函数改变所匹配的HTML元素的内容(innerHTML)。
).html("
W3School"
添加HTML内容
$(selector).append(content)
append()函数向所匹配的HTML元素内部追加内容。
$(selector).prepend(content)
prepend()函数向所匹配的HTML元素内部预置(Prepend)内容。
).append("
W3School"
$(selector).after(content)
after()函数在所有匹配的元素之后插入HTML内容。
$(selector).before(content)
before()函数在所有匹配的元素之前插入HTML内容。
).after("
W3School."
jQueryHTML操作-来自本页
改变被选元素的(内部)HTML
向被选元素的(内部)HTML追加内容
向被选元素的(内部)HTML“预置”(Prepend)内容
在被选元素之后添加HTML
在被选元素之前添加HTML
jQueryCSS操作
jQuery拥有三种供CSS操作的重要函数:
∙$(selector).css(name,value)
∙$(selector).css({properties})
∙$(selector).css(name)
CSS操作实例
函