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

效果：

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