jquery筆記(吐血整理)

上傳人：1*** IP屬地：廣西上傳時間：2023-11-21 格式：DOCX 頁數(shù)：67 大?。?6.82KB 積分：15 舉報 版權(quán)申訴

已閱讀5頁，還剩62頁未讀，繼續(xù)免費(fèi)閱讀

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

<html><head><scripttype="text/javascript"src="jquery.js"></script><scripttype="text/javascript">$(document).ready(function(){$("p").click(function(){$(this).hide();});});</script></head><body><p>Ifyouclickonme,Iwilldisappear.</p></body></html>------------------------------------------------------------------<html><head><scripttype="text/javascript"src="jquery.js"></script><scripttype="text/javascript">$(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ù)?？梢酝ㄟ^下面的標(biāo)記把jQuery添加到網(wǎng)頁中：<head><scripttype="text/javascript"src="jquery.js"></script></head>庫的替代Google和Microsoft對jQuery的支持都很好。如果您不愿意在自己的計算機(jī)上存放jQuery庫，那么可以從GoogleorMicrosoft加載CDNjQuery核心文件。使用Google的CDN<head>/jquery/1.4.0/jquery.min.js"></script></head>使用Microsoft的CDN<head>/jquery-1.4.min.js"></script></head>====================================================================jQuery語法：通過jQuery，您可以選取〔查詢，query〕HTML元素，并對它們執(zhí)行“操作〞〔actions〕。jQuery語法實(shí)例：$(this).hide()演示jQueryhide()函數(shù)，隱藏當(dāng)前的HTML元素。$("#test").hide()演示jQueryhide()函數(shù)，隱藏id="test"的元素。$("p").hide()演示jQueryhide()函數(shù)，隱藏所有<p>元素。$(".test").hide()演示jQueryhide()函數(shù)，隱藏所有class="test"的元素。jQuery語法jQuery語法是為HTML元素的選取編制，可以對元素執(zhí)行某些操作。根底語法是：$(selector).action()美元符號定義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ù)操作失敗的情況：試圖隱藏一個不存在的元素。獲得未完全加載的圖像的大小。==================================================================jQuery選擇器1、jQuery元素選擇器jQuery使用CSS選擇器來選取HTML元素。$("p")選取<p>元素。$("ro")選取所有class="intro"的<p>元素。$("p#demo")選取id="demo"的第一個<p>元素。2、jQuery屬性選擇器jQuery使用XPath表達(dá)式來選擇帶有給定屬性的元素。$("[href]")選取所有帶有href屬性的元素。$("[href='#']")選取所有帶有href值等于"#"的元素。$("[href!='#']")選取所有帶有href值不等于"#"的元素。$("[href$='.jpg']")選取所有href值以".jpg"結(jié)尾的元素。3、jQueryCSS選擇器jQueryCSS選擇器可用于改變HTML元素的CSS屬性。實(shí)例：<html><head><scripttype="text/javascript"src="../jquery/jquery.js"tppabs="://w3school/jquery/jquery.js"></script><scripttype="text/javascript">$(document).ready(function(){$("button").click(function(){$("p").css("background-color","yellow");});});</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"的<p>元素$(".intro")所有class="intro"的元素$("#intro")id="intro"的第一個元素$("ulli:first")每個<ul>的第一個<li>元素$("[href$='.jpg']")所有帶有以".jpg"結(jié)尾的href屬性的屬性$("div#intro.head")id="intro"的<div>元素中的所有class="head"的元素jQuery選擇器選擇器實(shí)例選取*$("*")所有元素#id$("#lastname")id=lastname的第一個元素.class$(".intro")所有class="intro"的元素element$("p")所有<p>元素.class.class$(".intro.demo")所有class=intro且class=demo的元素

:first$("p:first")第一個<p>元素:last$("p:last")最后一個<p>元素:even$("tr:even")所有偶數(shù)<tr>元素:odd$("tr:odd")所有奇數(shù)<tr>元素

:eq(index)$("ulli:eq(3)")列表中的第四個元素〔index從0開始〕:gt(no)$("ulli:gt(3)")列出index大于3的元素:lt(no)$("ulli:lt(3)")列出index小于3的元素:not(selector)$("input:not(:empty)")所有不為空的input元素

:header$(":header")所有標(biāo)題元素<h1><h2>...:animated

所有動畫元素

:contains(text)$(":contains('W3School')")包含文本的所有元素:empty$(":empty")無子〔元素〕節(jié)點(diǎn)的所有元素:hidden$("p:hidden")所有隱藏的<p>元素:visible$("table:visible")所有可見的表格

s1,s2,s3$("th,td,.intro")所有帶有匹配選擇的元素

[attribute]$("[href]")所有帶有href屬性的元素[attribute=value]$("[href='#']")所有href屬性的值等于"#"的元素[attribute!=value]$("[href!='#']")所有href屬性的值不等于"#"的元素[attribute$=value]$("[href$='.jpg']")所有href屬性的值包含".jpg"的元素

:input$(":input")所有<input>元素:text$(":text")所有type="text"的<input>元素:password$(":password")所有type="password"的<input>元素:radio$(":radio")所有type="radio"的<input>元素:checkbox$(":checkbox")所有type="checkbox"的<input>元素:submit$(":submit")所有type="submit"的<input>元素:reset$(":reset")所有type="reset"的<input>元素:button$(":button")所有type="button"的<input>元素:image$(":image")所有type="image"的<input>元素:file$(":file")所有type="file"的<input>元素

:enabled$(":enabled")所有激活的input元素:disabled$(":disabled")所有禁用的input元素:selected$(":selected")所有被選取的input元素:checked$(":checked")所有被選中的input元素============================================================jQuery事件jquery事件處理函數(shù)是當(dāng)HTML中發(fā)生事件時自動被調(diào)用的函數(shù)。由“事件〞〔event〕“觸發(fā)〞〔triggered〕是經(jīng)常被用到的術(shù)語。單獨(dú)文件中的函數(shù)〔把jQuery函數(shù)放到獨(dú)立的.js文件中,易于jQuery函數(shù)維護(hù)〕實(shí)例<head><scripttype="text/javascript"src="jquery.js"></script><scripttype="text/javascript"src="my_jquery_functions.js"></script></head>jQuery名稱沖突〔了解〕jQuery使用$符號作為jQuery的簡介方式。某些其他JavaScript庫中的函數(shù)〔比方Prototype〕同樣使用$符號。jQuery使用名為noConflict()的方法來解決該問題。varjq=jQuery.noConflict()，幫助您使用自己的名稱〔比方j(luò)q〕來代替$符號。實(shí)例：<html><head><scripttype="text/javascript"src="../jquery/jquery.js"tppabs="://w3school/jquery/jquery.js"></script><scripttype="text/javascript">varjq=jQuery.noConflict();jq(document).ready(function(){

jq("button").click(function(){

jq("p").hide();

});});</script></head><body><h2>Thisisaheading</h2><p>Thisisaparagraph.</p><p>Thisisanotherparagraph.</p><buttontype="button">Clickme</button></body></html>結(jié)論由于jQuery是為處理HTML事件而特別設(shè)計的，那么當(dāng)您遵循以下原那么時，您的代碼會更恰當(dāng)且更易維護(hù)：把所有jQuery代碼置于事件處理函數(shù)中把所有事件處理函數(shù)置于文檔就緒事件處理器中把jQuery代碼置于單獨(dú)的.js文件中如果存在名稱沖突，那么重命名jQuery庫jQuery事件下面是jQuery中事件函數(shù)的一些例子：Event函數(shù)綁定函數(shù)至$(document).ready(function)文檔的就緒事件〔當(dāng)HTML文檔就緒可用〕$(selector).click(function)被選元素的點(diǎn)擊事件$(selector).dblclick(function)被選元素的雙擊事件$(selector).focus(function)被選元素的獲得焦點(diǎn)事件$(selector).mouseover(function)被選元素的鼠標(biāo)懸停事件jQuery事件方法事件方法會觸發(fā)匹配元素的事件，或?qū)⒑瘮?shù)綁定到所有匹配元素的某個事件。jQuery事件處理方法事件處理方法把事件處理器綁定至匹配元素。方法觸發(fā)$(selector).bind(event)向匹配元素添加一個或更多事件處理器$(selector).delegate(selector,event)向匹配元素添加一個事件處理器，現(xiàn)在或?qū)?(selector).die()移除所有通過live()函數(shù)添加的事件處理器$(selector).live(event)向匹配元素添加一個事件處理器，現(xiàn)在或?qū)?(selector).one(event)向匹配元素添加一個事件處理器。該處理器只能觸發(fā)一次。$(selector).unbind(event)從匹配元素移除一個被添加的事件處理器$(selector).undelegate(event)從匹配元素移除一個被添加的事件處理器，現(xiàn)在或?qū)?(selector).trigger(event)所有匹配元素的指定事件$(selector).triggerHandler(event)第一個被匹配元素的指定事件===========================================================================================jQuery效果〔隱藏、顯示、切換，滑動，淡入淡出，以及動畫〕jQuery效果—隱藏和顯示：通過hide()和show()兩個函數(shù)，jQuery支持對HTML元素的隱藏和顯示hide()和show()都可以設(shè)置兩個可選參數(shù)：speed和callback。語法：$(selector).hide(speed,callback)$(selector).show(speed,callback)callback參數(shù)是在hide或show函數(shù)完成之后被執(zhí)行的函數(shù)名稱。speed參數(shù)可以設(shè)置這些值："slow","fast","normal"或milliseconds。實(shí)例〔隱藏〕：<html><head><scripttype="text/javascript"src="../jquery/jquery.js"tppabs="://w3school/jquery/jquery.js"></script><scripttype="text/javascript">$(document).ready(function(){

$("#hide").click(function(){

$("p").hide();

});

$("#show").click(function(){

$("p").show();

});});</script></head><body><pid="p1">Ifyouclickonthe"Hide"button,Iwilldisappear.</p><buttonid="hide"type="button">Hide</button><buttonid="show"type="button">Show</button></body></html>-----------------------------------------------------------------------------------------------------<html><head><scripttype="text/javascript"src="../jquery/jquery.js"tppabs="://w3school/jquery/jquery.js"></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í)例$("button").click(function(){$("p").toggle();});--------------------------------------------------------------------<!DOCTYPEhtml><html><head><scriptsrc="/jquery/jquery-1.11.1.min.js"></script><scripttype="text/javascript">$(document).ready(function(){$("button").click(function(){$("p").toggle();});});</script></head><body><buttontype="button">切換</button><p>這是一個段落。</p><p>這是另一個段落。</p></body></html>頁面顯示為：點(diǎn)擊“切換〞之后，頁面的段落隱藏起來，變?yōu)椋鹤ⅲ狐c(diǎn)擊“切換〞，隱藏和顯示段落字體循環(huán).jQuery滑動函數(shù)-slideDown,slideUp,slideTogglejQuery擁有以下滑動函數(shù)：$(selector).slideDown(speed,callback)$(selector).slideUp(speed,callback)$(selector).slideToggle(speed,callback)speed參數(shù)可以設(shè)置這些值："slow","fast","normal"或毫秒。callback參數(shù)是在hide或show函數(shù)完成之后被執(zhí)行的函數(shù)名稱。slideDown()實(shí)例<html><head><scriptsrc="/jquery/jquery-1.11.1.min.js"></script><scripttype="text/javascript">

$(document).ready(function(){

$(".flip").click(function(){

$(".panel").slideDown("slow");

});});</script><styletype="text/css">

$(document).ready(function(){

$(".flip").click(function(){

$(".panel").slideUp("slow");

});});</script><styletype="text/css">

div.panel,p.flip{margin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid1px#c3c3c3;}div.panel{height:120px;}</style></head><body><divclass="panel"><p>W3School-領(lǐng)先的Web技術(shù)教程站點(diǎn)</p><p>在W3School，你可以找到你所需要的所有網(wǎng)站建設(shè)教程。</p></div><pclass="flip">請點(diǎn)擊這里</p></body></html>頁面為：點(diǎn)擊“請點(diǎn)擊這里〞之后，頁面慢慢向上收起、直到停止，頁面為：------------------------------------------------------------------------------------------------------slideToggle()實(shí)例<html><head><scriptsrc="/jquery/jquery-1.11.1.min.js"></script><scripttype="text/javascript">

$(document).ready(function(){$(".flip").click(function(){

$(".panel").slideToggle("slow");

});});</script><styletype="text/css">

div.panel,p.flip{margin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid1px#c3c3c3;}div.panel{height:120px;display:none;}</style></head><body><divclass="panel"><p>W3School-領(lǐng)先的Web技術(shù)教程站點(diǎn)</p><p>在W3School，你可以找到你所需要的所有網(wǎng)站建設(shè)教程。</p></div><pclass="flip">請點(diǎn)擊這里</p></body></html>jQuery效果-淡入淡出--fadeIn(),fadeOut(),fadeTo()jQuery擁有以下fade函數(shù)：$(selector).fadeIn(speed,callback)$(selector).fadeOut(speed,callback)$(selector).fadeTo(speed,opacity,callback)Query擁有下面四種fade方法：fadeIn()fadeOut()fadeToggle()fadeTo()speed參數(shù)可以設(shè)置這些值："slow","fast","normal"或毫秒。fadeTo()函數(shù)中的opacity參數(shù)規(guī)定減弱到給定的不透明度。callback參數(shù)是在hide或show函數(shù)完成之后被執(zhí)行的函數(shù)名稱。fadeIn實(shí)例：<html><head><scriptsrc="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){

$("button").click(function(){

$("#div1").fadeIn();

$("#div2").fadeIn("slow");

$("#div3").fadeIn(3000);

});});</script></head><body><p>演示帶有不同參數(shù)的fadeIn()方法。</p><button>點(diǎn)擊這里，使三個矩形淡入</button><br><br><divid="div1"style="width:80px;height:80px;display:none;background-color:red;"></div><br><divid="div2"style="width:80px;height:80px;display:none;background-color:green;"></div><br><divid="div3"style="width:80px;height:80px;display:none;background-color:blue;"></div></body></html>頁面為：點(diǎn)擊“點(diǎn)擊這里，使三個矩形淡入〞三個矩形逐漸淡入，頁面為：-----------------------------------------------------------------------------------------------fadeOut()實(shí)例<html><head><scriptsrc="/jquery/jquery-1.11.1.min.js"></script><scripttype="text/javascript">$(document).ready(function(){

$("button").click(function(){

$("#div1").fadeOut();

$("#div2").fadeOut("slow");

$("#div3").fadeOut(3000);

});});</script></head><body><p>演示帶有不同參數(shù)的fadeOut()方法。</p><button>點(diǎn)擊這里，使三個矩形淡出</button><br><br><divid="div1"style="width:80px;height:80px;background-color:red;"></div><br><divid="div2"style="width:80px;height:80px;background-color:green;"></div><br><divid="div3"style="width:80px;height:80px;background-color:blue;"></div></body></html>頁面為：點(diǎn)擊“點(diǎn)擊這里，使三個矩形淡入〞三個矩形逐漸淡出，頁面為：-------------------------------------------------------------------------------------fadeToggle()實(shí)例<html><head><scriptsrc="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("#div1").fadeToggle();$("#div2").fadeToggle("slow");$("#div3").fadeToggle(3000);});});</script></head><body><p>演示帶有不同參數(shù)的fadeToggle()方法。</p><button>點(diǎn)擊這里，使三個矩形淡入淡出</button><br><br><divid="div1"style="width:80px;height:80px;background-color:red;"></div><br><divid="div2"style="width:80px;height:80px;background-color:green;"></div><br><divid="div3"style="width:80px;height:80px;background-color:blue;"></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)擊這里，使三個矩形淡出</button><br><br><divid="div1"style="width:80px;height:80px;background-color:red;"></div><br><divid="div2"style="width:80px;height:80px;background-color:green;"></div><br><divid="div3"style="width:80px;height:80px;background-color:blue;"></div></body></html>頁面為：點(diǎn)擊“點(diǎn)擊這里，使三個矩形淡出〞三個矩形逐漸淡出，頁面為：jQuery自定義動畫jQuery函數(shù)創(chuàng)立自定義動畫的語法：$(selector).animate({params},[duration],[easing],[callback])關(guān)鍵的參數(shù)是params。它定義了產(chǎn)生動畫的屬性?？梢酝瑫r設(shè)置多個此類屬性：animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});第二個參數(shù)是duration。它定義用來應(yīng)用于動畫的時間。它設(shè)置的值是："slow","fast","normal"或毫秒。實(shí)例1：<html><head><scriptsrc="/jquery/jquery-1.11.1.min.js"></script><script>

$(document).ready(function(){

$("button").click(function(){

$("div").animate({left:'250px'});

});});</script>

</head><body><button>開始動畫</button><p>默認(rèn)情況下，所有HTML元素的位置都是靜態(tài)的，并且無法移動。如需對位置進(jìn)行操作，記得首先把元素的CSSposition屬性設(shè)置為relative、fixed或absolute。</p><divstyle="background:#98bf21;height:100px;width:100px;position:absolute;"></div></body></html>----------------------------------------------------------------------------------------------------實(shí)例2<html><head><scriptsrc="/jquery/jquery-1.11.1.min.js"></script><script>

$(document).ready(function(){

$("button").click(function(){

$("div").animate({

left:'250px',

opacity:'0.5',

height:'150px',

width:'150px'

});

});});</script>

<head>

<scriptsrc="/jquery/jquery-1.11.1.min.js"></script>

$(document).ready(function(){

$("button").click(function(){

$("div").animate({left:'250px',height:'+=150px',width:'+=150px'});

});

</script>

</head>

<body>

<p>默認(rèn)情況下，所有HTML元素的位置都是靜態(tài)的，并且無法移動。如需對位置進(jìn)行操作，記得首先把元素的CSSposition屬性設(shè)置為relative、fixed或absolute。</p>

<divstyle="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

</body>

</html>----------------------------------------------------------------------------------------------實(shí)例4：<html><head><scriptsrc="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("div").animate({height:'toggle'});});});</script></head><body><button>開始動畫</button><p>默認(rèn)情況下，所有HTML元素的位置都是靜態(tài)的，并且無法移動。如需對位置進(jìn)行操作，記得首先把元素的CSSposition屬性設(shè)置為relative、fixed或absolute。</p><divstyle="background:#98bf21;height:100px;width:100px;position:absolute;"></div></body></html>------------------------------------------------------------------------------------------------實(shí)例5：<html><head><scriptsrc="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){$("button").click(function(){vardiv=$("div");div.animate({height:'300px',opacity:'0.4'},"slow");div.animate({width:'300px',opacity:'0.8'},"slow");div.animate({height:'100px',opacity:'0.4'},"slow");div.animate({width:'100px',opacity:'0.8'},"slow");});});</script></head><body><button>開始動畫</button><p>默認(rèn)情況下，所有HTML元素的位置都是靜態(tài)的，并且無法移動。如需對位置進(jìn)行操作，記得首先把元素的CSSposition屬性設(shè)置為relative、fixed或absolute。</p><divstyle="background:#98bf21;height:100px;width:100px;position:absolute;"></div></body></html>----------------------------------------------------------------------------------------------實(shí)例6：<html><head><scriptsrc="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){$("button").click(function(){vardiv=$("div");div.animate({left:'100px'},"slow");div.animate({fontSize:'3em'},"slow");});});</script></head><body><button>開始動畫</button><p>默認(rèn)情況下，所有HTML元素的位置都是靜態(tài)的，并且無法移動。如需對位置進(jìn)行操作，記得首先把元素的CSSposition屬性設(shè)置為relative、fixed或absolute。</p><divstyle="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div></body></html>注：HTML元素默認(rèn)是靜態(tài)定位，且無法移動。如需使元素可以移動，請把CSS的position設(shè)置為relative或absolute。jQuery停止動畫stop〔〕jQuerystop()方法jQuerystop()方法用于停止動畫或效果，在它們完成之前。stop()方法適用于所有jQuery效果函數(shù)，包括滑動、淡入淡出和自定義動畫。實(shí)例1：<html><head><scriptsrc="/jquery/jquery-1.11.1.min.js"></script><script>

$(document).ready(function(){

$("#flip").click(function(){

$("#panel").slideDown(5000);

});

$("#stop").click(function(){

$("#panel").stop();

});});</script><styletype="text/css">

#panel,#flip{padding:5px;text-align:center;background-color:#e5eecc;border:solid1px#c3c3c3;}#panel{padding:50px;display:none;}</style></head><body><buttonid="stop">停止滑動</button><divid="flip">點(diǎn)擊這里，向下滑動面板</div><divid="panel">Helloworld!</div></body></html>--------------------------------------------------------實(shí)例2：<html>

<head>

<scriptsrc="/jquery/jquery-1.11.1.min.js"></script>

$(document).ready(function(){

$("#start").click(function(){

$("div").animate({left:'100px'},5000);$("div").animate({fontSize:'3em'},5000);

});

$("#stop").click(function(){

$("div").stop();

});

$("#stop2").click(function(){

$("div").stop(true);

});

$("#stop3").click(function(){

$("div").stop(true,true);

});

</script>

</head>

<body>

<buttonid="start">開始</button>

<buttonid="stop">停止</button>

<buttonid="stop2">停止所有</button>

<buttonid="stop3">停止但要完成</button>

<p><b>"開始"</b>按鈕會啟動動畫。</p>

<p><b>"停止"</b>按鈕會停止當(dāng)前活動的動畫，但允許已排隊的動畫向前執(zhí)行。</p>

<p><b>"停止所有"</b>按鈕停止當(dāng)前活動的動畫，并清空動畫隊列；因此元素上的所有動畫都會停止。</p>

<p><b>"停止但要完成"</b>會立即完成當(dāng)前活動的動畫，然后停下來。</p>

<divstyle="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>

</body>

</html>------------------------------------------------------------------------實(shí)例3：<html>

<head>

<scriptsrc="/jquery/jquery-1.11.1.min.js"></script>

$(document).ready(function(){

$("#flip").click(function(){

$("#panel").slideDown(5000);

});

$("#stop").click(function(){

$("#panel").stop();

});

</script>

<styletype="text/css">

#panel,#flip{

padding:5px;

text-align:center;

background-color:#e5eecc;

border:solid1px#c3c3c3;

}

#panel{

padding:50px;

display:none;

}

</style>

</head>

<body>

<buttonid="stop">停止滑動</button>

<divid="flip">點(diǎn)擊這里，向下滑動面板</div>

<divid="panel">Helloworld!</div>

</body>

</html>jQueryCallback函數(shù)jQuery動畫的問題：由于JavaScript語句〔指令〕是逐一執(zhí)行的-按照次序，動畫之后的語句可能會產(chǎn)生錯誤或頁面沖突，因為動畫還沒有完成。為了防止這個情況，您可以以參數(shù)的形式添加Callback函數(shù)。當(dāng)動畫100%完成后，即調(diào)用Callback函數(shù)。實(shí)例：<html><head><scripttype="text/javascript"src="/jquery/jquery.js"></script><scripttype="text/javascript">$(document).ready(function(){

$("button").click(function(){$("p").hide(1000,function(){

alert("Theparagraphisnowhidden");

});

});});</script></head><body><buttontype="button">Hide</button><p>Thisisaparagraphwithlittlecontent.</p></body></html>jQuery-Chaining通過jQuery，您可以把動作/方法鏈接起來。Chaining允許我們在一條語句中允許多個jQuery方法〔在相同的元素上〕。實(shí)例1：<html><head><scriptsrc="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function()

{

$("button").click(function(){

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

});});</script></head><body><pid="p1">jQuery樂趣十足！</p><button>點(diǎn)擊這里</button></body></html>效果："p1"元素首先會變?yōu)榧t色，然后向上滑動，然后向下滑動。---------------------------------------------------------------------------------------------------------------實(shí)例2：<html>

<head>

<scriptsrc="/jquery/jquery-1.11.1.min.js"></script>

$(document).ready(function(){

$("button").click(function(){

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

});

});</script>

</head>

<body>

<pid="p1">jQuery樂趣十足！</p>

</body>

</html>

效果：同實(shí)例1.jQuery效果函數(shù)Hide/Show描述show()顯示被選的元素hide()隱藏被選的元素toggle()對被選元素進(jìn)行隱藏和顯示的切換

Slide

slideDown()通過調(diào)整高度來滑動顯示被選元素slideUp()通過調(diào)整高度來滑動隱藏被選元素slideToggle()對被選元素進(jìn)行滑動隱藏和滑動顯示的切換

Fadein/out

fadeIn()淡入被選元素至完全不透明fadeOut()淡出被選元素至完全不透明fadeTo()把被選元素減弱至給定的不透明度

Animation

animate()對被選元素應(yīng)用“自定義〞的動畫stop()停止在被選元素上運(yùn)行動畫

Queue

clearQueue()對被選元素移除所有排隊的函數(shù)〔仍未運(yùn)行的〕delay()對被選元素的所有排隊函數(shù)〔仍未運(yùn)行〕設(shè)置延遲dequeue()運(yùn)行被選元素的下一個排隊函數(shù)queue()顯示被選元素的排隊函數(shù)===================================================================jQueryHTMLjQueryDOM操作jQuery中非常重要的局部，就是操作DOM的能力。jQuery提供一系列與DOM相關(guān)的方法，這使訪問和操作元素和屬性變得很容易。提示：DOM=DocumentObjectModel〔文檔對象模型〕DOM定義訪問HTML和XML文檔的標(biāo)準(zhǔn)：“W3C文檔對象模型獨(dú)立于平臺和語言的界面，允許程序和腳本動態(tài)訪問和更新文檔的內(nèi)容、結(jié)構(gòu)以及樣式。〞獲得內(nèi)容-text()、html()以及val()三個簡單實(shí)用的用于DOM操作的jQuery方法：text()-設(shè)置或返回所選元素的文本內(nèi)容html()-設(shè)置或返回所選元素的內(nèi)容〔包括HTML標(biāo)記〕val()-設(shè)置或返回表單字段的值<html><head><scriptsrc="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){

$("#btn1").click(function(){

alert("Text:"+$("#test").text());

});

$("#btn2").click(function(){

alert("HTML:"+$("#test").html());

});});</script></head><body><pid="test">這是段落中的<b>粗體</b>文本。</p><buttonid="btn1">顯示文本</button><buttonid="btn2">顯示HTML</button></body></html>----------------------------------------------------------------------------------------<html><head><scriptsrc="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){

$("button").click(function(){

alert("Value:"+$("#test").val());

});});</script></head><body><p>姓名：<inputtype="text"id="test"value="米老鼠"></p><button>顯示值</button></body></html>--------------------------------------------------------------------------<html>

<head>

<scriptsrc="/jquery/jquery-1.11.1.min.js"></script>

$(document).ready(function(){

$("button").click(function(){

alert($("#w3s").attr("href"));

});

</script>

</head>

<body>

<p><ahref="://w3school"id="w3s">W3School</a></p>

<button>顯示href值</button>

</body>

</html>

-----------------------------------------------------------------------------------------------jQuery-設(shè)置內(nèi)容和屬性設(shè)置內(nèi)容-text()、html()以及val()我們將使用前一章中的三個相同的方法來設(shè)置內(nèi)容：text()-設(shè)置或返回所選元素的文本內(nèi)容html()-設(shè)置或返回所選元素的內(nèi)容〔包括HTML標(biāo)記〕val()-設(shè)置或返回表單字段的值<html>

<head>

<scriptsrc="/jquery/jquery-1.11.1.min.js"></script>

$(document).ready(function(){

$("#btn1").click(function(){

$("#test1").text("Helloworld!");

});

$("#btn2").click(function(){

$("#test2").html("<b>Helloworld!</b>");

});

$("#btn3").click(function(){

$("#test3").val("DollyDuck");

});

</script>

</head>

<body>

<pid="test1">這是段落。</p>

<pid="test2">這是另一個段落。</p>

<p>Inputfield:<inputtype="text"id="test3"value="MickeyMouse"></p>

<buttonid="btn1">設(shè)置文本</button>

<buttonid="btn2">設(shè)置HTML</button>

<buttonid="btn3">設(shè)置值</button>

</body>

</html>--------------------------------------------------------------------------<html>

<head>

<scriptsrc="/jquery/jquery-1.11.1.min.js"></script>

$(document).ready(function(){

$("#btn1").click(function(){

$("#test1").text(function(i,origText){

return"Oldtext:"+origText+"Newtext:Helloworld!(index:"+i+")";

});

$("#btn2").click(function(){

$("#test2").html(function(i,origText){

return"Oldhtml:"+origText+"Newhtml:Hello<b>world!</b>(index:"+i+")";

});

</script>

</head>

<body>

<pid="test1">這是<b>粗體</b>文本。</p>

<pid="test2">這是另一段<b>粗體</b>文本。</p>

<buttonid="btn1">顯示舊/新文本</button>

<buttonid="btn2">顯示舊/新HTML</button>

</body>

</html>-----------------------------------------------------------------------------------設(shè)置屬性-attr()jQueryattr()方法也用于設(shè)置/改變屬性值。<html>

<head>

<scriptsrc="/jquery/jquery-1.11.1.min.js"></script>

$(document).ready(function(){

$("button").click(function(){

$("#w3s").attr("href","://w3school/jquery");});

});

</script>

</head>

<body>

<p><ahref="://w3school"id="w3s">W3School</a></p>

<button>改變href值</button>

<p>請把鼠標(biāo)指針移動到鏈接上，或者點(diǎn)擊該鏈接，來查看已經(jīng)改變的href值。</p>

</body>

</html>--------------------------------------------------------------------------------------------------------------------<html>

<head>

<scriptsrc="/jquery/jquery-1.11.1.min.js"></script>

$(document).ready(function(){

$("button").click(function(){

$("#w3s").attr({"href":"://w3school/jquery/","title":"W3SchooljQuery教程"});});

});

</script>

</head>

<body>

<p><ahref="://w3school"id="w3s">W3School</a></p>

<button>改變href和title值</button>

<p>請把鼠標(biāo)指針移動到鏈接上，或者點(diǎn)擊該鏈接，來查看已經(jīng)改變的href值和已經(jīng)設(shè)置的title值。</p></body>

</html>-----------------------------------------------------------------------------------------------<html>

<head>

<scriptsrc="/jquery/jquery-1.11.1.min.js"></script><script>

$(document).ready(function(){

$("button").click(function(){

$("#w3s").attr("href",function(i,origValue){

returnorigValue+"/jquery";

});

</script>

</head>

<body>

<p><ahref="://w3school"id="w3s">w3school</a></p>

<button>改變href值</button>

<p>請把鼠標(biāo)指針移動到鏈接上，或者點(diǎn)擊該鏈接，來查看已經(jīng)改變的href值。</p>

</body>

</html>----------------------------------------------------------------------------------------jQuery-添加元素添加新內(nèi)容的四個jQuery方法：append()-在被選元素的結(jié)尾插入內(nèi)容prepend()-在被選元素的開頭插入內(nèi)容after()-在被選元素之后插入內(nèi)容before()-在被選元素之前插入內(nèi)容<html>

<head>

<scriptsrc="/jquery/jquery-1.11.1.min.js"></script>

$("#btn1").click(function(){

$("p").append("<b>Appendedtext</b>.");

});

$("#btn2").click(function(){

$("ol").append("<li>Appendeditem</li>");

});

</script>

</head>

<body>

<p>Thisisaparagraph.</p>

<p>Thisisanotherparagraph.</p>

<ol><li>Listitem1</li><li>Listitem2</li><li>Listitem3</li></ol>

<buttonid="btn1">追加文本</button>

<buttonid="btn2">追加列表項</button>

</body>

</html>

----------------------------------------------------------------------<html><head><scriptsrc="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(funct

人人文庫> 全部分類> 行業(yè)資料 > 管理策劃

溫馨提示

1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

jquery筆記(吐血整理)

文檔簡介

溫馨提示

最新文檔

評論

jquery筆記(吐血整理)

文檔簡介

溫馨提示

最新文檔

評論

相關(guān)文檔