jQuery使用法則。

jQuery是使用最普遍的javascript函數庫。

jQuery雖然如今用的人少了，可是瞭解其原來仍是十分重要的。

---

1、獲取元素

jQuery的基本設計思想和主要用法，就是"選擇某個網頁元素，而後對其進行某種操做"。

1. 使用jQuery的第一步，每每就是將一個選擇表達式，放進構造函數jQuery()（簡寫爲$），而後獲得被選中的元素。

能夠是CSS選擇器：

$(document) //選擇整個文檔對象

$('#myId') //選擇ID爲myId的網頁元素

$('div.myClass') // 選擇class爲myClass的div元素

$('input[name=first]') // 選擇name屬性等於first的input元素
複製代碼

也能夠是jQuery特有表達式：

$('a:first') //選擇網頁中第一個a元素

$('tr:odd') //選擇表格的奇數行

$('#myForm :input') // 選擇表單中的input元素

$('div:visible') //選擇可見的div元素

$('div:gt(2)') // 選擇全部的div元素，除了前三個

$('div:animated') // 選擇當前處於動畫狀態的div元素
複製代碼

2. 同時，使用過濾器能夠縮小選擇結果。

$('div').has('p'); // 選擇包含p元素的div元素

$('div').not('.myClass'); //選擇class不等於myClass的div元素

$('div').filter('.myClass'); //選擇class等於myClass的div元素

$('div').first(); //選擇第1個div元素

$('div').eq(5); //選擇第6個div元素

$('div').get(5); //選擇第6個元素

$('div').get();  //獲取全部div元素的數組

複製代碼

3. 從結果集出發，移動到附近的相關元素，可以使用DOM樹

$('div').next('p'); //選擇div元素後面的第一個p元素

$('div').parent(); //選擇div元素的父元素

$('div').closest('form'); //選擇離div最近的那個form父元素

$('div').children(); //選擇div的全部子元素

$('div').siblings(); //選擇div的同級元素

複製代碼

---

2、鏈式操做

最終選中網頁元素之後，能夠對它進行一系列操做，而且全部操做能夠鏈接在一塊兒，以鏈條的形式寫出來，好比：

$('div').find('h3').eq(2).html('Hello');
複製代碼

它的原理在於每一步的jQuery操做，返回的都是一個jQuery對象，因此不一樣操做能夠連在一塊兒。

jQuery對象是jQuery函數創造的，是對象操做對應的元素。

In addition，jQuery還提供了.end()方法，使得結果集回退爲前一步的狀態。

$('div')

      .find('h3')

      .eq(2)

      .html('Hello')

      .end() //退回到選中全部的h3元素的那一步

      .eq(0) //選中第一個h3元素

      .html('World'); //將它的內容改成World

複製代碼

---

3、操做元素

1. 取值和賦值（getter 和 setter）

在jQuery中取值賦值使用同一函數。

$('h1').html(); //html()沒有參數，表示取出h1的值
$('h1').html('Hello'); //html()有參數Hello，表示對h1進行賦值
複製代碼

常見的取值和賦值函數以下：

.html() 取出或設置html內容

    .text() 取出或設置text內容

    .attr() 取出或設置某個屬性的值

    .width() 取出或設置某個元素的寬度

    .height() 取出或設置某個元素的高度

    .val() 取出某個表單元素的值
複製代碼

若是結果集包含多個元素，那麼賦值的時候，將對其中全部的元素賦值；取值的時候，則是只取出第一個元素的值（.text()例外，它取出全部元素的text內容）。

2. 建立新元素

直接將新元素放入jQuery的構造函數裏就好

$('<p>Hello</p>');

$('<li class="new">new list item</li>');

$( "<p>Test</p>" ).appendTo( ".inner" ); //把<p>Test</p>放入class=inner的元素內 

複製代碼

3. 移動元素

$('div').insertAfter($('p')); //把div插入到p後面，這種返回div元素

$('p').after($('div')); //把p元素加到div元素前面，這種返回p元素
複製代碼

除了這些，還有：

.insertAfter()和.after()：在現存元素的外部，從後面插入元素

.insertBefore()和.before()：在現存元素的外部，從前面插入元素

.appendTo()和.append()：在現存元素的內部，從後面插入元素

.prependTo()和.prepend()：在現存元素的內部，從前面插入元素

複製代碼

4. 複製和刪除

$('p').remove();  //刪除元素，且不保留

$('p').empty(); //  清空元素的內容，可是保留

複製代碼

5. 其餘工具

若是你懂得Javascript語言的繼承原理，那麼就能理解工具方法的實質。它是定義在jQuery構造函數上的方法，即jQuery.method()，因此能夠直接使用。而那些操做元素的方法，是定義在構造函數的prototype對象上的方法，即jQuery.prototype.method()，因此必須生成實例（即選中元素）後使用。

$.trim() 去除字符串兩端的空格。

$.each() 遍歷一個數組或對象。

$.inArray() 返回一個值在數組中的索引位置。若是該值不在數組中，則返回-1。

$.grep() 返回數組中符合某種標準的元素。

$.extend() 將多個對象，合併到第一個對象。

$.makeArray() 將對象轉化爲數組。

$.type() 判斷對象的類別（函數對象、日期對象、數組對象、正則對象等等）。

$.isArray() 判斷某個參數是否爲數組。

$.isEmptyObject() 判斷某個對象是否爲空（不含有任何屬性）。

$.isFunction() 判斷某個參數是否爲函數。

$.isPlainObject() 判斷某個參數是否爲用"{}"或"new Object"創建的對象。

$.support() 判斷瀏覽器是否支持某個特性。

複製代碼

6. 事件操做

$('p').click(function(){   //把事件直接綁定在網頁元素之上。

alert('Hello');

});
複製代碼

.blur() 表單元素失去焦點。

.change() 表單元素的值發生變化

.click() 鼠標單擊

.dblclick() 鼠標雙擊

.focus() 表單元素得到焦點

.focusin() 子元素得到焦點

.focusout() 子元素失去焦點

.hover() 同時爲mouseenter和mouseleave事件指定處理函數

.keydown() 按下鍵盤（長時間按鍵，只返回一個事件）

.keypress() 按下鍵盤（長時間按鍵，將返回多個事件）

.keyup() 鬆開鍵盤

.load() 元素加載完畢

.mousedown() 按下鼠標

.mouseenter() 鼠標進入（進入子元素不觸發）

.mouseleave() 鼠標離開（離開子元素不觸發）

.mousemove() 鼠標在元素內部移動

.mouseout() 鼠標離開（離開子元素也觸發）

.mouseover() 鼠標進入（進入子元素也觸發）

.mouseup() 鬆開鼠標

.ready() DOM加載完成

.resize() 瀏覽器窗口的大小發生改變

.scroll() 滾動條的位置發生變化

.select() 用戶選中文本框中的內容

.submit() 用戶遞交表單

.toggle() 根據鼠標點擊的次數，依次運行多個函數

.unload() 用戶離開頁面
複製代碼