引入jQuery庫

語法：

<script src="js/jquery-1.11.0.js" type="text/javascript" ></script>

基本語法：

jQuery（“選擇器”）  

$（“選擇器”）

//獲得input文字框物件

var oT= $("#username");//id選擇器使用格式#id名字

jQuery物件和DOM轉換

DOM物件轉換成jQuery物件，語法： $（dom物件）  -------  使用$（）。

var oT = document.getElementById('username');//建立DOM物件

console.log(oT.value);

        $(oT).val();  //轉換jQuery物件後列印

jQuery物件轉換成DOM物件，語法： JQ物件[0]  或者 JQ物件.get(0)。

var oT = $('#username');   //建立jQuery物件陣列

        console.log(oT.val());  //直接列印value值

        console.log(oT.get(0).value); //轉換成DOM物件後列印 方法一

        console.log(oT[0].value);  //轉換成DOM物件後列印 方法二

jQuery頁面載入

jQuery提供ready()函式，用於頁面成功載入後執行。與window.onload函式類似。

JavaScript頁面載入完成 ：window.onload = function() { …  };

例:

window.onload = function () {

alert("js 載入完畢")

};

jQuery頁面載入完成方式1：$(document).ready( function() { …  } );

例:

$(document).ready(function(){

alert("jQuery頁面載入完成");

});

jQuery頁面載入完成方式2： $( function() { … } );

例:

$(function () {

alert("jQuery頁面 載入完畢2");

});

基本選擇器

#idid選擇器根據id來獲取元素

element標籤選擇器根據標籤名獲取元素

.class類名選擇器根據類名獲取元素

效果

基本:

1.show([speed]) 顯示的圖片(速度)

引數  speed，顯示速度，單位：毫秒。固定字串：slow, normal, fast

[]可以不寫

2.hide(時間毫秒)  隱藏的圖片(速度)

3.toggle(時間毫秒) 切換  如果元素是可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的。

滑動:

1.slideDown(時間毫秒)  下滑並顯示圖片(速度)

2.slideUp(時間毫秒)    上滑並隱藏圖片(速度)。

3.slideToggle(時間毫秒) 切換 可以使匹配的元素以“滑動”的方式隱藏或顯示

淡入淡出:

1.fadeIn(時間毫秒)       顯示（淡入效果）

2.fadeOut(時間毫秒)      隱藏（淡出）

3.fadeTo(時間毫秒,opacity) 指定透明度

引數2 opacity ： 一個0至1之間表示透明度的數字。0表示隱藏，1表示顯示。

層級選擇器

層級選擇器例子說明

ancestor descendantA   B得A元素內部的所有的B元素（子孫）-- 後代

parent > childA > B得A元素下面的所有B子元素（父子）  children

prev + nextA + B得A元素同級下一個B元素（兄弟）

prev ~ siblingsA ~ B得A元素之後的所有B元素（兄弟）

基本過濾選擇器

過濾選擇器名稱說明

:first 擇匹配到的元素中的第一個元素

:last 擇匹配到的元素中的最後一個元素

:even 擇匹配到的元素中索引號為偶數的所有元素，index從0開始

:odd 擇匹配到的元素中索引號為奇數的所有元素，index從0開始

:eq(index)選擇匹配到的元素中索引號為index的一個元素，index從0開始

:gt(index)選擇匹配到的元素中索引號大於index的所有元素，index從0開始

:lt(index)選擇匹配到的元素中索引號小於index的所有元素，index從0開始

:not(..)選擇匹配不包括指定內容的元素

屬性選擇器

屬性選擇器名稱  翻譯說明

[attribute][屬性名]獲得有屬性名的元素。

[attribute=value][屬性名=值]獲得屬性名 等於 值 元素。

[attribute!=value][屬性名!=值]獲得屬性名 不等於 值 元素。

[attribute^=value][屬性名^=值]獲得屬性名 以 值  開頭 元素。

[attribute$=value][屬性名$=值]獲得屬性名 以 值  結尾 元素。

[attribute*=value][屬性名*=值]獲得屬性名 含有 值 元素。

[attrSel1][attrSel2][attrSelN]複合屬性選擇器，多個屬性同時過濾。首先經[attrSel1]選擇返回集合A，

集合A再經過[attrSel2]選擇返回集合B，集合B再經過[attrSelN]選擇返回結果集合。

表單物件屬性選擇器

表單屬性選擇器的名稱描述

:enabled配所有可用元素

:disabled配所有不可用元素

:checked取匹配所有被選中的元素  （單選框、複選框）

:selected取匹配所有被選中項元素  （下拉列表框）

class的操作

方法描述

addClass(類名)給指定標籤的class屬性追加樣式

removeClass(類名)將標籤指定的class屬性移除

toggleClass(類名)切換class屬性樣式。即沒有時新增，有的時候刪除。

屬性操作：prop() 和attr()

方法名描述

attr(屬性名) 可以用來獲取某一個屬性對應的值

attr(屬性名,屬性值) 可以用來獲取某一個屬性對應的值

attr( {屬性名1：屬性值1，…} )設定多個屬性，以JSON結構傳遞

removeAttr(屬性名)刪除某一個屬性

prop(屬性名)可以用來獲取某一個屬性對應的值

prop(屬性名，屬性值)可以用來設定某一個屬性對應的值

prop( {屬性名1：屬性值1，…} )設定多個屬性，以JSON結構傳遞

removeProp(屬性名)刪除某一個屬性  把屬性值都變為 undefined

總結： 如果操作的是固有屬性，使用prop，如果有問題再去考慮使用attr