版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領
文檔簡介
<html>
<head>
z，，z
<scripttype二〃text/javascript〃src=jquery.js></script>
z，
<scripttype二〃text/javascript>
$(document).ready(function(){
$(〃p〃).click(function(){
$(this).hide();
})；
})；
</script>
</head>
<body>
<p>Ifyouc1ickonme,Iwilldisappear.</P>
</body>
</htm1>
<html>
<head>
n，z
<scripttype二〃text/javascriptsrc二〃jqujs><
/script>
<scripttype=ntext/javascriptz/>
$(document).ready(function(){
$(〃button").click(function(){
$(〃p〃).hide();
})；
});
</script>
</head>
<body>
<h2>Thisisaheading</h2>
<p>Thisisaparagraph.</p>
<buttontype二〃button〃>Clickme</button>
</body>
</html>
向頁面添加jQuery庫
JQuery庫位于單個的JavaScript文獻中，其中包含所有
jQuery函數(shù)。
可以通過下面的標記把jQuery添加到網(wǎng)頁中：
<head>
n
<scripttype=text/javascript"src二〃jquery.js〃〉〈/script>
</head>
庫的替代
Goog1e和Microso仕對jQuery的支持都很好。
假如您不樂旨在自己的計算機上存放jQuery庫，那么可以從Goog1e
orMicrosoft加載CDNjQuery核心文獻。
使用Goog1e的CDN
<head>
<scripttype二〃text/javascript〃src二〃
/jquery/1.4.O/jquery.min.jsn></script>
</head>
使用Microsoft的CDN
<head>
<scripttype=〃text/javascript"src=/z
/jquery-1.4.min.js〃></script>
</head>
jQuery語法:通過jQuery,您可以選取(查詢,query)HTM
L元素，并對它們執(zhí)行“操作”(actions)o
jQuery語法實例：
$(this).hideQ
演示jQueryhide()函數(shù)，隱藏當前的HTML元素。
st").hide()
演示jQueryhide()函數(shù)，隱藏id="test"的元素。
$("p").hide()
演示jQueryhide()函數(shù)，隱藏所有Vp＞元素。
$(".test").hide()
演示jQueryhide()函數(shù)，隱藏所有class="test"的元素。
jQuery語法
jQuery語法是為HTML元素的選取編制,可以對元素執(zhí)行某些操作。
基礎語法是:$(se1ector).action()
?美元符號定義jQuery
?選擇符(selector)“查詢”和“查找"HTML元素
?jQueryaction()執(zhí)行對元素的操作
實例
$(this).hide()-隱藏當前元素
$("p").hide()-隱藏所有段落
$("p.test").hide()-隱藏所有class="test"的段落
$("#test").hide()-隱藏所有id="test"的元素
提醒:jQuery使用的語法是XPath與CSS選擇器語法的組合。
文檔就緒函數(shù):為了防止文檔在完全加載(就緒)之前運營
jQuery代碼。
$(document).ready(function(){
---jQueryfunctionsgohere------
})；
在文檔完全加載之前運營函數(shù)操作失敗的情況：
?試圖隱藏一個不存在的元素。
?獲得未完全加載的圖像的大小。
jQuery選擇器
1、jQuery元素選擇器
jQuery使用CSS選擇器來選取HTML元素。
$("p")選取<p>元素。
$("ro")選取所有c1ass="intro"的<p>元素。
$("p#demo")選取id="demo"的第一個<p>元素。
2、jQuery屬性選擇器
jQuery使用XPath表達式來選擇帶有給定屬性的元素。
$("[href]")選取所有帶有href屬性的元素。
$("[href='#，l")選取所有帶有href值等于"祥"的元素。
$("[href!=，#':")選取所有帶有href值不等于"利的元
素。
$("[href$='.jpg/]")選取所有href值以".jpg"結(jié)尾的元素。
3、jQueryCSS選擇器
jQueryCSS選擇器可用于改變HTML元素的CSS屬性。
實例：
<htm1>
<head>
<scripttype=ntext/javascript"src=〃??/jquery/jquery.j
s〃tppabs=z，//></script>
<scripttype二〃text/javascript”>
$(document).ready(functionO{
$(〃button〃),click(function(){
$(〃p").css("background-color〃,〃yel1ow〃);
})；
})；
</script>
</head>
<body>
<h2>Thisisaheading</h2>
<p>Thisisaparagraph.</p>
<p>Thisisanotherparagraph.</p>
<buttontype=〃button〃>Clickme</button>
</body>
</html>
更多的實例
語法描述
$(this)當前HTML元素
$("p")所有＜p＞元素
$("ro")所有class="intro"的Vp>元素
$(".intro")所有class="intro"的元素
$("#intro")id="intro"的第一個元素
$("u11i:first")每個＜u1＞的第一個＜1i＞元素
$("[href$='.j
所有帶有以".jpg"結(jié)尾的href屬性的屬性
Pg']")
$("div#intro.heaid="intro"的<div>元素中的所有class="hea
d")d"的元素
jQuery選擇器
正班qp實例選取
*$("*")所有元素
#id$(n#lastname”)id=lastname的第一個元素
.class$(".intro")所有class="intro"的元素
eIement$("p")所有＜P＞元素
所有class=intro且class=d
.c1ass.class$(”.intro.demo")
emo的元素
:first$("p:first")第一個＜p＞元素
:last$("p:1ast")最后一個＜p＞元素
:even$("tr:evenn)所有偶數(shù)＜tr＞元素
:odd$("tr:odd")所有奇數(shù)＜tr＞元素
列表中的第四個元素（index從0
:eq(index)$("u1li:eq(3)")
開始）
:gt(no)$("u11i：gt(3)")列出index大于3的元素
:1t(no)$("ulli:lt(3)")列出index小于3的元素
$("input:not(：empt
:not(selector)所有不為空的input元素
y)")
:header$(":header")所有標題元素＜hl＞＜h2＞...
:animated所有動畫元素
:contains(tex$(”：containsfW3Sch
包含文本的所有元素
t)oof)”)
:empty$(":empty")無子（元素）節(jié)點的所有元素
:hidden$("p：hidden")所有隱藏的＜p＞元素
:visible$("table:visible")所有可見的表格
si,s2,s3$("th,td,.intro")所有帶有匹配選擇的元素
[attribute]$("[href]")所有帶有href屬性的元素
[attribute=va所有href屬性的值等于
$("[href='#']")
1ue]的元素
[attribute!=va所有href屬性的值不等于"
$("[href!='#']")
1ue]#"的元素
|~attribute$=v所有href屬性的值包含".jp
$("[href$='.jpg']")
alue]g"的元素
:input$(":input")所有＜input＞元素
:text$(":text")所有type="text"的<input
＞元素
所有type="password"
:password$(":password")
的<input>元素
所有type="radio"的<in
:radio$("：radio")
put>元素
所有type=ncheckbox”的Vin
:checkbox$checkbox”)
Put>元素
所有type="submit"的Vi
:submit$("rsubmit")
nput>元素
所有type="reset"的Vinput〉
:reset$(n:resetn)
元素
所有type="button"的<in
:button$(":button")
put>元素
所有type="image"的<i
:image$(":image")
nput>元素
所有type="fi1e"的<inp
:tile$(":file")
ut>元素
:enabled$("：enabled")所有激活的input元素
:disab1ed$(":disabled")所有禁用的input元素
:selected$(":selected")所有被選取的input元素
_:；cheeked$(":checked")所有被選中的input元素
jQuery事件
jquery事件解決函數(shù)是當HTML中發(fā)生事件時自動被調(diào)用的函數(shù)。由
“事件（event）“觸發(fā)弋riggered）是經(jīng)常被用到的術(shù)語。
單獨文獻中的函數(shù)（把jQuery函數(shù)放到獨立的邪文獻中，易
于jQuery函數(shù)維護）
實例
<head>
，z
<scripttype二〃text/javascript〃src=jquery.js〃></script
>
<scripttype="text/javascript“src=/，my_jquery_functions.jsn>
</script>
</head>
jQuery名稱沖突（了解）
jQuery使用$符號作為jQuery的簡介方式。
某些其他JavaScript庫中的函數(shù)（比如Prototype）同樣使用
$符號。
jQuery使用名為noConflict（）的方法來解決該問題。
varjry./70coa/Zic幫助您使用自己的名稱（比如jq）來
代替$符號。
實例：
<html>
<head>
<scripttype="text/javascriptHsrc=n../jquery/jquery.js"t
ppabs=Hnx/script>
<scripttype=*'text/javaseriptn>
varjq=jQuery.noConflict()；
jq(document).ready(funetion(){
jq("button"),click(function(){
jq(nP”)$ide();
})；
});
</script>
</head>
<body>
<h2>Thisisaheading</h2>
<p>Thisisaparagraph.</p>
<p>Thisisanotherparagraph.</p>
<buttontype=nbuttonu>Clickme</button>
</body>
</html>
結(jié)論
由于jQuery是為解決HTML事件而特別設計的，那么當您遵循以
下原則時，您的代碼會更恰當且更易維護：
?把所有jQuery代碼置于事件解決函數(shù)中
?把所有事件解決函數(shù)置于文檔就緒事件解決器中
?把jQuery代碼置于單獨的.js文獻中
?假如存在名稱沖突，則重命名jQuery庫
jQuery事件
下面是jQuery中事件函數(shù)的一些例子:
Event函數(shù)綁定函數(shù)至
文檔的就緒事件
$(document).ready(function)
（當HTML文檔就緒可用）
$(selector).click(function)被選元素的點擊事件
$(selector).dblclick(function)被選元素的雙擊事件
$(se1ector).focus(function)被選元素的獲得焦點事件
$(se1ector).mouseover(function)被選元素的鼠標懸停事件
jQuery事件方法
事件方法會觸發(fā)匹配元素的事件，或?qū)⒑瘮?shù)綁定到所有匹配元素的某個
事件。
方法」述
bindC向匹配元素附加一個或更多事件處理器
blur。觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的blur事件
chanae。觸發(fā)、或?qū)搭~綁定到指定元素的change事件
dick。觸發(fā)'或?qū)⒑瘮?shù)綁定到指定元素的click事件
dblclick。觸發(fā)、或?qū)磾?shù)綁定到指定元素的doubleclick事件
deleaateO向匹酉i!元素的當前或未來的子元素附加一個或多個事件處理器
dieO移除所有通過live()函數(shù)添加的事件處理程序。
er「or()觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的error事件
event.isDefaultP「evented()返回event對象上是否調(diào)用了event.preventDefaultQ0
event.paaeX相對于文檔左邊緣的鼠標位置。
event.DaaeY相對于文檔上邊絳的鼠標位置。
event.D「eventDefault/)阻止事件的默認動作。
event.result包含由被指定事件觸發(fā)的事件處理器返回的最后一個值。
event.tanjet觸發(fā)該事件的DOM元素。
event.timeStamD該屬性返回從1970年1月1日到事件發(fā)生時的毫秒數(shù)。
event.tvDe描述事件的類型。
event.which指示按了哪個鍵或按鈕。
focus。觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的focus事件
kevdown。觸發(fā)、或?qū)磾?shù)綁定到指定元素的keydown事件
kevpress。觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的keypress事件
kKVUD。觸發(fā)、或?qū)磾?shù)綁定到指定元素的keyup事件
live。為當前或未來的匹酉d元素添加一個或多個事件處理器
load。觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的load事件
moussdown。觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的mousedown事件
moussente")觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的mouseenter事件
mooseleaveC觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的mouseleave事件
moussmooei。觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的mousemove事件
moussout。觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的mouseout事件
mouseover。觸發(fā)、或?qū)磾?shù)綁定到指定元素的mouseover事件
mouseuD。觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的mouseup事件
one。向匹酉i!元素添加事件處理器。每個元素只能觸發(fā)一次該處理器。
ready。文檔就緒事件（當HTML文檔就緒可用時）
resize。觸發(fā)、或?qū)磾?shù)綁定到指定元素的resize事件
scroll。觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的scroll事件
sslectf)觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的select事件
submit。觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的submit事件
tooale。綁定兩個或多個事件處理器函額，當發(fā)生輪流的click事件時執(zhí)行。
triaaerO所有匹酉d元素的指定事件
triagerHandleM)第一個被匹配元素的指定事件
unbind。從匹酉B元素移除一個被添加的事件處理器
undeleaateC從匹配元素移除一個被添加的事件處理器，現(xiàn)在或?qū)?/p>
unloocK)觸發(fā)、或?qū)磾?shù)綁定到指定元素的unload事件
jQuery事件解決方法
事件解決方法把事件解決器綁定至匹配元素。
方法觸發(fā)
向匹配元素添加一個或更多事件解
$(selector).bind(event)
決器
向匹配元素添加一個事件解決器，現(xiàn)
$(selector).delegate(selector,event)
在或?qū)?/p>
移除所有通過live。函數(shù)添加的
$(selector).die()
事件解決器
向匹配元素添加一個事件解決器，現(xiàn)
$(selector).1ive(event)
在或?qū)?/p>
向匹配元素添加一個事件解決器。
$(selector).one(event)
該解決器只能觸發(fā)一次。
從匹配元素移除一個被添加的事件
$(se1ector).unbind(event)
解決器
從匹配元素移除一個被添加的事件
$(se1ector).unde1egate(event)
解決器，現(xiàn)在或?qū)?/p>
$(se1ector).trigger(event)所有匹配元素的指定事件
$(selector).triggerHandler(event)第一個被匹配元素的指定事件
jQuery效果(隱藏、顯示、切換，滑動，
淡入淡出，以及動畫)
jQuery效果一隱藏和顯示：通過hide()和show()兩個函
數(shù)，jQuery支持對HTML元素的隱藏和顯示
hide()和show()都可以設立兩個可選參數(shù)：speed和callba
cko
語法：
$(se1ector).hide(speed,callback)
$(seiector).show(speed,ca11back)
callback參數(shù)是在hide或show函數(shù)完畢之后被執(zhí)行的函數(shù)名
稱。
speed參數(shù)可以設立這些值："slow","fast","normal"或milliseco
ndSo
實例(隱藏)：
<htm1>
<head>
<scripttype="text/javascript"src="../jquery/j
query.js"tppabs=""></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
})；
$("#show").click(function(){
$("p").show();
})；
})；
</script>
</head>
<body>
<pid="pl">Ifyouclickonthe"Hide"button,Iwi1
1disappear.</p>
<buttonid="hide"type="button">Hide</button>
<buttonid="show"type="button">Show</button>
</body>
</html>
<html>
<head>
<scrip11ype="text/javascript"src="../jquery/jquery,js"
ppabs=""></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
})；
})；
</script>
</head>
<body>
<buttontype="button">Hide</button>
<p>Thisisaparagraphwithlittlecontent.</p>
<p>Thisisanothersmallparagraph.</p>
</body>
</html>
jQuery切換
jQuerytoggle。函數(shù)使用show()或hide。函數(shù)來切換HTML元素
的可見狀態(tài)。
隱藏顯示的元素，顯示隱藏的元素。
語法：
$(selector).toggle(speed.callback)
speed參數(shù)可以設立這些值:"slow","fast","normal"或毫秒。
實例
$("bu11on").click(fiinction(){$("p").toggle();});
<!DOCTYPEhtm1>
<html>
<head>
<scriptsrc二〃/jquery/jquery-1.11.1.min.js〃></script>
<scripttype="text/javascript〃>
$(document).ready(function(){
$(〃button〃).click(function()
$(”p〃).toggleO;
})；
))；
</script>
</head>
<body>
<buttontype二〃button〃>切換</button>
<P>這是一個段落?！?P>
<P>這是另一個段落。</p>
</body>
</html>
頁面顯不為：
切換I
這是一個段落。
這是另一個段落。
點擊“切換”之后,頁面的段落隱藏起來，變?yōu)?
I［切換1
注：點擊“切換”，隱藏和顯示段落字體循環(huán).
jQuery滑動函數(shù)一slideDown,slideUp,slideT
ogg1e
jQuery擁有以下滑動函數(shù)：
$(se1ector).slideDown(speed,ca1Iback)
$(selector).slideUp(speed,cal1back)
$(se1ector).s1ideToggle(speed,callback)
speed參數(shù)可以設立這些值:“slow"，"fast","normaln或毫秒。
ca1Iback參數(shù)是在hide或show函數(shù)完畢之后被執(zhí)行的函數(shù)名稱。
slideDown()實例
<htm1>
<head>
<scriptsrc="z/jquery/jquery-1.11.1.min.js^X/script>
<scripttype二〃text/javascript〃>
$(document).ready(function(){
$(〃.flip〃).click(function(){
$(".pane1z/).s1ideDown(“slow")；
})；
});
</script>
<styletype="text/css〃>
div.panel,p.f1ip
margin:0px;
padding:5px；
text-align:center；
background:#e5eecc;
border:so1id1px#c3c3c3；
)
div.panel
(
height：120px;
disp1ay:none;
)
</sty1e>
</head>
<body>
<divclass=Hpane1〃>
<p>W3School-領先的Web技術(shù)教程站點</p〉
<p>在W3Schoo1,你可以找到你所需要的所有網(wǎng)站建設教程。</p>
</div>
<pclass=〃flip”>請點擊這里</p>
</body>
</html>
頁面為:
請點擊這里
點擊”請點擊這里”之后，頁面慢慢向下展開、直到停止，頁面為：
W3School-領先的Web技術(shù)教程站點
在W3School,你可以找到你所需要的所有網(wǎng)站建設教程。
請點擊這里
slideUp()實例
<html>
<head>
<scriptsrc=〃/jquery/jquery-1.11.1.min.js"></script>
<scripttype=z/text/javascript〃>
$(document).ready(funotion(){
$(".flipn),click(function(){
$(n.panel〃).slideUp(nsiow〃)；
</script>
<styletype二〃text/css〃>
div.pane1,p.f1ip
margin:Opx;
padding:5px;
text—align:center;
background:#e5eecc;
border：solidIpx#c3c3c3;
)
div.pane1
{
height:120px；
)
</style>
</head>
<body>
<divclass二〃pane1”>
<p>W3School-領先的Web技術(shù)教程站點</p>
Vp>在W3School,你可以找到你所需要的所有網(wǎng)站建設教程。</p>
</div>
<Pclass=〃flip〃>請點擊這里</p>
</body>
</html>
頁面為:
W3School-領先的Web技術(shù)教程站點
在W3School,你可以找到你所需要的所有網(wǎng)站建設教程。
請點擊這里
點擊“請點擊這里”之后，頁面慢慢向上收起、直到停止，頁面為：
請點擊這里
s1ideToggle()實例
<html>
<head>
<scriptsrc=〃/jquery/jquery-1.11.1.min.js〃>〈/script>
<scripttype=〃text/javascript”>
$(document).ready(function(){
$(〃.flip"),click(function(){
$(〃.panelzz).s1ideToggle(〃slow〃);
})；
});
</script>
<sty1etype=Htext/cssn>
div.pane1,p.flip
I
margin：Opx；
padding:5px;
text-align:center;
background：#e5eecc;
border:solidIpx#c3c3c3;
)
div.pane1
height：120px；
display：none;
)
</style>
</head>
<body>
<divclass=npane1〃>
<p>W3School-領先的Web技術(shù)教程站點〈/p>
<p>在W3School,你可以找到你所需要的所有網(wǎng)站建設教程。</p>
</div>
<pclass=Hflip”>請點擊這里</p>
</body>
</html>
jQuery效果-淡入淡出--fadeln(),fade
Out(),fadeToQ
jQuery擁有以下fade函數(shù)：
$(selector).fadeln(speed,callback)
$(selector).fadeOut(speed,cal1back)
$(selector).fadeTo(speed,opacity,callback)
Query擁有下面四種fade方法：
?fadeln()
?fadeOut()
?fadeToggle()
?fadeTo()
speed參數(shù)可以設立這些值:"siow","fast","norma1"或毫
秒。
fadeTo()函數(shù)中的opacity參數(shù)規(guī)定減弱到給定的不透明度。
ca11back參數(shù)是在hide或show函數(shù)完畢之后被執(zhí)行的函數(shù)
名稱。
fadein實例：
<html>
<head>
<scriptsrc='7jquery/jquery-1.11.l.min.js"X/scr
ipt>
<script>
$(document).ready(function(){
$("button").c1ick(function(){
$("#divl").fadeln()；
$("#div2").fadeIn("slow1')；
$("#div3n).fadeIn(3000);
})；
})；
</script>
</head>
<body>
<p>演示帶有不同參數(shù)的fadeln()方法。v/p>
<button>點擊這里，使三個矩形淡入</bu11on>
<br><br>
<divid="divl"style="width:80px;heigh
t:80px;disp1ay:none；background-color:red;"X/div>
<br>
<divid="div2Mstyle=,,width:80px;heigh
t:80px;display:none;background-co1or:green；"></di
v>
<br>
<divid="div3"style="width:80px；heig
ht:80px;disp1ay:none；background-color:b1ue；"><
/div>
</body>
</htm1>
A
頁面為:
演示帶有不同參數(shù)的fadelnO方法。
點擊這里，使三個矩形淡入|
4
點擊“點擊這里，使三個矩形淡入"三個矩形逐漸淡入，頁面
為：
演示帶有不同參數(shù)的fadelnO方法。
點擊這里，使三個矩形淡入|
fadeOut()實例
<html>
<head>
<scriptsrc="/jquery/jquery-1.11.l.min.js"></script>
<scripttype=ntext/javascript”>
$(document).ready(function(){
$("button").c1ick(funotion(){
$("#divl").fadeOut();
$("#div2").fadeOut("slow")；
$("#div3").fade0ut(3000);
})；
})；
</script>
</head>
<body>
<p>演示帶有不同參數(shù)的fadeOut()方法。v/p>
〈button,點擊這里，使三個矩形淡出<7button>
<br><br>
<divid="divlnsty1e=nwidth:80px;height:80px；background-c
o1or:red；,!></div>
<br>
<divid=Hdiv2nstyle=nwidth:80px;height:80px;background-color：
green;M></div>
<br>
<divid="div3"style="width:80px；height:80px;background-co
lor：b1ue；”></div>
</body>
</html>
頁面為:
演示帶有不同參數(shù)的fadeOut()方法。
點擊這里，使三個矩形淡出|
點擊“點擊這里，使三個矩形淡入"三個矩形逐漸淡出，頁面
為：
演示帶有不同參數(shù)的fadeOut()方法。
點擊這里，使三個矩形淡出|
fadeToggle()實例
<html>
<head>
<scriptsrc=〃/jquery/jquery-1.11.1.min.js〃></scrip
t>
<script>
$(document).ready(function(){
$(z/button/z).click(function(){
$(〃#divl〃).fadeToggle();
$(H#div2〃).fadeToggle(〃slow");
$(〃#div3〃).fadeToggle(3000)；
})；
})；
</script>
</head>
<body>
<P>演示帶有不同參數(shù)的fadeTogg1e()方法。</p>
<button>點擊這里,使三個矩形淡入淡出〈/button>
<br><br>
<divid二〃div1"style=/，width:80px；height:80px;backgroun
d-co1or:red；〃>V/div>
<br>
<divid="div2"style=，zwidth：80px;height：80px;backgr
ound-color:green;〃></div>
<br>
<divid=〃div3"style—width:80px；height：80px;backgroun
d-color:blue/z></div>
</body>
</body>
</html>
fadeTo()實例
<html>
<head>
<scriptsrc="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo("slow",0.15)；
$("#div2").fadeTo("slow",0.4)；
$("#div3").fadeTo("slow",0.7);
})；
})；
</script>
</head>
<body>
<p>演示帶有不同參數(shù)的fadeTo()方法。</p>
<button>點擊這里，使三個矩形淡出</bu11on>
<br><br>
<divid="divl"style-'width：80px;height:80px;background-colo
r：red;"></div>
<br>
<divid="div2"style="width:80px;height:80px;background-co
lor:green；"x/div>
<br>
<divid="div3"style="width:80px；height：80px;background-co1
or:b1ue;n></div>
</body>
</html>
頁面為：
演示帶有不同參數(shù)的fadeToO方法。
點擊這里，使三個矩形淡出|
點擊''點擊這里，使三個矩形淡出"三個矩形逐漸淡出，頁面為:
演示帶有不同參數(shù)的fadeToO方法。
點擊這里，使三個矩形淡出|
jQuery自定義動畫
jQuery函數(shù)創(chuàng)建自定義動畫的語法：
$(se1ector).animate({params},[duration],[easing],
[cal1back])
關(guān)鍵的參數(shù)是params。它定義了產(chǎn)生動畫的屬性?？梢酝瑫r設立多個
此類屬性：
animate({width:"70%",opacity:0.4,marginLeft："0.6i
n",fontSize:"3em"));
第二個參數(shù)是durationo它定義用來應用于動畫的時間。它設立的
值是:"slow","fast","norma1"或毫秒。
實例1:
<htm1>
<head>
<scriptsrc=n/jquery/jquery-1.11.l.min.Js"></script>
<script>
$(document).ready(function(){
$("button").click(fiinction(){
$(MdivM).animate({left:1250px*))；
});
});
</script>
</head>
<body>
〈button〉開始動畫V/button>
vp>默認情況下，所有HTML元素的位置都是靜態(tài)的，并且無法移動。如需對
位置進行操作屋記得一方面把元素的CSSposition屬性設立為relati
ve>fixed或abso1uteo</p>
<divstyle=nbackground:#98bf21;height：100px;width:100
px;position:absolute;n>
</div>
</body>
</html>
實例2
<htm1>
<head>
<scriptsrc="/jquery/jquery-1.11.1.min.js"></Script>
<script>
$(document).ready(function(){
$(Mbuttonn).click(function(){
$("div”).animate({
left:*250px\
opacity:*O.5\
height：45Opx\
width:115Opx'
})；
})；
});
</script>
</head>
<body>
<button>開始動畫</button>
vp>默認情況下，所有HTML元素的位置都是靜態(tài)的，并且無法移動。如
需對位置進行操作,記得一方面把元素的CSSposition屬性設立為relativ
e、fixed或
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 電焊工施工合同協(xié)議書
- 湖北省隨州市部分高中2024-2025學年高一下學期2月聯(lián)考地理試卷（含答案）
- 洗衣設備購銷合同共
- 健身房運營管理作業(yè)指導書
- 會議策劃與活動執(zhí)行服務協(xié)議
- 健康科技在老年健康管理中的應用解決方案
- 水利建設工程施工合同協(xié)議書
- 大學生科普小說讀后感
- 觀看紀錄片長江觀后感
- 車隊土石方運輸合同
- 2025年榆林市公共交通總公司招聘（57人）筆試參考題庫附帶答案詳解
- 醫(yī)院培訓課件：《多發(fā)性骨髓瘤》
- 【新】部編人教版小學4四年級《道德與法治》下冊全冊教案
- DZ/T 0462.8-2023 礦產(chǎn)資源“三率”指標要求 第8部分：硫鐵礦、磷、硼、天然堿、鈉硝石（正式版）
- 部編版三年級下冊語文全冊教案表格版
- JTS 144-1-2010 港口工程荷載規(guī)范
- 產(chǎn)液剖面介紹
- 美國UNF和unc螺紋標準
- 河北省省直行政事業(yè)單位資產(chǎn)(房屋)租賃合同書(共7頁)
- 220kV、110kV設備基礎施工方案
- 白龍庵隧道出口端仰坡監(jiān)測專項方案
評論
0/150
提交評論