jQuery教程詳解（一）

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() 方法。
              });
              
        })

效果：

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