Web編程基礎(chǔ) 第10章 jQuery學(xué)習(xí)資料_第1頁(yè)
Web編程基礎(chǔ) 第10章 jQuery學(xué)習(xí)資料_第2頁(yè)
Web編程基礎(chǔ) 第10章 jQuery學(xué)習(xí)資料_第3頁(yè)
Web編程基礎(chǔ) 第10章 jQuery學(xué)習(xí)資料_第4頁(yè)
Web編程基礎(chǔ) 第10章 jQuery學(xué)習(xí)資料_第5頁(yè)
已閱讀5頁(yè)，還剩75頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

第10章jQuery

內(nèi)容提要10.4jQuery的特效10.3jQuery的事件處理10.2jQuey選擇器10.1概述10.5jQuery操作DOM10.1概述隨著JavaScript、CSS、AJAX等技術(shù)的不斷進(jìn)步，出現(xiàn)了許多封裝好了的功能強(qiáng)大的JavaScript庫(kù)。jQuery是當(dāng)前最流行的JavaScript庫(kù)，它封裝了很多預(yù)定義的對(duì)象和實(shí)用函數(shù)。jQuery是一個(gè)輕量級(jí)的JavaScript庫(kù)，壓縮之后只有幾十K，它與CSS、瀏覽器兼容。利用jQuery，用戶可以更方便地處理HTML文檔、事件、實(shí)現(xiàn)動(dòng)畫效果、與AJAX交互及創(chuàng)建富有特性的客戶端頁(yè)面等。jQuery的理念是寫得更少，做得更多。即利用最少的代碼，做最多的事情。jQuery是免費(fèi)的、開源的。其源代碼中包含大量的注釋和說(shuō)明。其主要有以下特點(diǎn)：jQuery是一款輕量級(jí)的JavaScript框架，不影響頁(yè)面加載的速度；jQuery的選擇器使用方便，便于操作DOM對(duì)象的元素；jQuery的鏈?zhǔn)讲僮骺梢詫⒍鄠€(gè)操作寫在同一行代碼內(nèi)；jQuery簡(jiǎn)化了對(duì)CSS和AJAX的操作；jQuery兼容了主流的大部分瀏覽器；jQuery有豐富的第三方插件的支持，例如樹形菜單、日期控件、圖片切換工具等；jQuery具有很好的可擴(kuò)展性。用戶可以根據(jù)自己需要增加或修改函數(shù)；如果要使用jQuery，需要下載jQuery庫(kù)。jQuery庫(kù)是一個(gè)JavaScript文件，可以使用<script>標(biāo)簽進(jìn)行引用。jQuery有兩個(gè)版本，一個(gè)是Productionversion，用于實(shí)際的網(wǎng)站，已被精簡(jiǎn)和壓縮；另一個(gè)是Developmentversion，用于測(cè)試和開發(fā)，未經(jīng)壓縮，代碼可讀。兩個(gè)版本的jQuery庫(kù)都可以在http://jQ/download/下載。將下載之后的文件放在頁(yè)面文件目錄中，然后通過(guò)<scriptsrc=“jQuery-1.9.1.js”></script>進(jìn)行引用。除了jQuery，還有一些其它的JavaScript庫(kù)，如MooTools、Prototype、Dojo、DWR等。例如jq1.html，利用jQuery，在頁(yè)面成功加載之后彈出一個(gè)對(duì)話框。jq1.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>利用jQuery在頁(yè)面裝載完成后彈出一個(gè)對(duì)話框</title><scriptsrc="jQuery-1.9.1.js"></script><script>$(document).ready(function(){

alert("HelloWorld!");});</script></head><body></body></html>10.2jQuey選擇器在CSS中，選擇器（或選擇符）的作用是選擇頁(yè)面中的某一類元素或者某一個(gè)元素。jQuery中的選擇器使用“$”，也是選擇元素，但是其方式更全面，而且也不存在瀏覽器的兼容問題。jQuery選擇器允許通過(guò)標(biāo)簽名、屬性名或內(nèi)容對(duì)HTML元素進(jìn)行選擇或者修改HTML元素的樣式屬性。jQuery的選擇器很多，可以分為基本選擇器、層次選擇器、過(guò)濾選擇器和屬性過(guò)濾器。jQuery選擇器的通用語(yǔ)法為：$(selector)1．基本選擇器基本選擇器包括id選擇器、element選擇器、class選擇器、*選擇器以及并列選擇器等。（1）id選擇器

id選擇器可以根據(jù)指定id值返回一個(gè)唯一的元素。例如：$(“#my”)為選擇id值為my的第一個(gè)元素。例如jq2.html，當(dāng)單擊按鈕后，將id值為my的div的背景色設(shè)置成橙色。jq2.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>單擊按鈕改變一個(gè)DIV的背景色</title><scriptsrc="jquery-1.9.1.js"></script><scripttype="text/javascript">$(document).ready(function(){$("input").click(function(){$("#my").css("background-color","orange");});});</script></head><body><divid="my">這是一個(gè)id值為my的DIV</div><div>這是一個(gè)DIV，沒有指定id值</div><inputtype="button"value="改變第一個(gè)DIV的背景色"/></body></html>打開jq2.html，單擊按鈕后的顯示結(jié)果如圖所示。（2）element選擇器element選擇器可以根據(jù)HTML標(biāo)簽選擇一組元素。例如：$(“p”)為選擇頁(yè)面中所有的p元素；$(“input”)為選擇頁(yè)面中所有的input元素。例如jq3.html，當(dāng)單擊頁(yè)面上的元素時(shí)，被單擊的元素會(huì)隱藏。jq3.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>單擊按鈕，使按鈕消失</title><scriptsrc="jquery-1.9.1.js"></script><script>$(document).ready(function(){$("input").click(function(){$(this).hide();});});</script></head><body><inputtype="button"value="單擊我會(huì)消失"/><br/><inputtype="button"value="單擊我會(huì)消失"/><br/><inputtype="button"value="單擊我會(huì)消失"/><br/><inputtype="text"value="單擊我也會(huì)消失"/></body></html>使用瀏覽器打開jq3.html，顯示結(jié)果如圖所示。當(dāng)單擊元素時(shí)，被單擊的元素會(huì)在頁(yè)面上消失。（3）class選擇器class選擇器可以根據(jù)元素的css類選擇一組元素。例如：$(“.left”)為選擇頁(yè)面中所有的class為left的元素；$(“p.left”)為選擇頁(yè)面中所有的class為left的p元素；例如jq4.html，當(dāng)單擊按鈕時(shí)，更改所有class為left的元素的背景色。jq4.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>單擊按鈕改變一類DIV的背景色</title><scriptsrc="jquery-1.9.1.js"></script><styletype="text/css">.left{font-size:12px;background-color:#FFEBCD;}</style><scripttype="text/javascript">$(document).ready(function(){$("#change").click(function(){$(".left").css("background-color","orange");});});</script></head><body><divclass="left">這是一個(gè)class為left的DIV</div><div>這是一個(gè)DIV，沒有指定class值</div><divclass="left">這也是一個(gè)class為left的DIV</div><pclass="left">這是一個(gè)class為left的p</p><inputid="change"type="button"value="改變left類元素的背景色"/></body></html>jq4.html的顯示結(jié)果如圖所示。當(dāng)單擊按鈕后的顯示結(jié)果如圖所示。（4）*選擇器*選擇器可以遍歷頁(yè)面中所有的HTML元素。例如：$(“*”)為選擇頁(yè)面中所有的HTML元素；$(“table*”)為選擇頁(yè)面中table下的所有的元素；空格為不限層次數(shù)的層次選擇器，后文后有詳細(xì)介紹；$(“form*”)為選擇頁(yè)面中form下的所有的元素；（5）并列選擇器并列選擇器指的是使用逗號(hào)隔開的選擇符，彼此之間是并列關(guān)系。例如：$(“p,div”)為選擇頁(yè)面中所有的p元素和div元素；$(“#my,p,.left”)為選擇頁(yè)面中id為my的第一個(gè)元素、所有的p元素以及所有css的class為left的元素；2．層次選擇器層次選擇器可以根據(jù)頁(yè)面中的HTML元素之間的嵌套關(guān)系來(lái)選擇元素，主要包括ancestordescendant選擇器、parent>child選擇器、prev+next選擇器、prev~siblings選擇器。（1）ancestordescendant選擇器ancestordescendant選擇器指的是祖先子孫選擇器，選擇符之間使用空格隔開，不限制嵌套層次數(shù)。例如：$(“.leftp”)為選擇所有css類為left的元素中的所有的p元素；$(“forminput”)為選擇所有的form元素中的input元素；例如jq5.html，當(dāng)單擊按鈕時(shí)，更改div元素中所有的span元素的字體顏色。jq5.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>單擊按鈕改變div中所有span的字體顏色</title><scriptsrc="jquery-1.9.1.js"></script><scripttype="text/javascript">$(document).ready(function(){$("#change").click(function(){$("divspan").css("color","orange");});});</script></head><body><div><span>這是直接包含在div中的span</span><p><span>這是包含在div中的p中的span</span></p></div><span>這不是包含在div中的span</span><inputid="change"type="button"value="改變div中所有span的字體顏色"/></body></html>打開jq5.html，并單擊按鈕之后的顯示結(jié)果如圖所示，div中所有的span的字體顏色都會(huì)改變。（2）parent>child選擇器parent>child選擇器指的父子選擇器，中間使用“>”隔開，前后元素的嵌套關(guān)系只能是一層。例如：$(“div>p”)為選擇div元素內(nèi)直接嵌套的p元素；例如jq6.html，改變div中直接包含的span的字體顏色。jq6.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>單擊按鈕改變div中直接包含的span的字體顏色</title><scriptsrc="jquery-1.9.1.js"></script><scripttype="text/javascript">$(document).ready(function(){$("#change").click(function(){$("div>span").css("color","orange");});});</script></head><body><div><span>這是直接包含在div中的span</span><p><span>這是包含在div中的p中的span</span></p></div><span>這不是包含在div中的span</span><inputid="change"type="button"value="改變div中直接包含的span的字體顏色"/></body></html>打開jq6.html，并且單擊按鈕后的顯示結(jié)果如圖所示，只有直接包含在div中的span的字體顏色會(huì)改變。（3）prev+next選擇器prev+next選擇器可以選擇下一個(gè)同級(jí)的兄弟元素，prev和next是兩個(gè)同級(jí)別的元素，中間使用“+”分隔，選擇在prev元素后面的next元素，相當(dāng)于next()方法，例如： $(“#my+img”)為選擇id為my的元素后的第一個(gè)同級(jí)別img元素；相當(dāng)于： $(“#my”).next(“img”) $(“.left+div”)為選擇class為left的元素的下一個(gè)同級(jí)別div元素；相當(dāng)于： $(“.left”).next(“div”)例如jq7.html，改變class為left的下一個(gè)同級(jí)別div元素的字體顏色。jq7.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>單擊按鈕改變兄弟元素的字體顏色</title><scriptsrc="jquery-1.9.1.js"></script><styletype="text/css">.left{background-color:#FFEBCD;}body{font-size:12px;}</style><scripttype="text/javascript">$(document).ready(function(){$("#change").click(function(){$(".left+div").css("color","orange");});});</script></head><body><pclass="left">這是段落,class=left</p><div>class為left的元素后的第一個(gè)div元素</div><div>class為left的元素后的第二個(gè)div元素</div><spanclass="left">這是span,class=left</span><div>class為left元素后的第一個(gè)div元素</div><inputid="change"type="button"value="改變兄弟元素的字體顏色"/></body></html>在瀏覽器中打開jq7.html，單擊按鈕后的顯示結(jié)果如圖所示。（4）prev~siblings選擇器prev~siblings選擇器用于選擇prev元素的所有的兄弟元素，相當(dāng)于nextAll()方法，可以選擇出現(xiàn)在prev元素之后的和其為同一級(jí)別的所有的元素。例如：

$(“#my~img”)為選擇id為my的元素后的所有的同級(jí)別img元素；相當(dāng)于：

$(“#my”).nextAll(“img”) $(“.left~div”)為選擇class為left的元素之后的所有同級(jí)別的div元素；相當(dāng)于：

$(“.left”).nextAll(“div”)例如jq8.html，改變所有兄弟元素的字體顏色。jq8.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>單擊按鈕改變所有兄弟元素的字體顏色</title><scriptsrc="jquery-1.9.1.js"></script><styletype="text/css">.left{background-color:#FFEBCD;}body{font-size:12px;}</style><scripttype="text/javascript">$(document).ready(function(){$("#change").click(function(){$(".left~div").css("color","orange");});});</script></head><body><pclass="left">這是段落,class=left</p><div>class為left的元素后的第一個(gè)div元素</div><div>class為left的元素后的第二個(gè)div元素</div><spanclass="left">這是span,class=left</span><div>class為left元素后的第一個(gè)div元素</div><inputid="change"type="button"value="改變所有兄弟元素的字體顏色"/></body></html>在瀏覽器中打開jq8.html，并單擊按鈕后的顯示結(jié)果如圖所示。3．過(guò)濾選擇器過(guò)濾選擇器可分為基本過(guò)濾器、內(nèi)容過(guò)濾器、可見性過(guò)濾器、屬性過(guò)濾器等。過(guò)濾選擇器可以根據(jù)元素的內(nèi)容和索引等對(duì)元素進(jìn)行選擇。（1）基本過(guò)濾器基本過(guò)濾器可以根據(jù)元素的特點(diǎn)和索引選擇元素，基本過(guò)濾器如表所示。選擇器說(shuō)明:first匹配找到的第一個(gè)元素:last匹配找到的最后一個(gè)元素:not(selector)去除所有與給定選擇器匹配的元素:even匹配所有索引值為偶數(shù)的元素，例如$(“tr:even”):odd匹配所有索引值為奇數(shù)的元素，例如$(“tr:odd”):eq(index)匹配一個(gè)給定索引值的元素:gt(index)匹配所有大于給定索引值的元素:lt(index)匹配所有小于給定索引值的元素:header匹配所有標(biāo)題:animated匹配所有正在執(zhí)行動(dòng)畫效果的元素例如jq9.html，當(dāng)單擊按鈕時(shí)，使表格按行間隔變色。jq9.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>單擊按鈕使表格間隔變色</title><scriptsrc="jquery-1.9.1.js"></script><scripttype="text/javascript">$(document).ready(function(){$("#change").click(function(){ $("tr:even").css("background","#FFFAF0"); $("tr:odd").css("background","#DCDCDC");});});</script></head><body><tablewidth="200"><tr><td>第一行</td></tr><tr><td>第二行</td></tr><tr><td>第三行</td></tr><tr><td>第四行</td></tr><tr><td>第五行</td></tr></table><inputid="change"type="button"value="表格按行間隔變色"/></body></html>在瀏覽器中打開jq9.html，單擊按鈕后的顯示結(jié)果如圖所示。（2）內(nèi)容過(guò)濾器內(nèi)容過(guò)濾器可以根據(jù)元素包含的文字內(nèi)容選擇元素，內(nèi)容過(guò)濾器及其說(shuō)明如表所示。選擇器說(shuō)明:contains(text)匹配包含給定文本的元素:empty()匹配所有不包含子元素或者文本的空元素:has(selector)匹配含有選擇器所匹配的元素的元素:parent()匹配含有子元素或者文本的元素，與:empty()相反例如jq10.html，當(dāng)單擊按鈕時(shí)，選擇表格中包含apple的單元格，并更改樣式。jq10.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>單擊按鈕選擇包含特定文字的單元格</title><scriptsrc="jquery-1.9.1.js"></script><styletype="text/css">td{font-size:16px;border:1pxsolid#FF9600;}</style><scripttype="text/javascript">$(document).ready(function(){$("#change").click(function(){ $("td:contains('apple')").css("color","red"); $("td:contains('apple')").css("background-color","#FFF0F5");});});</script></head><body><tablewidth="200"><tr><td>pear</td><td>apple</td></tr><tr><td>apple&pear</td><td>peach</td></tr><tr><td>banana</td><td>grape</td></tr><tr><td>plum</td><td>apple</td></tr><tr><td>apple&grape</td><td>coconut</td></tr></table><inputid="change"type="button"value="使包含apple的單元格文字變色"/></body></html>在瀏覽器中打開jq10.html，單擊按鈕后的顯示結(jié)果如圖所示。（3）可見性過(guò)濾器可見性過(guò)濾器可以根據(jù)元素的可見性進(jìn)行選擇，可見性過(guò)濾器包括:hidden和:visible。:hidden可以匹配所有不可見的元素，:visible可以匹配所有可見的元素。例如：$(“td:hidden”)為匹配所有不可見的td元素；$(“td:visible”)為匹配所有可見的td元素；（4）屬性過(guò)濾器屬性過(guò)濾器可以根據(jù)元素的屬性值匹配元素，屬性過(guò)濾器及其說(shuō)明如表所示。選擇器說(shuō)明[attribute]匹配包含給定屬性的元素[attribute=value]匹配給定屬性為特定值的元素[attribute!=value]匹配給定屬性不等于特定值的元素[attribute^=value]匹配給定屬性是以特定值開頭的元素[attribute$=value]匹配給定屬性是以特定值結(jié)尾的元素[attribute*=value]匹配給定屬性包含特定值的元素[attributeFilter1][attributeFilter2][…]復(fù)合屬性選擇器，匹配屬性同時(shí)滿足多個(gè)條件的元素例如jq11.html，在頁(yè)面加載完成時(shí)，更改所有包含href屬性的a元素的樣式。jq11.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>在頁(yè)面裝載完成后更改部分超級(jí)鏈接的樣式</title><scriptsrc="jquery-1.9.1.js"></script><script>$(document).ready(function(){ $("a[title]").css("color","#FF9600"); $("a[title]").css("font-size","12px"); $("a[title]").css("text-decoration","none");});</script></head><body><ahref="#"title="first">第一個(gè)包含title屬性的a元素</a><br/><ahref="#">第一個(gè)不包含title屬性的a元素</a><br/><ahref="#"title="second">第二個(gè)包含title屬性的a元素</a><br/><ahref="#">第二個(gè)不包含title屬性的a元素</a><br/><ahref="#"title="third">第三個(gè)包含title屬性的a元素</a></body></html>在瀏覽器中打開jq11.html，其顯示結(jié)果如圖所示。4．表單選擇器表單選擇器用于選擇表單中的元素，包括的選擇器如表所示。選擇器說(shuō)明:input匹配所有的<input>元素:text匹配所有的type=“text”的<input>元素:password匹配所有的type=“password”的<input>元素:radio匹配所有的type=“radio”的<input>元素:checkbox匹配所有的type=“checkbox”的<input>元素:submit匹配所有的type=“submit”的<input>元素:reset匹配所有的type=“reset”的<input>元素:button匹配所有的type=“button”的<input>元素:image匹配所有的type=“image”的<input>元素:file匹配所有的type=“file”的<input>元素:enabled匹配所有激活的<input>元素:disabled匹配所有禁用的<input>元素:selected匹配所有被選取的<input>元素:checked匹配所有被選中的<input>元素10.3jQuery的事件處理jQuery是專門為事件處理而設(shè)計(jì)的，事件處理程序是當(dāng)HTML頁(yè)面中發(fā)生某些事件時(shí)所調(diào)用的方法。在jQuery中，通常把事件處理放置在HTML頁(yè)面中的<head>部分。為了增加代碼的可重用性，也可以將jQuery的事件處理程序放置在單獨(dú)的JavaScript文件中，然后在需要引用的文件中引用。jQuery中常用的事件及其說(shuō)明如表所示。Event函數(shù)說(shuō)明$(document).ready(function)將函數(shù)綁定到文檔的加載完成事件$(selector).click(function)觸發(fā)或?qū)⒑瘮?shù)綁定到元素的onClick事件$(selector).focus(function)觸發(fā)或?qū)⒑瘮?shù)綁定到元素的onFocus事件$(selector).blur(function)觸發(fā)或?qū)⒑瘮?shù)綁定到元素的onBlur事件$(selector).change(function)觸發(fā)或?qū)⒑瘮?shù)綁定到元素的onChange事件$(selector).keydown(function)觸發(fā)或?qū)⒑瘮?shù)綁定到元素的onKeyDown事件$(selector).keypress(function)觸發(fā)或?qū)⒑瘮?shù)綁定到元素的onKeyPress事件$(selector).keyup(function)觸發(fā)或?qū)⒑瘮?shù)綁定到元素的onKeyUp事件$(selector).mousedown(function)觸發(fā)或?qū)⒑瘮?shù)綁定到元素的onMouseDown事件$(selector).mousemove(function)觸發(fā)或?qū)⒑瘮?shù)綁定到元素的onMouseMove事件$(selector).mouseout(function)觸發(fā)或?qū)⒑瘮?shù)綁定到元素的onMouseOut事件$(selector).mouseover(function)觸發(fā)或?qū)⒑瘮?shù)綁定到元素的onMouseOver事件$(selector).mouseup(function)觸發(fā)或?qū)⒑瘮?shù)綁定到元素的onMouseUp事件$(selector).submit(function)觸發(fā)或?qū)⒑瘮?shù)綁定到元素的onSubmit事件$(selector).toggle(event,function)綁定兩個(gè)或多個(gè)事件處理函數(shù)，當(dāng)發(fā)生輪流的onClick事件時(shí)執(zhí)行$(selector).bind(event,function)向匹配元素附加一個(gè)或更多的事件處理器$(selector).unbind(event,function)從匹配元素移除一個(gè)被添加的事件處理器$(selector).one(event,function)向匹配元素添加事件處理器，每個(gè)元素只能觸發(fā)一次該處理器例如jq12.html，單擊按鈕時(shí)顯示半透明的DIV，DIV可以隨鼠標(biāo)的移動(dòng)而移動(dòng)。jq12.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><title>可以移動(dòng)的半透明DIV</title><metahttp-equiv="content-type"content="text/html;charset=UTF-8"><scriptsrc="jquery-1.9.1.js"></script><scripttype="text/javascript">

varshow=function(){ $("body").append("<divid='mydiv'style='background:#00BFFF;position:absolute;width:100;height:100'>可以拖動(dòng)的半透明div</div>"); $("#mydiv").fadeTo("slow",0.5); $("#mydiv").mousedown(function(event){

varoffset=$("#mydiv").offset(); x1=event.clientX-offset.left; y1=event.clientY-offset.top; $("#mydiv").mousemove(function(event){ $("#mydiv").css("left",(event.clientX-x1)+"px"); $("#mydiv").css("top",(event.clientY-y1)+"px"); }); $("#mydiv").mouseup(function(event){ $("#mydiv").unbind("mousemove"); }); }); }</script></head><body><inputtype=buttonvalue="顯示DIV"onclick="show()"/></body></html>在瀏覽器中打開jq12.html，顯示結(jié)果如圖所示，使用鼠標(biāo)拖動(dòng)之后的顯示結(jié)果如圖所示。10.4jQuery的特效使用jQuery可以很方便地實(shí)現(xiàn)頁(yè)面元素的特殊效果，比如隱藏、顯示、淡入、淡出、滑動(dòng)以及動(dòng)畫等。1．隱藏和顯示jQuery中的show()方法和hide()方法可以控制元素的顯示和隱藏。其語(yǔ)法如下：$(selector).hide(speed,callback);$(selector).show(speed,callback);其中，speed是可選參數(shù)，表示顯示或者隱藏的速度，可取slow、fast或者以毫秒為單位的數(shù)值；callback是可選參數(shù)，表示顯示或者隱藏后需要執(zhí)行的函數(shù)名稱。例如jq13.html實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的下拉面板。jq13.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>一個(gè)簡(jiǎn)單的下拉面板</title><scriptsrc="jquery-1.9.1.js"></script><styletype="text/css">#first{

position:absolute;left:20px;top:20px;width:120px;height:20px;background-color:#FF99CC;font-size:14px;font-family:楷體;text-align:center;}#second{

position:absolute;left:20px;top:40px;width:150px;height:80px;background-color:#99CC00;border:2pxsolid#FF99CC;font-size:18px;font-family:楷體;text-align:center;}</style><script>$(document).ready(function(){ $("#first").click(function(){ $("#second").slideToggle("slow"); });});</script></head><body><divid="first">隱藏/顯示面板</div><divid="second">

春眠不覺曉，<br/>

處處聞啼鳥。<br/>

夜來(lái)風(fēng)雨聲，<br/>

花落知多少。<br/></div></body></html>在瀏覽器中打開jq13.html，其顯示結(jié)果如圖所示，單擊“隱藏/顯示面板”顯示結(jié)果如圖所示。2．淡入和淡出jQuery可以很方便地實(shí)現(xiàn)元素的淡入和淡出的效果。（1）淡入效果jQuery的fadeIn()方法用于實(shí)現(xiàn)淡入已隱藏的元素。其語(yǔ)法如下：$(selector).fadeIn(speed,callback);（2）淡出效果jQuery的fadeOut()方法用于實(shí)現(xiàn)淡出可見的元素。其語(yǔ)法如下：$(selector).fadeOut(speed,callback);（3）淡入和淡出切換效果jQuery的fadeToggle()方法可以在淡入和淡出之間切換。如果元素已淡出，則執(zhí)行fadeToggle()會(huì)使元素淡入；如果元素已淡入，則執(zhí)行fadeToggle()會(huì)使元素淡出。其語(yǔ)法如下：$(selector).fadeToggle(speed,callback);（4）漸變效果jQuery的fadeTo()方法可以實(shí)現(xiàn)元素的漸變效果。其語(yǔ)法如下：$(selector).fadeTo(speed,opacity,callback);其中，speed和callback同以上其它方法中的參數(shù)；opacity指的是漸變的不透明度，取值范圍為0~1。例如js14.html為jQuery的淡入和淡出的效果實(shí)例。js14.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>淡入淡出效果</title><scriptsrc="jquery-1.9.1.js"></script><style>input{width:80px;}</style><script>$(document).ready(function(){ $("#fIn").click(function(){ $("#div").fadeIn("slow"); }); $("#fOut").click(function(){ $("#div").fadeOut("slow"); }); $("#fToggle").click(function(){ $("#div").fadeToggle("slow"); }); $("#fTo").click(function(){ $("#div").fadeTo("slow",0.2); });});</script></head><body><inputid="fIn"type="button"value="淡入"/><br/><inputid="fOut"type="button"value="淡出"/><br/><inputid="fToggle"type="button"value="淡入/淡出"/><br/><inputid="fTo"type="button"value="漸變"/><divid="div"style="position:absolute;top:15px;left:100px;width:100px;height:100px;background-color:red"></div></body></html>在瀏覽器中打開jq14.html頁(yè)面，顯示效果如圖所示。單擊相應(yīng)的按鈕可以實(shí)驗(yàn)不同的淡入淡出效果。3．滑動(dòng)效果使用jQuery可以實(shí)現(xiàn)元素的滑動(dòng)效果。（1）向下滑動(dòng)向下滑動(dòng)使用slideDown()方法實(shí)現(xiàn)，其語(yǔ)法如下：$(selector).slideDown(speed,callback);其中，speed和callback的含義同前文中的方法。（2）向上滑動(dòng)向上滑動(dòng)使用slideUp()方法實(shí)現(xiàn)，其語(yǔ)法如下：$(selector).slideUp(speed,callback);（3）向下或向上滑動(dòng)如果要在向下滑動(dòng)和向上滑動(dòng)之間切換，可以使用slideToggle()方法，其語(yǔ)法如下：$(selector).slideToggle(speed,callback);jq15.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>滑動(dòng)效果</title><scriptsrc="jquery-1.9.1.js"></script><style>input{width:100px;}</style><script>$(document).ready(function(){ $("#sDown").click(function(){ $("#div").slideDown("slow"); }); $("#sUp").click(function(){ $("#div").slideUp("slow"); }); $("#sToggle").click(function(){ $("#div").slideToggle("slow"); });});</script></head><body><inputid="sDown"type="button"value="向下滑動(dòng)"/><br/><inputid="sUp"type="button"value="向上滑動(dòng)"/><br/><inputid="sToggle"type="button"value="向下/向上滑動(dòng)"/><br/><divid="div"style="position:absolute;top:15px;left:115px;width:100px;height:100px;background-color:red"></div></body></html>在瀏覽器中打開jq15.html，其顯示結(jié)果如圖所示。4．動(dòng)畫效果使用jQuery的animate()方法可以創(chuàng)建自定義的動(dòng)畫，其語(yǔ)法如下：$(selector).animate({params},duration,easing,callback);其中：params是必需的參數(shù)，可以定義形成動(dòng)畫的CSS屬性；speed是可選參數(shù)，指動(dòng)畫的時(shí)長(zhǎng)，可取slow、fast或者以毫秒計(jì)的數(shù)值；callback是可選參數(shù)，指動(dòng)畫完成之后執(zhí)行的函數(shù)；在animate()方法中，可以同時(shí)操作一個(gè)元素的幾乎全部的CSS屬性，也可以為一個(gè)元素指定多個(gè)animate()效果。例如jq16.html，給div添加動(dòng)畫效果。jq16.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>滑動(dòng)效果</title><scriptsrc="jquery-1.9.1.js"></script><style>input{width:100px;}</style><script>$(document).ready(function(){ $("#startAnimate").click(function(){

vardiv=$("#div"); div.animate({width:'100px',height:'50px',left:'100px',opacity:0.4},"slow"); div.animate({width:'50px',height:'50px',left:'50px',opacity:0.8},"slow"); div.animate({width:'50px',height:'50px',left:'16px',opacity:1},"slow"); });});</script></head><body><inputid="startAnimate"type="button"value="開始動(dòng)畫"/><br/><divid="div"style="position:absolute;width:100px;height:100px;background-color:red"></div></body></html>在瀏覽器中打開jq16.html，其顯示效果如圖所示。單擊按鈕可以演示動(dòng)畫效果。10.5jQuery操作DOM使用jQuery可以方便地操作DOM，包括讀寫頁(yè)面元素的內(nèi)容或?qū)傩?，修改?yè)面元素，操作元素的CSS屬性等。在jQuery中，可以使用以下方法返回或設(shè)置元素的內(nèi)容和屬性：$(selector).text()方法用于返回或設(shè)置元素的文本內(nèi)容；$(selector).html()方法用于返回或設(shè)置元素的內(nèi)容（包括HTML標(biāo)記在內(nèi)）；$(selector).val()方法用于返回或設(shè)置表單字段的值；$(selector).attr()方法用于返回或者設(shè)置元素的屬性值；$(selector).removeAttr()方法移除元素的屬性。例如jq17.html，使用jQuery讀取表單中控件的值。jq17.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>讀取元素的屬性值</title><scriptsrc="jquery-1.9.1.js"></script><styletype="text/css">body{font-size:12px;}input{border:1pxsolid#CC6699;width:100px;}</style><script>$(document).ready(function(){ $("input[type=button]").click(function(){

varname=$("#name").val();

var

pwd=$("#pwd").val(); $("#msg").text("name:"+name+",pwd:"+pwd); });});</script></head><body><form>

用戶名：<inputtype="text"id="name"/><br/>

密    碼：<inputtype="password"id="pwd"/><br/><inputtype="button"value="確定"/></form><divid="msg"></div></body></html>在瀏覽器中打開jq17.html，輸入用戶名和密碼，單擊確定后的顯示結(jié)果如圖所示。10.5.2jQuery更改頁(yè)面元素利用jQuery可以方便地在頁(yè)面中添加新元素或者刪除頁(yè)面中已有的元素。其常用方法及其說(shuō)明如表所示。方法說(shuō)明after()在選擇的元素之后插入內(nèi)容append()在選擇的元素集合中的元素結(jié)尾插入內(nèi)容appendTo()向目標(biāo)結(jié)尾插入選擇元素集合中的元素before()在選擇的元素之前插入內(nèi)容insertAfter()把選擇的元素插入到另一個(gè)指定元素集合的后面insertBefore()把選擇的元素插入到另一個(gè)指定元素集合的前面prepend()向選擇元素集合中的元素的開頭插入內(nèi)容prependTo()向目標(biāo)開頭插入選擇元素集合replaceAll()用匹配的元素替換所有匹配到的元素replaceWith()用新內(nèi)容替換匹配的內(nèi)容wrap()把選擇的元素用指定的內(nèi)容包裹起來(lái)wrapAll()把所有的匹配的元素用指定的內(nèi)容包裹起來(lái)wrapinner()把每一個(gè)匹配的元素的子元素使用指定的內(nèi)容包裹起來(lái)remove()刪除匹配元素及其子元素empty()刪除匹配元素的子元素例如jq18.html，在段落的后面和列表前面添加新元素。jq18.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>操作頁(yè)面元素</title><scriptsrc="jquery-1.9.1.js"></script><script>$(document).ready(function(){ $("#addText").click(function(){ $("p").append("<fontcolor='#9933FF'>這是新追加的內(nèi)容</fo

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論