Web編程基礎 第10章 jQuery學習資料_第1頁
Web編程基礎 第10章 jQuery學習資料_第2頁
Web編程基礎 第10章 jQuery學習資料_第3頁
Web編程基礎 第10章 jQuery學習資料_第4頁
Web編程基礎 第10章 jQuery學習資料_第5頁
已閱讀5頁，還剩75頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第10章jQuery

內容提要10.4jQuery的特效10.3jQuery的事件處理10.2jQuey選擇器10.1概述10.5jQuery操作DOM10.1概述隨著JavaScript、CSS、AJAX等技術的不斷進步，出現了許多封裝好了的功能強大的JavaScript庫。jQuery是當前最流行的JavaScript庫，它封裝了很多預定義的對象和實用函數。jQuery是一個輕量級的JavaScript庫，壓縮之后只有幾十K，它與CSS、瀏覽器兼容。利用jQuery，用戶可以更方便地處理HTML文檔、事件、實現動畫效果、與AJAX交互及創建富有特性的客戶端頁面等。jQuery的理念是寫得更少，做得更多。即利用最少的代碼，做最多的事情。jQuery是免費的、開源的。其源代碼中包含大量的注釋和說明。其主要有以下特點：jQuery是一款輕量級的JavaScript框架，不影響頁面加載的速度；jQuery的選擇器使用方便，便于操作DOM對象的元素；jQuery的鏈式操作可以將多個操作寫在同一行代碼內；jQuery簡化了對CSS和AJAX的操作；jQuery兼容了主流的大部分瀏覽器；jQuery有豐富的第三方插件的支持，例如樹形菜單、日期控件、圖片切換工具等；jQuery具有很好的可擴展性。用戶可以根據自己需要增加或修改函數；如果要使用jQuery，需要下載jQuery庫。jQuery庫是一個JavaScript文件，可以使用<script>標簽進行引用。jQuery有兩個版本，一個是Productionversion，用于實際的網站，已被精簡和壓縮；另一個是Developmentversion，用于測試和開發，未經壓縮，代碼可讀。兩個版本的jQuery庫都可以在http://jQ/download/下載。將下載之后的文件放在頁面文件目錄中，然后通過<scriptsrc=“jQuery-1.9.1.js”></script>進行引用。除了jQuery，還有一些其它的JavaScript庫，如MooTools、Prototype、Dojo、DWR等。例如jq1.html，利用jQuery，在頁面成功加載之后彈出一個對話框。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在頁面裝載完成后彈出一個對話框</title><scriptsrc="jQuery-1.9.1.js"></script><script>$(document).ready(function(){

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

id選擇器可以根據指定id值返回一個唯一的元素。例如：$(“#my”)為選擇id值為my的第一個元素。例如jq2.html，當單擊按鈕后，將id值為my的div的背景色設置成橙色。jq2.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><scripttype="text/javascript">$(document).ready(function(){$("input").click(function(){$("#my").css("background-color","orange");});});</script></head><body><divid="my">這是一個id值為my的DIV</div><div>這是一個DIV，沒有指定id值</div><inputtype="button"value="改變第一個DIV的背景色"/></body></html>打開jq2.html，單擊按鈕后的顯示結果如圖所示。（2）element選擇器element選擇器可以根據HTML標簽選擇一組元素。例如：$(“p”)為選擇頁面中所有的p元素；$(“input”)為選擇頁面中所有的input元素。例如jq3.html，當單擊頁面上的元素時，被單擊的元素會隱藏。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="單擊我會消失"/><br/><inputtype="button"value="單擊我會消失"/><br/><inputtype="button"value="單擊我會消失"/><br/><inputtype="text"value="單擊我也會消失"/></body></html>使用瀏覽器打開jq3.html，顯示結果如圖所示。當單擊元素時，被單擊的元素會在頁面上消失。（3）class選擇器class選擇器可以根據元素的css類選擇一組元素。例如：$(“.left”)為選擇頁面中所有的class為left的元素；$(“p.left”)為選擇頁面中所有的class為left的p元素；例如jq4.html，當單擊按鈕時，更改所有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">這是一個class為left的DIV</div><div>這是一個DIV，沒有指定class值</div><divclass="left">這也是一個class為left的DIV</div><pclass="left">這是一個class為left的p</p><inputid="change"type="button"value="改變left類元素的背景色"/></body></html>jq4.html的顯示結果如圖所示。當單擊按鈕后的顯示結果如圖所示。（4）*選擇器*選擇器可以遍歷頁面中所有的HTML元素。例如：$(“*”)為選擇頁面中所有的HTML元素；$(“table*”)為選擇頁面中table下的所有的元素；空格為不限層次數的層次選擇器，后文后有詳細介紹；$(“form*”)為選擇頁面中form下的所有的元素；（5）并列選擇器并列選擇器指的是使用逗號隔開的選擇符，彼此之間是并列關系。例如：$(“p,div”)為選擇頁面中所有的p元素和div元素；$(“#my,p,.left”)為選擇頁面中id為my的第一個元素、所有的p元素以及所有css的class為left的元素；2．層次選擇器層次選擇器可以根據頁面中的HTML元素之間的嵌套關系來選擇元素，主要包括ancestordescendant選擇器、parent>child選擇器、prev+next選擇器、prev~siblings選擇器。（1）ancestordescendant選擇器ancestordescendant選擇器指的是祖先子孫選擇器，選擇符之間使用空格隔開，不限制嵌套層次數。例如：$(“.leftp”)為選擇所有css類為left的元素中的所有的p元素；$(“forminput”)為選擇所有的form元素中的input元素；例如jq5.html，當單擊按鈕時，更改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，并單擊按鈕之后的顯示結果如圖所示，div中所有的span的字體顏色都會改變。（2）parent>child選擇器parent>child選擇器指的父子選擇器，中間使用“>”隔開，前后元素的嵌套關系只能是一層。例如：$(“div>p”)為選擇div元素內直接嵌套的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，并且單擊按鈕后的顯示結果如圖所示，只有直接包含在div中的span的字體顏色會改變。（3）prev+next選擇器prev+next選擇器可以選擇下一個同級的兄弟元素，prev和next是兩個同級別的元素，中間使用“+”分隔，選擇在prev元素后面的next元素，相當于next()方法，例如： $(“#my+img”)為選擇id為my的元素后的第一個同級別img元素；相當于： $(“#my”).next(“img”) $(“.left+div”)為選擇class為left的元素的下一個同級別div元素；相當于： $(“.left”).next(“div”)例如jq7.html，改變class為left的下一個同級別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的元素后的第一個div元素</div><div>class為left的元素后的第二個div元素</div><spanclass="left">這是span,class=left</span><div>class為left元素后的第一個div元素</div><inputid="change"type="button"value="改變兄弟元素的字體顏色"/></body></html>在瀏覽器中打開jq7.html，單擊按鈕后的顯示結果如圖所示。（4）prev~siblings選擇器prev~siblings選擇器用于選擇prev元素的所有的兄弟元素，相當于nextAll()方法，可以選擇出現在prev元素之后的和其為同一級別的所有的元素。例如：

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

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

$(“.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的元素后的第一個div元素</div><div>class為left的元素后的第二個div元素</div><spanclass="left">這是span,class=left</span><div>class為left元素后的第一個div元素</div><inputid="change"type="button"value="改變所有兄弟元素的字體顏色"/></body></html>在瀏覽器中打開jq8.html，并單擊按鈕后的顯示結果如圖所示。3．過濾選擇器過濾選擇器可分為基本過濾器、內容過濾器、可見性過濾器、屬性過濾器等。過濾選擇器可以根據元素的內容和索引等對元素進行選擇。（1）基本過濾器基本過濾器可以根據元素的特點和索引選擇元素，基本過濾器如表所示。選擇器說明:first匹配找到的第一個元素:last匹配找到的最后一個元素:not(selector)去除所有與給定選擇器匹配的元素:even匹配所有索引值為偶數的元素，例如$(“tr:even”):odd匹配所有索引值為奇數的元素，例如$(“tr:odd”):eq(index)匹配一個給定索引值的元素:gt(index)匹配所有大于給定索引值的元素:lt(index)匹配所有小于給定索引值的元素:header匹配所有標題:animated匹配所有正在執行動畫效果的元素例如jq9.html，當單擊按鈕時，使表格按行間隔變色。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，單擊按鈕后的顯示結果如圖所示。（2）內容過濾器內容過濾器可以根據元素包含的文字內容選擇元素，內容過濾器及其說明如表所示。選擇器說明:contains(text)匹配包含給定文本的元素:empty()匹配所有不包含子元素或者文本的空元素:has(selector)匹配含有選擇器所匹配的元素的元素:parent()匹配含有子元素或者文本的元素，與:empty()相反例如jq10.html，當單擊按鈕時，選擇表格中包含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，單擊按鈕后的顯示結果如圖所示。（3）可見性過濾器可見性過濾器可以根據元素的可見性進行選擇，可見性過濾器包括:hidden和:visible。:hidden可以匹配所有不可見的元素，:visible可以匹配所有可見的元素。例如：$(“td:hidden”)為匹配所有不可見的td元素；$(“td:visible”)為匹配所有可見的td元素；（4）屬性過濾器屬性過濾器可以根據元素的屬性值匹配元素，屬性過濾器及其說明如表所示。選擇器說明[attribute]匹配包含給定屬性的元素[attribute=value]匹配給定屬性為特定值的元素[attribute!=value]匹配給定屬性不等于特定值的元素[attribute^=value]匹配給定屬性是以特定值開頭的元素[attribute$=value]匹配給定屬性是以特定值結尾的元素[attribute*=value]匹配給定屬性包含特定值的元素[attributeFilter1][attributeFilter2][…]復合屬性選擇器，匹配屬性同時滿足多個條件的元素例如jq11.html，在頁面加載完成時，更改所有包含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>在頁面裝載完成后更改部分超級鏈接的樣式</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">第一個包含title屬性的a元素</a><br/><ahref="#">第一個不包含title屬性的a元素</a><br/><ahref="#"title="second">第二個包含title屬性的a元素</a><br/><ahref="#">第二個不包含title屬性的a元素</a><br/><ahref="#"title="third">第三個包含title屬性的a元素</a></body></html>在瀏覽器中打開jq11.html，其顯示結果如圖所示。4．表單選擇器表單選擇器用于選擇表單中的元素，包括的選擇器如表所示。選擇器說明: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是專門為事件處理而設計的，事件處理程序是當HTML頁面中發生某些事件時所調用的方法。在jQuery中，通常把事件處理放置在HTML頁面中的<head>部分。為了增加代碼的可重用性，也可以將jQuery的事件處理程序放置在單獨的JavaScript文件中，然后在需要引用的文件中引用。jQuery中常用的事件及其說明如表所示。Event函數說明$(document).ready(function)將函數綁定到文檔的加載完成事件$(selector).click(function)觸發或將函數綁定到元素的onClick事件$(selector).focus(function)觸發或將函數綁定到元素的onFocus事件$(selector).blur(function)觸發或將函數綁定到元素的onBlur事件$(selector).change(function)觸發或將函數綁定到元素的onChange事件$(selector).keydown(function)觸發或將函數綁定到元素的onKeyDown事件$(selector).keypress(function)觸發或將函數綁定到元素的onKeyPress事件$(selector).keyup(function)觸發或將函數綁定到元素的onKeyUp事件$(selector).mousedown(function)觸發或將函數綁定到元素的onMouseDown事件$(selector).mousemove(function)觸發或將函數綁定到元素的onMouseMove事件$(selector).mouseout(function)觸發或將函數綁定到元素的onMouseOut事件$(selector).mouseover(function)觸發或將函數綁定到元素的onMouseOver事件$(selector).mouseup(function)觸發或將函數綁定到元素的onMouseUp事件$(selector).submit(function)觸發或將函數綁定到元素的onSubmit事件$(selector).toggle(event,function)綁定兩個或多個事件處理函數，當發生輪流的onClick事件時執行$(selector).bind(event,function)向匹配元素附加一個或更多的事件處理器$(selector).unbind(event,function)從匹配元素移除一個被添加的事件處理器$(selector).one(event,function)向匹配元素添加事件處理器，每個元素只能觸發一次該處理器例如jq12.html，單擊按鈕時顯示半透明的DIV，DIV可以隨鼠標的移動而移動。jq12.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><title>可以移動的半透明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'>可以拖動的半透明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，顯示結果如圖所示，使用鼠標拖動之后的顯示結果如圖所示。10.4jQuery的特效使用jQuery可以很方便地實現頁面元素的特殊效果，比如隱藏、顯示、淡入、淡出、滑動以及動畫等。1．隱藏和顯示jQuery中的show()方法和hide()方法可以控制元素的顯示和隱藏。其語法如下：$(selector).hide(speed,callback);$(selector).show(speed,callback);其中，speed是可選參數，表示顯示或者隱藏的速度，可取slow、fast或者以毫秒為單位的數值；callback是可選參數，表示顯示或者隱藏后需要執行的函數名稱。例如jq13.html實現了一個簡單的下拉面板。jq13.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">#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/>

夜來風雨聲，<br/>

花落知多少。<br/></div></body></html>在瀏覽器中打開jq13.html，其顯示結果如圖所示，單擊“隱藏/顯示面板”顯示結果如圖所示。2．淡入和淡出jQuery可以很方便地實現元素的淡入和淡出的效果。（1）淡入效果jQuery的fadeIn()方法用于實現淡入已隱藏的元素。其語法如下：$(selector).fadeIn(speed,callback);（2）淡出效果jQuery的fadeOut()方法用于實現淡出可見的元素。其語法如下：$(selector).fadeOut(speed,callback);（3）淡入和淡出切換效果jQuery的fadeToggle()方法可以在淡入和淡出之間切換。如果元素已淡出，則執行fadeToggle()會使元素淡入；如果元素已淡入，則執行fadeToggle()會使元素淡出。其語法如下：$(selector).fadeToggle(speed,callback);（4）漸變效果jQuery的fadeTo()方法可以實現元素的漸變效果。其語法如下：$(selector).fadeTo(speed,opacity,callback);其中，speed和callback同以上其它方法中的參數；opacity指的是漸變的不透明度，取值范圍為0~1。例如js14.html為jQuery的淡入和淡出的效果實例。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頁面，顯示效果如圖所示。單擊相應的按鈕可以實驗不同的淡入淡出效果。3．滑動效果使用jQuery可以實現元素的滑動效果。（1）向下滑動向下滑動使用slideDown()方法實現，其語法如下：$(selector).slideDown(speed,callback);其中，speed和callback的含義同前文中的方法。（2）向上滑動向上滑動使用slideUp()方法實現，其語法如下：$(selector).slideUp(speed,callback);（3）向下或向上滑動如果要在向下滑動和向上滑動之間切換，可以使用slideToggle()方法，其語法如下：$(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>滑動效果</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="向下滑動"/><br/><inputid="sUp"type="button"value="向上滑動"/><br/><inputid="sToggle"type="button"value="向下/向上滑動"/><br/><divid="div"style="position:absolute;top:15px;left:115px;width:100px;height:100px;background-color:red"></div></body></html>在瀏覽器中打開jq15.html，其顯示結果如圖所示。4．動畫效果使用jQuery的animate()方法可以創建自定義的動畫，其語法如下：$(selector).animate({params},duration,easing,callback);其中：params是必需的參數，可以定義形成動畫的CSS屬性；speed是可選參數，指動畫的時長，可取slow、fast或者以毫秒計的數值；callback是可選參數，指動畫完成之后執行的函數；在animate()方法中，可以同時操作一個元素的幾乎全部的CSS屬性，也可以為一個元素指定多個animate()效果。例如jq16.html，給div添加動畫效果。jq16.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: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="開始動畫"/><br/><divid="div"style="position:absolute;width:100px;height:100px;background-color:red"></div></body></html>在瀏覽器中打開jq16.html，其顯示效果如圖所示。單擊按鈕可以演示動畫效果。10.5jQuery操作DOM使用jQuery可以方便地操作DOM，包括讀寫頁面元素的內容或屬性，修改頁面元素，操作元素的CSS屬性等。在jQuery中，可以使用以下方法返回或設置元素的內容和屬性：$(selector).text()方法用于返回或設置元素的文本內容；$(selector).html()方法用于返回或設置元素的內容（包括HTML標記在內）；$(selector).val()方法用于返回或設置表單字段的值；$(selector).attr()方法用于返回或者設置元素的屬性值；$(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，輸入用戶名和密碼，單擊確定后的顯示結果如圖所示。10.5.2jQuery更改頁面元素利用jQuery可以方便地在頁面中添加新元素或者刪除頁面中已有的元素。其常用方法及其說明如表所示。方法說明after()在選擇的元素之后插入內容append()在選擇的元素集合中的元素結尾插入內容appendTo()向目標結尾插入選擇元素集合中的元素before()在選擇的元素之前插入內容insertAfter()把選擇的元素插入到另一個指定元素集合的后面insertBefore()把選擇的元素插入到另一個指定元素集合的前面prepend()向選擇元素集合中的元素的開頭插入內容prependTo()向目標開頭插入選擇元素集合replaceAll()用匹配的元素替換所有匹配到的元素replaceWith()用新內容替換匹配的內容wrap()把選擇的元素用指定的內容包裹起來wrapAll()把所有的匹配的元素用指定的內容包裹起來wrapinner()把每一個匹配的元素的子元素使用指定的內容包裹起來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>操作頁面元素</title><scriptsrc="jquery-1.9.1.js"></script><script>$(document).ready(function(){ $("#addText").click(function(){ $("p").append("<fontcolor='#9933FF'>這是新追加的內容</fo

溫馨提示

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

評論

0/150

提交評論