jquery01-簡介+語法+選擇器+事件

jQuery是一個JavaScript函數庫，是一個輕量級的"寫的少，作的多"的JavaScript庫，包含如下功能：

• HTML 元素選取
• HTML 元素操做
• CSS 操做
• HTML 事件函數
• JavaScript 特效和動畫
• HTML DOM 遍歷和修改
• AJAX
• Utilities

 除此以外，Jquery還提供了大量的插件。

下載 jQuery

有兩個版本的 jQuery 可供下載：

• Production version - 用於實際的網站中，已被精簡和壓縮。
• Development version - 用於測試和開發（未壓縮，是可讀的代碼）

以上兩個版本均可以從 jquery.com 中下載。jQuery 庫是一個 JavaScript 文件，經過如下方式導入：

<script src="jquery-1.10.2.min.js"></script>

jQuery 語法

jQuery 語法是經過選取 HTML 元素，並對選取的元素執行某些操做。jQuery 使用的語法是 XPath 與 CSS 選擇器語法的組合。

基礎語法： $(selector).action()

• 美圓符號定義 jQuery
• 選擇符（selector）"查詢"和"查找" HTML 元素
• jQuery 的 action() 執行對元素的操做

實例:

$(this).hide() - 隱藏當前元素

$("p").hide() - 隱藏全部段落

$("p .test").hide() - 隱藏全部 class="test" 的段落

$("#test").hide() - 隱藏全部 id="test" 的元素

文檔就緒事件

全部 jQuery 函數位於一個 document ready 函數中：

$(document).ready(function(){
    // jQuery methods go here...
});

簡潔寫法（與以上寫法效果相同）:

$(function(){
    // jQuery methods go here...
});

這是爲了防止文檔在徹底加載（就緒）以前運行 jQuery 代碼。若是在文檔沒有徹底加載以前就運行函數，操做可能失敗。下面是兩個具體的例子：

• 試圖隱藏一個不存在的元素
• 得到未徹底加載的圖像的大小

jQuery 選擇器

jQuery 選擇器容許對 HTML 元素組或單個元素進行操做，基於元素的 id、類、類型、屬性、屬性值等"查找"（或選擇）HTML 元素。 它基於已經存在的 CSS 選擇器，除此以外，它還有一些自定義的選擇器。jQuery 中全部選擇器都以美圓符號開頭：$()。

元素選擇器

jQuery 元素選擇器基於元素名選取元素。在頁面中選取全部 <p> 元素:   $("p") 

#id 選擇器

jQuery #id 選擇器經過 HTML 元素的 id 屬性選取指定的元素。

頁面中元素的 id 應該是惟一的，因此您要在頁面中選取惟一的元素須要經過 #id 選擇器。

經過 id 選取元素語法以下：$("#test") 

.class 選擇器

jQuery 類選擇器能夠經過指定的 class 查找元素。語法以下：$(".test") 

語法               描述

$("*")           選取全部元素

$(this)          選取當前 HTML 元素

$("p.intro")   選取 class 爲 intro 的 <p> 元素

$("p:first")    選取第一個 <p> 元素

$("ul li:first") 選取第一個 <ul> 元素的第一個 <li> 元素

$("ul li:first-child")  選取每一個 <ul> 元素的第一個 <li> 元素

$("[href]")             選取帶有 href 屬性的元素

$("a[target='_blank']")  選取全部 target 屬性值等於 "_blank" 的 <a> 元素

$("a[target!='_blank']") 選取全部 target 屬性值不等於 "_blank" 的 <a> 元素

$(":button") 選取全部 type="button" 的 <input> 元素 和 <button> 元素

$("tr:even") 選取偶數位置的 <tr> 元素

$("tr:odd")  選取奇數位置的 <tr> 元素

 

 

 

 

 

 

 

 

 

 

 

 jquery事件

常見 DOM 事件
鼠標事件	鍵盤事件	表單事件	文檔/窗口事件
click	keypress	submit	load
dbclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

 

 

 

 

 

 

常見 jquery 事件
鼠標事件	文檔/窗口事件
click()	$(document).ready() 文檔徹底加載完後執行函數	hover()
dbclick()雙擊元素		focus()元素得到焦點
mouseenter()鼠標指針穿過元素		blur()失去焦點時
mouseleave()鼠標指針離開元素
mousedown()鼠標指針移動到元素上方，並按下鼠標按鍵時
mouseup()在元素上鬆開鼠標按鈕時

 

 

 

 

 

 

 

 

 

 

 

 

 hover()方法用於模擬光標懸停事件。

當鼠標移動到元素上時，會觸發指定的第一個函數(mouseenter);當鼠標移出這個元素時，會觸發指定的第二個函數(mouseleave)。

 $("#p1").hover(
    function(){
        alert("你進入了 p1!");
    },
    function(){
        alert("拜拜! 如今你離開了 p1!");
    }
)