jQuery教程詳解（一）

標籤：產生   win   sel   on()   opera   2.0   llb   outline   特性   

PS——瞭解JQuery

Query是一個快速、簡潔的JavaScript架構，是繼Prototype之後又一個優秀的JavaScript程式碼程式庫（ 或JavaScript架構）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，最佳化HTML文檔操作、事件處理、動畫設計和Ajax互動。

jQuery的核心特性可以總結為：具有獨特的鏈式文法和短小清晰的多功能介面；具有高效靈活的css選取器，並且可對CSS選取器進行擴充；擁有便捷的外掛程式擴充機制和豐富的外掛程式。jQuery相容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

什麼是 jQuery ？
　　jQuery是一個JavaScript函數庫。
　　jQuery是一個輕量級的"寫的少，做的多"的JavaScript庫。
　　jQuery庫包含以下功能：
　　HTML 元素選取
　　HTML 元素操作
　　CSS 操作
　　HTML 事件函數
　　JavaScript 特效和動畫
　　HTML DOM 遍曆和修改
　　AJAX
　　Utilities

jQuery文法

　　jQuery 文法是通過選取 HTML 元素，並對選取的元素執行某些操作。
　　基礎文法： $(selector).action()
　　貨幣符號定義 jQuery
　　選擇符（selector）"查詢"和"尋找" HTML 元素
　　jQuery 的 action() 執行對元素的操作
　　執行個體:
　　$(this).hide() - 隱藏當前元素
　　$("p").hide() - 隱藏所有 <p> 元素
　　$("p.test").hide() - 隱藏所有 class="test" 的 <p> 元素
　　$("#test").hide() - 隱藏所有 id="test" 的元素

開始使用JQuery，首先引用JQ外掛程式

在接下來的使用過程中，需要接觸到文檔就緒函數

 

文檔就緒函數

文檔就緒函數，為了防止文檔在完全載入（就緒）之前運行 jQuery 代碼。
寫法：

$(document).ready(function(){// 開始寫 jQuery 代碼...});

簡潔寫法：

$(function(){// 開始寫 jQuery 代碼...});

 

選取器

jQuery 選取器允許您對 HTML 元素組或單個元素進行操作。
jQuery 選取器基於元素的 id、類、類型、屬性、屬性值等"尋找"（或選擇）HTML 元素。 它基於已經存在的 CSS 選取器，除此之外，它還有一些自訂的選取器。
jQuery 中所有選取器都以貨幣符號開頭：$()。

案例：

HTML代碼：

<p id="" class="" style="width: 200px;height: 100px;background-color: #CCCCCC;"></p><p id="" class="" style="width: 200px;height: 100px;background-color: #CCCCCC;"></p><button id="btn1" style="width: 100px;height: 50px;border-radius: 25px;background-color: greenyellow;outline: none;">點擊隱藏</button><button id="btn2" style="width: 100px;height: 50px;border-radius: 25px;background-color: greenyellow;outline: none;">點擊還原</button>

JS代碼：

$(function(){            $("#btn1").click(function(){//通過button的id即btn1選擇HTML元素，並通過click事件改變頁面元素            $("p").hide();//              });                            $("#btn2").click(function(){            $("p").show();              });        })

效果

除了#id選取器之外，還有.class選取器，元素選取器等

 

jQuery事件

頁面對不同訪問者的響應叫做事件。
　　事件處理常式指的是當 HTML 中發生某些事件時所調用的方法。
　　執行個體：
　　在元素上移動滑鼠。
　　選取選項按鈕
　　點擊元素

常見 DOM 事件：

案例：dblclick雙擊改變HTML樣式

 JS代碼：

$(function(){            $("#btn1").dblclick(function(){//dblclick雙擊            $("p").hide();//              });                            $("#btn2").dblclick(function(){            $("p").show();              });        })

效果

 案例：當滑鼠指標穿過元素時，會發生 mouseenter 事件。

JS代碼：

$(function(){            $("#btn1").mouseenter(function(){//mouseenter滑鼠移至上方時            $("p").hide();//              });                            $("#btn2").mouseenter(function(){            $("p").show();              });        })

效果

 

 jQuery效果——隱藏和顯示

jQuery hidden()和show()
通過 jQuery，可以使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素：
文法

$(selector).hide(speed,callback);$(selector).show(speed,callback);

可選的 speed 參數規定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數是隱藏或顯示完成後所執行的函數名稱。

 案例：

HTML代碼：

<p id="" class="" style="width: 200px;height: 100px;background-color: #CCCCCC;">如果你點擊，我們兩個將會被隱藏</p><p id="" class="" style="width: 200px;height: 100px;background-color: #CCCCCC;"></p><button id="btn1" style="width: 100px;height: 50px;border-radius: 25px;background-color: greenyellow;outline: none;">點擊2000毫秒隱藏</button><button id="btn11" style="width: 100px;height: 50px;border-radius: 25px;background-color: greenyellow;outline: none;">點擊6000毫秒隱藏</button><button id="btn2" style="width: 100px;height: 50px;border-radius: 25px;background-color: greenyellow;outline: none;">點擊還原</button><button id="btn22" style="width: 100px;height: 50px;border-radius: 25px;background-color: greenyellow;outline: none;">點擊slow還原</button>

JS代碼：

$(function(){            $("#btn1").click(function(){//點擊產生隱藏效果            $("p").hide(2000);//2000毫秒隱藏              });              $("#btn11").click(function(){            $("p").hide(6000);//6000毫秒隱藏              });                            $("#btn2").click(function(){            $("p").show();              });              $("#btn22").click(function(){            $("p").show("slow");              });        })

效果：

 也可以使用 toggle() 方法來切換 hide() 和 show() 方法。

文法:

$(selector).toggle(speed,callback);

可選的 speed 參數規定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 參數是隱藏或顯示完成後所執行的函數名稱

 案例：

HTML代碼：

<p id="" class="" style="width: 200px;height: 100px;background-color: #CCCCCC;">如果你點擊，我們兩個將會被隱藏</p><p id="" class="" style="width: 200px;height: 100px;background-color: #CCCCCC;"></p><button id="btn1" style="width: 100px;height: 50px;border-radius: 25px;background-color: greenyellow;outline: none;">顯示/隱藏</button>

JS代碼：

$(function(){            $("#btn1").click(function(){            $("p").toggle();//toggle() 方法來切換 hide() 和 show() 方法。              });                      })

效果：

 變化2

JS代碼：

$(function(){            $("#btn1").click(function(){            $("p").toggle(2000);//toggle() 方法來切換 hide() 和 show() 方法。              });                      })

效果：

 時間有限，本篇博文就分享到這，歡迎各位大神多多交流

 

 

 

 

 

 

 

 

 

 

 

 

 

 

jQuery教程詳解（一）