概述

jQuery 函數(shù)包裝的對(duì)象是類數(shù)組對(duì)象，對(duì)象里面包含了 DOM 對(duì)象的信息马昙，并封裝了很多操作方法桃犬，可以和訪問數(shù)組一樣的方法來訪問。

jQuery 對(duì)象 和 DOM 對(duì)象

聯(lián)系

可是使用 $ 符號(hào)將 DOM 對(duì)象封裝成 jQuery 對(duì)象 $( div )
可是使用 div = $div[ 0 ] 或者 div = $div.get( 0 ) 將 jQuery 對(duì)象轉(zhuǎn)化成 DOM 對(duì)象

區(qū)別

DOM 對(duì)象的屬性和方法有： .style .classList
jQuery 對(duì)象的屬性和方法有：.css .addClass

說明：傳遞給 $(DOM) 函數(shù)的參數(shù)是 DOM Object 行楞，則 jQuery 函數(shù)會(huì)把這個(gè) DOM Object 給包裝成一個(gè)新的 jQuery 對(duì)象

jQuery 選擇器

1. id 選擇器： $( "#id" )

2. 類選擇器：$( ".class" )

3. 元素選擇器： $( "element" )

4. 全選擇器：$( "*" )

5. 層級(jí)選擇器

   • 子選擇器：$( "parent > child" )

   • 后代選擇器：$( "ancestor descendant" )

   • 相鄰兄弟選擇器：$( "prev + next" )
     選擇所有緊跟在 prev 元素后的 next 元素

   • 一般兄弟選擇器：$( "prev ~ siblings" )
     匹配 prev 元素之后的所有兄弟元素攒暇，具有相同的父元素，并匹配過濾 siblings 選擇器

6. 基本篩選選擇器

   • $( ":first" ) ==> 匹配第一個(gè)元素
   • $( ":last" ) ==> 匹配最后一個(gè)元素
   • $( ":not(seletor)" ) ==> 選擇所有元素去除不匹配給定的選擇器元素
   • $( ":eq(index)" ) ==> 在匹配的集合中選擇 index 的元素（從0開始）
   • $( ":gt(index)" ) ==> 在匹配的集合中選擇大于 index 的元素（從0開 始）
   • $( ":lt(index)" ) ==> 在匹配的集合中選擇小于 index 的元素（從0開 始）
   • $( ":odd" ) ==> 選擇索引值為奇數(shù)的元素
   • $( ":even" ) ==> 選擇索引值為偶數(shù)的元素
   • $( ":header" ) ==> 選擇所有標(biāo)題元素
   • $( ":root" ) ==> 選擇該文檔的根元素
   • $( ":lang(language)" ) ==> 選擇指定語言的所有元素
   • $( ":animated" ) ==> 選擇所有正在執(zhí)行動(dòng)畫的元素
     說明：
     1. :eq()子房、:lt()形用、:gt()、:even证杭、:odd 用來篩選他們前面的匹配表達(dá)式的集合元素田度，根據(jù)之前匹配的元素進(jìn)一步篩選
     2. :gt() 是一個(gè)段落篩選，從指定索引的下一個(gè)開始躯砰，:gt(1) 實(shí)際是從2開始

7. 內(nèi)容篩選選擇器

   • $( ":parent" ) ==> 選擇所有含有子元素或者文本的元素

   • $( ":empty" ) ==> 選擇所有沒有子元素的元素（包括文本節(jié)點(diǎn)）

   • $( ":contains(text)" ) ==> 選擇所有包含指定文本的元素

   • $( ":has(selector)" ) ==> 選擇元素中至少包含指定選擇器的元素
     說明：
     1. :contain 和 :has 都有查找的意思每币，但 contains 查找包含制定文本的元素，has 查找包含指定元素的元素
     2. 如果 :contains 匹配的文本包含在元素的子元素中琢歇，同樣認(rèn)為是符合條件的
     3. :parent 和 :empty 是相反的兰怠，但是兩者所涉及的子元素都包括文本節(jié)點(diǎn)

8. 可見性篩選選擇器

   • $( ":visible" ) ==> 選擇所有顯示的元素

   • $( ":hidden" ) ==> 選擇所有隱藏的元素

   隱藏元素的方式
   1. CSS ==> display: none
   2. width: 0; height: 0;
   3. visibility: hidden;
   4. opacity: 0;
   說明：如果元素占據(jù)文檔中一定的空間，元素被認(rèn)為是可見的李茫，可見元素的寬高都大于 0 揭保，元素的 visibility: hidden; 和 opacity: 0; 被認(rèn)為是可見的，因?yàn)樗麄內(nèi)匀徽紦?jù)空間布局魄宏。不在文檔中的元素被認(rèn)為是不可見的秸侣，如果當(dāng)他們被插入到文檔中，jQuery 沒有辦法知道他們是否是可見的宠互，因?yàn)樵乜梢娦砸蕾囉谑褂玫臉邮健?/p>

9. 屬性篩選選擇器

   • $( "[attribute |= 'value']" ) ==> 選擇指定屬性值等于給定字符串或以該字符串為前綴（該字符串后跟一個(gè)連字符 '-'）的元素

   • $( "[attribute = 'value']" ) ==> 選擇指定屬性具有包含一個(gè)給定的子字符串*的元素（選擇給定屬性是包含某些值的元素）

   • $( "[attribute ~= 'value']" ) ==> 選擇指定屬性用空格分隔的值中包含一個(gè)給定值的元素

   • $( "[attribute = 'value']" ) ==> 選擇指定屬性是給定值的元素

   • $( "[attribute != 'value']" ) ==> 選擇不存在指定屬性味榛，或者指定的屬性不等于給定值的元素

   • $( "[attribute ^= 'value']" ) ==> 選擇指定屬性是以給定字符串開始的元素

   • $( "[attribute $= 'value']" ) ==> 選擇指定屬性是以給定值結(jié)尾的元素

   • $( "[attribute]" ) ==> 選擇所有具有指定屬性的元素，該屬性是任意值

10. 表單元素選擇器

    • $( ":input" ) ==> 選擇所有 input textarea select 和 button 的元素

    • $( ":text" ) ==> 匹配所有文本框

    • $( ":password" ) ==> 匹配所有密碼框

    • $( ":raido" ) ==> 匹配所有單選按鈕

    • $( ":checkbox" ) ==> 匹配所有復(fù)選框

    • $( ":submit" ) ==> 匹配所有提交按鈕

    • $( ":image" ) ==> 匹配所有圖像域

    • $( ":reset" ) ==> 匹配所有重置按鈕

    • $( ":button" ) ==> 匹配所有按鈕

    • $( ":file" ) ==> 匹配所有文件域

    說明：
    1. 除了 input 篩選選擇器予跌，其余每個(gè)表單類別選擇器都對(duì)應(yīng)一個(gè) input 元素的 type 值搏色，所以其都可以用屬性篩選選擇器替換
    2. $( ":password" ) === $( "[type = password]" )

11. 表單對(duì)象屬性篩選選擇器

    • $( ":enabled" ) ==> 選取可用的表單元素

    • $( ":disabled" ) ==> 選取不可用的表單元素

    • $( ":checked" ) ==> 選取被選中的 <input> 元素

    • $( ":selected" ) ==> 選取被選中的 <option> 元素

    說明：
    1. 選擇器適用于復(fù)選框和單選框，對(duì)于下拉框元素使用 :selected 選擇器
    2. 在使用 :checked 的時(shí)候券册，最佳實(shí)踐是使用 input: checked

12. 子元素篩選選擇器

    • $( ":first-child" ) ==> 選擇所有父級(jí)元素下的第一個(gè)子元素

    • $( ":last-child" ) ==> 選擇所有父級(jí)元素下的最后一個(gè)子元素

    • $( ":only-child" ) ==> 如果某個(gè)元素是其父元素下的唯一子元素频轿，那么它就會(huì)被選中

    • $( ":nth-child(n)" ) ==> 選擇所有父級(jí)元素下的第 n 個(gè)子元素垂涯，n 是索引值，從 1 開始

    • $( ":nth-last-child(n)" ) ==> 選擇所有父級(jí)元素下的第 n 個(gè)子元素航邢，計(jì)數(shù)從最后一個(gè)開始

13. 特殊選擇器

    • this ==> 表示當(dāng)前的上下文對(duì)象是一個(gè) HTML 對(duì)象耕赘，可以調(diào)用 HTML 對(duì)象所擁有的屬性和方法

    • $(this) ==> 代表上下文是一個(gè) jQuery 的上下文對(duì)象，可以調(diào)用 jQuery 的方法和屬性值

jQuery 屬性與樣式

1. .attr()
   獲取和設(shè)置元素屬性（DOM操作）

   • .attr(傳入屬性名) ==> 獲取屬性值
   • .attr(屬性名, 屬性值) ==> 設(shè)置屬性值
   • .attr(屬性名, 函數(shù)值) ==> 設(shè)置屬性的函數(shù)值
   • .attr(attribute) ==> 給指定元素設(shè)置多個(gè)屬性值
     .attr({屬性名1: "屬性值1" , 屬性名2: "屬性值2", ...})

   說明：Attribute 和 Property
   1. Attribute 屬性 膳殷， Property 特性
   2. Attribute 就是 DOM node 自帶的屬性（id操骡、class、title）秽之，Property 是 DOM 元素作為對(duì)象当娱，其附加的內(nèi)容（nodeName、nodeType考榨、tagName）

2. .removeAttr()
   為匹配的元素集合中的每個(gè)元素移除一個(gè)屬性 attributeName

3. .html()
   獲取或設(shè)置匹配元素的 HTML 內(nèi)容

   • .html() ==> 獲取集合中第一個(gè)匹配元素的 HTML 內(nèi)容
   • .html(htmlString) ==> 設(shè)置每一個(gè)匹配元素的 HTML 內(nèi)容
   • .html(function(index, oldhtml)) ==> 用來返回設(shè)置 HTML 內(nèi)容的一個(gè)函數(shù)
     說明：
     .html() 方法內(nèi)部使用的是 DOM 的 innerHTML 屬性來操作的跨细，這個(gè)操作是針對(duì)整個(gè) HTML 內(nèi)容（包括文本內(nèi)容）

4. .text()
   得到匹配元素集合中的每個(gè)元素的文本內(nèi)容的結(jié)合，包括他們的后代河质，或者設(shè)置匹配元素集合中每個(gè)元素的文本內(nèi)容為指定的文本內(nèi)容

   • .text() ==> 獲取匹配元素集合中每個(gè)元素的合并文本冀惭，包括他們的后代
   • .text(textString) ==> 用來設(shè)置匹配元素內(nèi)容的文本
   • .text(function(index, text)) ==> 用來返回設(shè)置文本內(nèi)容的一個(gè)函數(shù)

   說明：.html() 和 .text()
   1. .html() 處理元素內(nèi)容，.text() 處理文本內(nèi)容
   2. html() 只能使用在 HTML 文檔中掀鹅，.text() 在 XML 文檔和 HTML 文檔都能使用
   3. 若處理對(duì)象只有一個(gè)子文本節(jié)點(diǎn)散休，則 .html 和 .text() 處理結(jié)果相同

5. .val()
   處理表單元素的值

   • .val() ==> 獲取匹配元素集合中第一個(gè)元素的當(dāng)前值
   • .val(value) ==> 設(shè)置匹配的元素集合中每個(gè)元素的值
   • .val(function(){}) ==> 一個(gè)用來返回設(shè)置值的函數(shù)

   說明：.html() 和 .text()
   1. .val() 處理 select 元素，當(dāng)沒有選擇項(xiàng)被選中時(shí)乐尊，它將返回 null
   2. 若 select 元素有 multiple 屬性戚丸，并且至少一個(gè)選擇項(xiàng)被選中時(shí)， .val() 將返回一個(gè)數(shù)組扔嵌，這個(gè)數(shù)組包含每個(gè)選中選擇項(xiàng)的值
   3. .val() 方法多用來設(shè)置表單的字段的值

6. .addClass()
   動(dòng)態(tài)增加 class 類名

   • .addClass(className) ==> 為每個(gè)匹配元素增加一個(gè)或多個(gè)類名
   • .addClass(function(index, currentClass){}) ==> 這個(gè)函數(shù)返回一個(gè)或更多用空格隔開的要增加的樣式名

   說明：
   1. .addClass() 方法不會(huì)替換一個(gè)樣式類名限府，它只是簡(jiǎn)單的添加一個(gè)類名到元素上
   2.

   <script>
     $('div').addClass(function(index, className){
         if( className.indexOf(index) !== -1 ){
             $(this).addClass('red')
         }
      })
   </script>
   

7. .removeClass()
   刪除全部或者指定的 class

   • .removeClass([className]) ==> 每個(gè)匹配的元素移除一個(gè)或?qū)€(gè)用空格隔開的樣式名
   • .removeClass(function(index, class)) ==> 返回一個(gè)或多個(gè)要被移除的樣式名的函數(shù)

   說明：如果 .removeClass() 沒有參數(shù)，則會(huì)移除所有的樣式類

8. .toggleClass()
   在匹配的元素集合中的每個(gè)元素上添加或刪除一個(gè)或多個(gè)樣式類痢缎，取決于這個(gè)樣式是否存在胁勺，即：如果存在就刪除一個(gè)類，如果不存在就添加一個(gè)類

   • .toggleClass(className) ==> 切換類
   • .toggleClass(className,switch) ==> 一個(gè)布爾值独旷，用來判斷樣式是否應(yīng)該被添加或移除
   • .toggleClass(function(index, class, switch){})

9. .css()
   獲取元素樣式屬性的計(jì)算值或者設(shè)置元素的 CSS 屬性
   獲取

   • .css( "propertyName" ) ==> 獲取匹配元素集合中的第一個(gè)元素的樣式屬性的計(jì)算值
   • .css( "propertyNames" ) ==> 傳遞一組數(shù)組署穗，返回一個(gè)對(duì)象結(jié)果

   設(shè)置

   • .css( 'propertyName', 'value' ) ==> 設(shè)置 CSS
   • .css( 'propertyName', function ) ==> 可以傳入一個(gè)回調(diào)函數(shù)，返回取到對(duì)應(yīng)的值進(jìn)行處理
   • .css( 'properties ) ==> 可以傳入一個(gè)對(duì)象嵌洼，同時(shí)設(shè)置多個(gè)樣式案疲，用 { } 括起

   說明：
   1. 通過 .css() 方法設(shè)置的樣式屬性優(yōu)先級(jí)要高于 .addClass() 方法
   2. 若是靜態(tài)結(jié)構(gòu)，確定了布局規(guī)則麻养，使用 .addClass() 方法增加類
   3. 若是動(dòng)態(tài)的 HTML 結(jié)構(gòu)褐啡，在不確定布局或者經(jīng)常要變化的情況下，使用 .css() 方法
   4. .addClass() 不能獲取到指定樣式的屬性值回溺，.css() 可以獲取到指定的樣式值