版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
<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庫位于單個(gè)的JavaScript文獻(xiàn)中，其中包含所有
jQuery函數(shù)。
可以通過下面的標(biāo)記把jQuery添加到網(wǎng)頁中：
<head>
n
<scripttype=text/javascript"src二〃jquery.js〃〉〈/script>
</head>
庫的替代
Goog1e和Microso仕對jQuery的支持都很好。
假如您不樂旨在自己的計(jì)算機(jī)上存放jQuery庫，那么可以從Goog1e
orMicrosoft加載CDNjQuery核心文獻(xiàn)。
使用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語法實(shí)例：
$(this).hideQ
演示jQueryhide()函數(shù)，隱藏當(dāng)前的HTML元素。
st").hide()
演示jQueryhide()函數(shù)，隱藏id="test"的元素。
$("p").hide()
演示jQueryhide()函數(shù)，隱藏所有Vp＞元素。
$(".test").hide()
演示jQueryhide()函數(shù)，隱藏所有class="test"的元素。
jQuery語法
jQuery語法是為HTML元素的選取編制,可以對元素執(zhí)行某些操作。
基礎(chǔ)語法是:$(se1ector).action()
?美元符號(hào)定義jQuery
?選擇符(selector)“查詢”和“查找"HTML元素
?jQueryaction()執(zhí)行對元素的操作
實(shí)例
$(this).hide()-隱藏當(dāng)前元素
$("p").hide()-隱藏所有段落
$("p.test").hide()-隱藏所有class="test"的段落
$("#test").hide()-隱藏所有id="test"的元素
提醒:jQuery使用的語法是XPath與CSS選擇器語法的組合。
文檔就緒函數(shù):為了防止文檔在完全加載(就緒)之前運(yùn)營
jQuery代碼。
$(document).ready(function(){
---jQueryfunctionsgohere------
})；
在文檔完全加載之前運(yùn)營函數(shù)操作失敗的情況：
?試圖隱藏一個(gè)不存在的元素。
?獲得未完全加載的圖像的大小。
jQuery選擇器
1、jQuery元素選擇器
jQuery使用CSS選擇器來選取HTML元素。
$("p")選取<p>元素。
$("ro")選取所有c1ass="intro"的<p>元素。
$("p#demo")選取id="demo"的第一個(gè)<p>元素。
2、jQuery屬性選擇器
jQuery使用XPath表達(dá)式來選擇帶有給定屬性的元素。
$("[href]")選取所有帶有href屬性的元素。
$("[href='#，l")選取所有帶有href值等于"祥"的元素。
$("[href!=，#':")選取所有帶有href值不等于"利的元
素。
$("[href$='.jpg/]")選取所有href值以".jpg"結(jié)尾的元素。
3、jQueryCSS選擇器
jQueryCSS選擇器可用于改變HTML元素的CSS屬性。
實(shí)例：
<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>
更多的實(shí)例
語法描述
$(this)當(dāng)前HTML元素
$("p")所有＜p＞元素
$("ro")所有class="intro"的Vp>元素
$(".intro")所有class="intro"的元素
$("#intro")id="intro"的第一個(gè)元素
$("u11i:first")每個(gè)＜u1＞的第一個(gè)＜1i＞元素
$("[href$='.j
所有帶有以".jpg"結(jié)尾的href屬性的屬性
Pg']")
$("div#intro.heaid="intro"的<div>元素中的所有class="hea
d")d"的元素
jQuery選擇器
正班qp實(shí)例選取
*$("*")所有元素
#id$(n#lastname”)id=lastname的第一個(gè)元素
.class$(".intro")所有class="intro"的元素
eIement$("p")所有＜P＞元素
所有class=intro且class=d
.c1ass.class$(”.intro.demo")
emo的元素
:first$("p:first")第一個(gè)＜p＞元素
:last$("p:1ast")最后一個(gè)＜p＞元素
:even$("tr:evenn)所有偶數(shù)＜tr＞元素
:odd$("tr:odd")所有奇數(shù)＜tr＞元素
列表中的第四個(gè)元素（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")所有標(biāo)題元素＜hl＞＜h2＞...
:animated所有動(dòng)畫元素
:contains(tex$(”：containsfW3Sch
包含文本的所有元素
t)oof)”)
:empty$(":empty")無子（元素）節(jié)點(diǎn)的所有元素
: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ù)是當(dāng)HTML中發(fā)生事件時(shí)自動(dòng)被調(diào)用的函數(shù)。由
“事件（event）“觸發(fā)弋riggered）是經(jīng)常被用到的術(shù)語。
單獨(dú)文獻(xiàn)中的函數(shù)（把jQuery函數(shù)放到獨(dú)立的邪文獻(xiàn)中，易
于jQuery函數(shù)維護(hù)）
實(shí)例
<head>
，z
<scripttype二〃text/javascript〃src=jquery.js〃></script
>
<scripttype="text/javascript“src=/，my_jquery_functions.jsn>
</script>
</head>
jQuery名稱沖突（了解）
jQuery使用$符號(hào)作為jQuery的簡介方式。
某些其他JavaScript庫中的函數(shù)（比如Prototype）同樣使用
$符號(hào)。
jQuery使用名為noConflict（）的方法來解決該問題。
varjry./70coa/Zic幫助您使用自己的名稱（比如jq）來
代替$符號(hào)。
實(shí)例：
<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事件而特別設(shè)計(jì)的，那么當(dāng)您遵循以
下原則時(shí)，您的代碼會(huì)更恰當(dāng)且更易維護(hù)：
?把所有jQuery代碼置于事件解決函數(shù)中
?把所有事件解決函數(shù)置于文檔就緒事件解決器中
?把jQuery代碼置于單獨(dú)的.js文獻(xiàn)中
?假如存在名稱沖突，則重命名jQuery庫
jQuery事件
下面是jQuery中事件函數(shù)的一些例子:
Event函數(shù)綁定函數(shù)至
文檔的就緒事件
$(document).ready(function)
（當(dāng)HTML文檔就緒可用）
$(selector).click(function)被選元素的點(diǎn)擊事件
$(selector).dblclick(function)被選元素的雙擊事件
$(se1ector).focus(function)被選元素的獲得焦點(diǎn)事件
$(se1ector).mouseover(function)被選元素的鼠標(biāo)懸停事件
jQuery事件方法
事件方法會(huì)觸發(fā)匹配元素的事件，或?qū)⒑瘮?shù)綁定到所有匹配元素的某個(gè)
事件。
方法」述
bindC向匹配元素附加一個(gè)或更多事件處理器
blur。觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的blur事件
chanae。觸發(fā)、或?qū)搭~綁定到指定元素的change事件
dick。觸發(fā)'或?qū)⒑瘮?shù)綁定到指定元素的click事件
dblclick。觸發(fā)、或?qū)磾?shù)綁定到指定元素的doubleclick事件
deleaateO向匹酉i!元素的當(dāng)前或未來的子元素附加一個(gè)或多個(gè)事件處理器
dieO移除所有通過live()函數(shù)添加的事件處理程序。
er「or()觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的error事件
event.isDefaultP「evented()返回event對象上是否調(diào)用了event.preventDefaultQ0
event.paaeX相對于文檔左邊緣的鼠標(biāo)位置。
event.DaaeY相對于文檔上邊絳的鼠標(biāo)位置。
event.D「eventDefault/)阻止事件的默認(rèn)動(dòng)作。
event.result包含由被指定事件觸發(fā)的事件處理器返回的最后一個(gè)值。
event.tanjet觸發(fā)該事件的DOM元素。
event.timeStamD該屬性返回從1970年1月1日到事件發(fā)生時(shí)的毫秒數(shù)。
event.tvDe描述事件的類型。
event.which指示按了哪個(gè)鍵或按鈕。
focus。觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的focus事件
kevdown。觸發(fā)、或?qū)磾?shù)綁定到指定元素的keydown事件
kevpress。觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的keypress事件
kKVUD。觸發(fā)、或?qū)磾?shù)綁定到指定元素的keyup事件
live。為當(dāng)前或未來的匹酉d元素添加一個(gè)或多個(gè)事件處理器
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!元素添加事件處理器。每個(gè)元素只能觸發(fā)一次該處理器。
ready。文檔就緒事件（當(dāng)HTML文檔就緒可用時(shí)）
resize。觸發(fā)、或?qū)磾?shù)綁定到指定元素的resize事件
scroll。觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的scroll事件
sslectf)觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的select事件
submit。觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的submit事件
tooale。綁定兩個(gè)或多個(gè)事件處理器函額，當(dāng)發(fā)生輪流的click事件時(shí)執(zhí)行。
triaaerO所有匹酉d元素的指定事件
triagerHandleM)第一個(gè)被匹配元素的指定事件
unbind。從匹酉B元素移除一個(gè)被添加的事件處理器
undeleaateC從匹配元素移除一個(gè)被添加的事件處理器，現(xiàn)在或?qū)?/p>
unloocK)觸發(fā)、或?qū)磾?shù)綁定到指定元素的unload事件
jQuery事件解決方法
事件解決方法把事件解決器綁定至匹配元素。
方法觸發(fā)
向匹配元素添加一個(gè)或更多事件解
$(selector).bind(event)
決器
向匹配元素添加一個(gè)事件解決器，現(xiàn)
$(selector).delegate(selector,event)
在或?qū)?/p>
移除所有通過live。函數(shù)添加的
$(selector).die()
事件解決器
向匹配元素添加一個(gè)事件解決器，現(xiàn)
$(selector).1ive(event)
在或?qū)?/p>
向匹配元素添加一個(gè)事件解決器。
$(selector).one(event)
該解決器只能觸發(fā)一次。
從匹配元素移除一個(gè)被添加的事件
$(se1ector).unbind(event)
解決器
從匹配元素移除一個(gè)被添加的事件
$(se1ector).unde1egate(event)
解決器，現(xiàn)在或?qū)?/p>
$(se1ector).trigger(event)所有匹配元素的指定事件
$(selector).triggerHandler(event)第一個(gè)被匹配元素的指定事件
jQuery效果(隱藏、顯示、切換，滑動(dòng)，
淡入淡出，以及動(dòng)畫)
jQuery效果一隱藏和顯示：通過hide()和show()兩個(gè)函
數(shù)，jQuery支持對HTML元素的隱藏和顯示
hide()和show()都可以設(shè)立兩個(gè)可選參數(shù)：speed和callba
cko
語法：
$(se1ector).hide(speed,callback)
$(seiector).show(speed,ca11back)
callback參數(shù)是在hide或show函數(shù)完畢之后被執(zhí)行的函數(shù)名
稱。
speed參數(shù)可以設(shè)立這些值："slow","fast","normal"或milliseco
ndSo
實(shí)例(隱藏)：
<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ù)可以設(shè)立這些值:"slow","fast","normal"或毫秒。
實(shí)例
$("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>這是一個(gè)段落?！?P>
<P>這是另一個(gè)段落。</p>
</body>
</html>
頁面顯不為：
切換I
這是一個(gè)段落。
這是另一個(gè)段落。
點(diǎn)擊“切換”之后,頁面的段落隱藏起來，變?yōu)?
I［切換1
注：點(diǎn)擊“切換”，隱藏和顯示段落字體循環(huán).
jQuery滑動(dòng)函數(shù)一slideDown,slideUp,slideT
ogg1e
jQuery擁有以下滑動(dòng)函數(shù)：
$(se1ector).slideDown(speed,ca1Iback)
$(selector).slideUp(speed,cal1back)
$(se1ector).s1ideToggle(speed,callback)
speed參數(shù)可以設(shè)立這些值:“slow"，"fast","normaln或毫秒。
ca1Iback參數(shù)是在hide或show函數(shù)完畢之后被執(zhí)行的函數(shù)名稱。
slideDown()實(shí)例
<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-領(lǐng)先的Web技術(shù)教程站點(diǎn)</p〉
<p>在W3Schoo1,你可以找到你所需要的所有網(wǎng)站建設(shè)教程。</p>
</div>
<pclass=〃flip”>請點(diǎn)擊這里</p>
</body>
</html>
頁面為:
請點(diǎn)擊這里
點(diǎn)擊”請點(diǎn)擊這里”之后，頁面慢慢向下展開、直到停止，頁面為：
W3School-領(lǐng)先的Web技術(shù)教程站點(diǎn)
在W3School,你可以找到你所需要的所有網(wǎng)站建設(shè)教程。
請點(diǎn)擊這里
slideUp()實(shí)例
<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-領(lǐng)先的Web技術(shù)教程站點(diǎn)</p>
Vp>在W3School,你可以找到你所需要的所有網(wǎng)站建設(shè)教程。</p>
</div>
<Pclass=〃flip〃>請點(diǎn)擊這里</p>
</body>
</html>
頁面為:
W3School-領(lǐng)先的Web技術(shù)教程站點(diǎn)
在W3School,你可以找到你所需要的所有網(wǎng)站建設(shè)教程。
請點(diǎn)擊這里
點(diǎn)擊“請點(diǎn)擊這里”之后，頁面慢慢向上收起、直到停止，頁面為：
請點(diǎn)擊這里
s1ideToggle()實(shí)例
<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-領(lǐng)先的Web技術(shù)教程站點(diǎn)〈/p>
<p>在W3School,你可以找到你所需要的所有網(wǎng)站建設(shè)教程。</p>
</div>
<pclass=Hflip”>請點(diǎn)擊這里</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ù)可以設(shè)立這些值:"siow","fast","norma1"或毫
秒。
fadeTo()函數(shù)中的opacity參數(shù)規(guī)定減弱到給定的不透明度。
ca11back參數(shù)是在hide或show函數(shù)完畢之后被執(zhí)行的函數(shù)
名稱。
fadein實(shí)例：
<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>點(diǎn)擊這里，使三個(gè)矩形淡入</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方法。
點(diǎn)擊這里，使三個(gè)矩形淡入|
4
點(diǎn)擊“點(diǎn)擊這里，使三個(gè)矩形淡入"三個(gè)矩形逐漸淡入，頁面
為：
演示帶有不同參數(shù)的fadelnO方法。
點(diǎn)擊這里，使三個(gè)矩形淡入|
fadeOut()實(shí)例
<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,點(diǎn)擊這里，使三個(gè)矩形淡出<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()方法。
點(diǎn)擊這里，使三個(gè)矩形淡出|
點(diǎn)擊“點(diǎn)擊這里，使三個(gè)矩形淡入"三個(gè)矩形逐漸淡出，頁面
為：
演示帶有不同參數(shù)的fadeOut()方法。
點(diǎn)擊這里，使三個(gè)矩形淡出|
fadeToggle()實(shí)例
<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>點(diǎn)擊這里,使三個(gè)矩形淡入淡出〈/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()實(shí)例
<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>點(diǎn)擊這里，使三個(gè)矩形淡出</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方法。
點(diǎn)擊這里，使三個(gè)矩形淡出|
點(diǎn)擊''點(diǎn)擊這里，使三個(gè)矩形淡出"三個(gè)矩形逐漸淡出，頁面為:
演示帶有不同參數(shù)的fadeToO方法。
點(diǎn)擊這里，使三個(gè)矩形淡出|
jQuery自定義動(dòng)畫
jQuery函數(shù)創(chuàng)建自定義動(dòng)畫的語法：
$(se1ector).animate({params},[duration],[easing],
[cal1back])
關(guān)鍵的參數(shù)是params。它定義了產(chǎn)生動(dòng)畫的屬性?？梢酝瑫r(shí)設(shè)立多個(gè)
此類屬性：
animate({width:"70%",opacity:0.4,marginLeft："0.6i
n",fontSize:"3em"));
第二個(gè)參數(shù)是durationo它定義用來應(yīng)用于動(dòng)畫的時(shí)間。它設(shè)立的
值是:"slow","fast","norma1"或毫秒。
實(shí)例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〉開始動(dòng)畫V/button>
vp>默認(rèn)情況下，所有HTML元素的位置都是靜態(tài)的，并且無法移動(dòng)。如需對
位置進(jìn)行操作屋記得一方面把元素的CSSposition屬性設(shè)立為relati
ve>fixed或abso1uteo</p>
<divstyle=nbackground:#98bf21;height：100px;width:100
px;position:absolute;n>
</div>
</body>
</html>
實(shí)例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>開始動(dòng)畫</button>
vp>默認(rèn)情況下，所有HTML元素的位置都是靜態(tài)的，并且無法移動(dòng)。如
需對位置進(jìn)行操作,記得一方面把元素的CSSposition屬性設(shè)立為relativ
e、fixed或
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025年度高校畢業(yè)生就業(yè)見習(xí)基地協(xié)議
- 二零二五年度帶小孩保姆與兒童健康監(jiān)測協(xié)議
- 二零二五年度廠房租賃安全與環(huán)保技術(shù)合作協(xié)議
- 二零二五年度退股股權(quán)變更與收益分配協(xié)議
- 2025年山東駕?？荚囏涍\(yùn)從業(yè)資格證考試題庫
- 水電安裝工程簡單版的合同
- 2024年簡單房屋租賃協(xié)議
- 競選班主任發(fā)言稿
- 2024年浙江省建筑安全員B證考試題庫及答案
- 建筑隔墻用輕質(zhì)條板施工合同
- 醫(yī)院培訓(xùn)課件：《多發(fā)性骨髓瘤》
- 【新】部編人教版小學(xué)4四年級(jí)《道德與法治》下冊全冊教案
- 2025年湖南省長沙市單招職業(yè)傾向性測試題庫及參考答案
- 《產(chǎn)業(yè)轉(zhuǎn)移》課件：機(jī)遇與挑戰(zhàn)
- 十八項(xiàng)核心制度培訓(xùn)課件
- 2024年遠(yuǎn)程教育行業(yè)市場運(yùn)營現(xiàn)狀及行業(yè)發(fā)展趨勢報(bào)告
- 2025年2月上海市高三聯(lián)考高考調(diào)研英語試題(答案詳解)
- 三好學(xué)生競選12
- 2024-2025學(xué)年六年級(jí)上學(xué)期數(shù)學(xué)第三單元3.1-搭積木比賽（教案）
- DeepSeek從入門到精通
- 植保機(jī)械技術(shù)培訓(xùn)課件
評(píng)論
0/150
提交評(píng)論