概述
jQuery 函數包裝的對象是類數組對象，對象裏面包含了 DOM 對象的信息，並封裝了很多操作方法，可以和訪問數組一樣的方法來訪問。
jQuery 對象 和 DOM 對象
聯繫
可是使用 $ 符號將 DOM 對象封裝成 jQuery 對象 $( div )
可是使用 div = $div[ 0 ] 或者 div
= $div.get( 0 ) 將 jQuery 對象轉化成 DOM 對象
###區別
DOM 對象的屬性和方法有： .style .classList
jQuery 對象的屬性和方法有：.css .addClass
說明：傳遞給 $(DOM) 函數的參數是 DOM Object ，則 jQuery 函數會把這個 DOM Object 給包裝成一個新的 jQuery 對象
jQuery 選擇器
- id 選擇器： $( “#id” )
- 類選擇器：$( “.class” )
- 元素選擇器： $( “element” )
- 全選擇器：$( “*” )
-
層級選擇器
-
子選擇器：$( “parent > child” )
-
後代選擇器：$( “ancestor descendant” )
-
相鄰兄弟選擇器：$( “prev + next” )
選擇所有緊跟在prev元素後的next元素 -
一般兄弟選擇器：$( “prev ~ siblings” )
匹配prev元素之後的所有兄弟元素，具有相同的父元素，並匹配過濾siblings選擇器
-
-
基本篩選選擇器
- $( “:first” ) ==> 匹配第一個元素
- $( “:last” ) ==> 匹配最後一個元素
- $( “:not(seletor)” ) ==> 選擇所有元素去除不匹配給定的選擇器元素
- $( “:eq(index)” ) ==> 在匹配的集合中選擇 index 的元素（從0開始）
- $( “:gt(index)” ) ==> 在匹配的集合中選擇大於 index 的元素（從0開 始）
- $( “:lt(index)” ) ==> 在匹配的集合中選擇小於 index 的元素（從0開 始）
- $( “:odd” ) ==> 選擇索引值爲奇數的元素
- $( “:even” ) ==> 選擇索引值爲偶數的元素
- $( “:header” ) ==> 選擇所有標題元素
- $( “:root” ) ==> 選擇該文檔的根元素
- $( “:lang(language)” ) ==> 選擇指定語言的所有元素
- $( “:animated” ) ==> 選擇所有正在執行動畫的元素
說明：1. :eq()、:lt()、:gt()、:even、:odd 用來篩選他們前面的匹配表達式的集合元素，根據之前匹配的元素進一步篩選 2. :gt() 是一個段落篩選，從指定索引的下一個開始，:gt(1) 實際是從2開始
-
內容篩選選擇器
-
$( “:parent” ) ==> 選擇所有含有子元素或者文本的元素
-
$( “:empty” ) ==> 選擇所有沒有子元素的元素（包括文本節點）
-
$( “:contains(text)” ) ==> 選擇所有包含指定文本的元素
-
$( “:has(selector)” ) ==> 選擇元素中至少包含指定選擇器的元素
說明：1. :contain 和 :has 都有查找的意思，但 contains 查找包含**制定文本**的元素，has 查找包含**指定元素**的元素 2. 如果 :contains 匹配的文本包含在元素的子元素中，同樣認爲是符合條件的 3. :parent 和 :empty 是相反的，但是兩者所涉及的子元素都包括文本節點
-
-
可見性篩選選擇器
-
$( “:visible” ) ==> 選擇所有顯示的元素
-
$( “:hidden” ) ==> 選擇所有隱藏的元素
隱藏元素的方式
- CSS ==> display: none
- width: 0; height: 0;
- visibility: hidden;
- opacity: 0;
說明：如果元素佔據文檔中一定的空間，元素被認爲是可見的，可見元素的寬高都大於 0 ，元素的visibility: hidden;和opacity: 0;被認爲是可見的，因爲他們仍然佔據空間佈局。不在文檔中的元素被認爲是不可見的，如果當他們被插入到文檔中，jQuery 沒有辦法知道他們是否是可見的，因爲元素可見性依賴於使用的樣式。
-
-
屬性篩選選擇器
-
$( “[attribute |= ‘value’]” ) ==> 選擇指定屬性值等於給定字符串或以該字符串爲前綴（該字符串後跟一個連字符 ‘-‘）的元素
-
$( “[attribute = ‘value’]” ) ==> 選擇指定屬性具有*包含一個給定的子字符串的元素（選擇給定屬性是包含某些值的元素）
-
$( “[attribute ~= ‘value’]” ) ==> 選擇指定屬性用空格分隔的值中包含一個給定值的元素
-
$( “[attribute = ‘value’]” ) ==> 選擇指定屬性是給定值的元素
-
$( “[attribute != ‘value’]” ) ==> 選擇不存在指定屬性，或者指定的屬性不等於給定值的元素
-
$( “[attribute ^= ‘value’]” ) ==> 選擇指定屬性是以給定字符串開始的元素
-
(“[attribute= ‘value’]” ) ==> 選擇指定屬性是以給定值結尾的元素
-
$( “[attribute]” ) ==> 選擇所有具有指定屬性的元素，該屬性是任意值
-
-
表單元素選擇器
-
$( “:input” ) ==> 選擇所有 input textarea select 和 button 的元素
-
$( “:text” ) ==> 匹配所有文本框
-
$( “:password” ) ==> 匹配所有密碼框
-
$( “:raido” ) ==> 匹配所有單選按鈕
-
$( “:checkbox” ) ==> 匹配所有複選框
-
$( “:submit” ) ==> 匹配所有提交按鈕
-
$( “:image” ) ==> 匹配所有圖像域
-
$( “:reset” ) ==> 匹配所有重置按鈕
-
$( “:button” ) ==> 匹配所有按鈕
-
$( “:file” ) ==> 匹配所有文件域
說明：
1. 除了 input 篩選選擇器，其餘每個表單類別選擇器都對應一個 input 元素的 type 值，所以其都可以用屬性篩選選擇器替換 2. ` $( ":password" ) === $( "[type = password]" ) ` -
-
表單對象屬性篩選選擇器
-
$( “:enabled” ) ==> 選取可用的表單元素
-
$( “:disabled” ) ==> 選取不可用的表單元素
-
$( “:checked” ) ==> 選取被選中的 元素
-
$( “:selected” ) ==> 選取被選中的
說明：
1. 選擇器適用於複選框和單選框，對於**下拉框**元素使用 **:selected** 選擇器 2. 在使用 :checked 的時候，**最佳實踐是使用 input: checked** -
-
子元素篩選選擇器
-
$( “:first-child” ) ==> 選擇所有父級元素下的第一個子元素
-
$( “:last-child” ) ==> 選擇所有父級元素下的最後一個子元素
-
$( “:only-child” ) ==> 如果某個元素是其父元素下的唯一子元素，那麼它就會被選中
-
$( “:nth-child(n)” ) ==> 選擇所有父級元素下的第 n 個子元素，n 是索引值，從 1 開始
-
$( “:nth-last-child(n)” ) ==> 選擇所有父級元素下的第 n 個子元素，計數從最後一個開始
-
-
特殊選擇器
-
this ==> 表示當前的上下文對象是一個 HTML 對象，可以調用 HTML 對象所擁有的屬性和方法
-
$(this) ==> 代表上下文是一個 jQuery 的上下文對象，可以調用 jQuery 的方法和屬性值
-
jQuery 屬性與樣式
-
.attr()
獲取和設置元素屬性（DOM操作）- .attr(傳入屬性名) ==> 獲取屬性值
- .attr(屬性名, 屬性值) ==> 設置屬性值
- .attr(屬性名, 函數值) ==> 設置屬性的函數值
- .attr(attribute) ==> 給指定元素設置多個屬性值
.attr({屬性名1: “屬性值1” , 屬性名2: “屬性值2”, …})
說明：Attribute 和 Property
1. Attribute 屬性 ， Property 特性 2. Attribute 就是 DOM node 自帶的屬性（id、class、title），Property 是 DOM 元素作爲對象，其附加的內容（nodeName、nodeType、tagName） -
.removeAttr()
爲匹配的元素集合中的每個元素移除一個屬性 attributeName -
.html()
獲取或設置匹配元素的 HTML 內容- .html() ==> 獲取集合中第一個匹配元素的 HTML 內容
- .html(htmlString) ==> 設置每一個匹配元素的 HTML 內容
- .html(function(index, oldhtml)) ==> 用來返回設置 HTML 內容的一個函數
說明：.html() 方法內部使用的是 DOM 的 innerHTML 屬性來操作的，這個操作是針對整個 HTML 內容（包括文本內容）
-
.text()
得到匹配元素集合中的每個元素的文本內容的結合，包括他們的後代，或者設置匹配元素集合中每個元素的文本內容爲指定的文本內容- .text() ==> 獲取匹配元素集合中每個元素的合併文本，包括他們的後代
- .text(textString) ==> 用來設置匹配元素內容的文本
-
.text(function(index, text)) ==> 用來返回設置文本內容的一個函數
說明：.html() 和 .text()
1. .html() 處理元素內容，.text() 處理文本內容 2. html() 只能使用在 HTML 文檔中，.text() 在 XML 文檔和 HTML 文檔都能使用 3. 若處理對象只有一個子文本節點，則 .html 和 .text() 處理結果相同
-
.val()
處理表單元素的值- .val() ==> 獲取匹配元素集合中第一個元素的當前值
- .val(value) ==> 設置匹配的元素集合中每個元素的值
-
.val(function(){}) ==> 一個用來返回設置值的函數
說明：.html() 和 .text()
1. .val() 處理 select 元素，當沒有選擇項被選中時，它將返回 null 2. 若 select 元素有 multiple 屬性，並且至少一個選擇項被選中時， .val() 將返回一個數組，這個數組包含每個選中選擇項的值 3. .val() 方法多用來設置表單的字段的值
-
.addClass()
動態增加 class 類名- .addClass(className) ==> 爲每個匹配元素增加一個或多個類名
-
.addClass(function(index, currentClass){}) ==> 這個函數返回一個或更多用空格隔開的要增加的樣式名
說明：
1. .addClass() 方法不會替換一個樣式類名，它只是簡單的添加一個類名到元素上 2.1
2
3
4
5
6
7<script>
$('div').addClass(function(index, className){
if( className.indexOf(index) !== -1 ){
$(this).addClass('red')
}
})
</script>
-
.removeClass()
刪除全部或者指定的 class- .removeClass([className]) ==> 每個匹配的元素移除一個或對個用空格隔開的樣式名
-
.removeClass(function(index, class)) ==> 返回一個或多個要被移除的樣式名的函數
說明：如果 .removeClass() 沒有參數，則會移除所有的樣式類
-
.toggleClass()
在匹配的元素集合中的每個元素上添加或刪除一個或多個樣式類，取決於這個樣式是否存在，即：如果存在就刪除一個類，如果不存在就添加一個類- .toggleClass(className) ==> 切換類
- .toggleClass(className,switch) ==> 一個布爾值，用來判斷樣式是否應該被添加或移除
- .toggleClass(function(index, class, switch){})
-
.css()
獲取元素樣式屬性的計算值或者設置元素的 CSS 屬性
獲取- .css( “propertyName” ) ==> 獲取匹配元素集合中的第一個元素的樣式屬性的計算值
-
.css( “propertyNames” ) ==> 傳遞一組數組，返回一個對象結果
設置
- .css( ‘propertyName’, ‘value’ ) ==> 設置 CSS
- .css( ‘propertyName’, function ) ==> 可以傳入一個回調函數，返回取到對應的值進行處理
-
.css( ‘properties ) ==> 可以傳入一個對象，同時設置多個樣式，用
{ }括起說明：
- 通過 .css() 方法設置的樣式屬性優先級要高於 .addClass() 方法
- 若是靜態結構，確定了佈局規則，使用 .addClass() 方法增加類
- 若是動態的 HTML 結構，在不確定佈局或者經常要變化的情況下，使用 .css() 方法
- .addClass() 不能獲取到指定樣式的屬性值，.css() 可以獲取到指定的樣式值