一、jQuery

jQuery相信前端開(kāi)發(fā)者，再熟悉不過(guò)了。它是一個(gè)快速，簡(jiǎn)潔的Javascript框架。jQuery的宗旨：write Less，Do More！對(duì)于正在學(xué)習(xí)Html5的我來(lái)說(shuō)，學(xué)習(xí)jQuery是必經(jīng)之路。下面，就把學(xué)到的一些知識(shí)點(diǎn)與大家共勉。

二、Selector(選擇器)

在jQuery中，我們會(huì)用到提供的一些選擇器，以至于幫助我們更快找到指定的節(jié)點(diǎn)。不管什么選擇器都是 $(xx)

1）id選擇器

id就是用來(lái)查找元素的唯一標(biāo)志，即元素的id屬性。id是唯一的，每個(gè)頁(yè)面只能有一個(gè)id值。

$("#id")

其實(shí)這個(gè)選擇器內(nèi)部實(shí)現(xiàn)，就是調(diào)用了js的原生代碼 document.getElementById()

2）class選擇器

class選擇器就是通過(guò)class樣式來(lái)獲取元素節(jié)點(diǎn)。它不像id選擇器那樣，class選擇器可以多選，所以效率就會(huì)第一點(diǎn)，有利有弊吧。

$(".class")

其實(shí)它就是原生js中getElementsByClassName()函數(shù)來(lái)實(shí)現(xiàn)的。

3）element選擇器

元素選擇器就是根據(jù)Html標(biāo)記名稱(chēng)來(lái)獲取所有元素的。

$("element")

它會(huì)查詢(xún)到指定元素標(biāo)簽名下的所有節(jié)點(diǎn)，同樣的 也可以用原生js方法來(lái)獲取getElementsByTagName()

4）* 選擇器

*號(hào)的意思 作為程序員 基本都能 想到吧，就是所有的意思：所有的元素

$(" * ")

其實(shí) 通過(guò)js的方法 document.getElementsByTagName() 中傳遞"*"也可以拿到。

5）層級(jí)選擇器

層級(jí)選擇器我理解的意思其實(shí)就是父子，兄弟姐妹，祖孫的關(guān)系。
即：子元素 后代元素 兄弟元素 相鄰元素。

1. 后代選擇器 (空格標(biāo)示)

// 后代選擇器  即選中元素的 ： 所有后代元素（兒子 孫子 曾孫子）
$("p  descendant") 

2. 子選擇器 （>）

// 子選擇器 選擇所有父元素的 指定的 直接  child元素
$("parent > child")

3. 相鄰兄弟選擇器 （+）

// 選擇所有 緊鄰 在 pre元素后的 第一個(gè) 兄弟元素
$("pre + next")

4. 一般兄弟選擇器 （~）

// 選擇所有 pre元素后的 所有 兄弟姐妹元素 必須具有相同的父輩。
$("pre ~ sibling")

PS:(這里我列舉了一些常用的選擇器 篩選選擇器和css中的偽元素相識(shí) 即 以 : 開(kāi)頭。jQuery中的合集索引都是從 0 開(kāi)始的 )

6）篩選選擇器

1. 選擇第一個(gè)元素

// 選擇第一個(gè)元素
$(":first")

2. 選擇最后一個(gè)元素

$(":last")

3. 選擇所有元素去除 不匹配 給定的選擇器元素

//選擇 沒(méi)有選中屬性的 input標(biāo)簽
$("input:not(:checked)")

4. 選擇匹配集合索引為index 的元素

$("p:eq(index)")

5. 選擇所有大于給定index的元素

$("p:gt(index)")

6. 選擇所有小于給定index的元素

$("p:lt(index)")

7. 索引為偶數(shù)的元素 從index為0開(kāi)始

$("p:even")

8. 索引為奇數(shù)的元素 從index為0開(kāi)始

$("p:odd")

9. 選擇所有標(biāo)題元素 h1 - h2 -h3 .....

$(":header")

10. 選擇所有執(zhí)行動(dòng)畫(huà)的元素

$(":animated")

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

1. 選擇所有包含 指定文本的元素

$(":contains(text)")

2. 選擇至少包含指定元素的元素

$(":has(ele)")

3. 選擇所有 包含 子元素或者文本的元素

// 子元素文本不能為空的元素
$(":paraent")

4. 選擇所有 不包含子元素的元素（包含文本節(jié)點(diǎn)）

// 無(wú)子元素 或者 有文本 的元素
$(":empty")

8) 屬性選擇器

1. 選擇指定屬性是給定值的元素

//查找所有div中，屬性name=p1的div元素
$("div[name = 'p1']")

2. 選擇指定屬性包含一個(gè)給定字符串的元素 （或選擇給定的屬性是以包含某些值的元素）

//查找所有div中，有屬性name中的值包含一個(gè)test字符串的div元素
$("div[name *= "test"]")
$("div[name *= "xx-test-xx"]")

9) 子元素篩選選擇器

1. 選擇所有父級(jí)元素下的第一個(gè)子元素

// 它和 選擇器 :frist 的區(qū)別就是  :first-child 即為每個(gè)父級(jí)元素匹配第一個(gè)子元素。  而:first只匹配一個(gè)元素
$(":first-child")

2. 選擇所有父級(jí)元素下的最后一個(gè)子元素

//// 它和 選擇器 :last 的區(qū)別就是  :last-child 即為每個(gè)父級(jí)元素匹配最后一個(gè)子元素。  而:last只匹配一個(gè)元素
$(":last-child")

3. 唯一子元素選擇器

//如果某元素是唯一的子元素 它就會(huì)被選中
$(":only-child")

4. 選擇他們所有父元素的第n個(gè)子元素

//$(".last-div a:nth-child(2)") 查找class為last-div 下的第二個(gè)子元素
$(":nth-child") 

5. 選擇他們所有父元素的第n個(gè)子元素 計(jì)數(shù)從最后一個(gè)開(kāi)始計(jì)數(shù)

//$(".last-div a:nth-last-child(2)") 查找class為last-div 下的倒數(shù)第二個(gè)子元素
$(":nth-last-child") 

10) 表單元素選擇器

1. 選擇所有 input textarea select button 元素

$(":input") 

2. 匹配所有文本框

$(":text")

3. 匹配所有單選按鈕

$(":radio")

4. 匹配所有復(fù)選框

$(":checkBox")

5. 匹配所有按鈕

$(":button")

6.選取可用的表單元素

$(":enabled")

7.選取不可用的表單元素

$(":disabled")

8. 選取被選中的<input>元素

$(":checked")

9. 選取被選中的<option>元素

$(":selected")

三、屬性、樣式

1) attr設(shè)置屬性

在jQuery中可以用attr()設(shè)置元素屬性。

1. attr(proName):獲取屬性的值
   2.attr(proName,vlaue)：設(shè)置屬性的值
   3.attr(proName,函數(shù)值):設(shè)置屬性的函數(shù)值
   4.attr(attributes):設(shè)置多個(gè)屬性 ：{name ： vlaue，name2：vlaue}

2) removeAttr移除屬性

$("p").removeAttr(attName) // 移除p元素的某屬性

3) 修改元素的html結(jié)構(gòu) 或者文本 html() / text()

• html()
  1.html() 不傳參數(shù) ：即獲得第一個(gè)匹配元素的html文檔結(jié)構(gòu)
  2.html(htmlstring): 設(shè)置每一個(gè)匹配元素的html內(nèi)容
  3.html(function(index,oldHtml)):返回設(shè)置html內(nèi)容的一個(gè)函數(shù)

  $("p").html(function(index,text){
            return '增加內(nèi)容' + text
        })

• text()
  獲取每個(gè)匹配元素的文本內(nèi)容，包括他的后代，也可以設(shè)置匹配元素的文本內(nèi)容。其結(jié)果返回一個(gè)字符串，包含所有匹配元素的合并文本。
  1.text():獲取匹配元素集合中每個(gè)元素的合并文本
  2.text(string) : 用于設(shè)置匹配元素的文本
  3.text(function(index,text))
• html() 與 text() 異同
  1.html()處理的是元素內(nèi)容，而text()處理的是文本內(nèi)容
  2.html()只能用在html文檔中 text()可用在xml和html中

4) val()

這個(gè)方法主要用于獲取表單元素的值 ：input、textarea、select
1.val()無(wú)參數(shù) ：獲取匹配元素集合中第一個(gè)元素的當(dāng)前值
2..val(v)：設(shè)置匹配元素中每個(gè)元素的值
3.val(function)：用來(lái)返回設(shè)置值的函數(shù)
當(dāng)select有多個(gè)組時(shí)，.val()返回一個(gè)包含選擇項(xiàng)的值的數(shù)組。
.val() .html() .text() 三個(gè)方法都可以用來(lái)讀取指定元素的內(nèi)容 ，html()讀取的是html內(nèi)容或者h(yuǎn)tml標(biāo)簽 ，.text()只是獲取純文本包括其后代 ,.val()只是獲取表單元素的值 并且只能用于表單。若html()用在多個(gè)元素上 只是獲取第一個(gè)元素的值 .val()也是如此。但是.text()用在多個(gè)元素上時(shí) 是獲取的所有元素文本的內(nèi)容

5）增加樣式addClass() 移除樣式removeClass()

• addClass()
  在html中 多個(gè)class樣式 可以用空格隔開(kāi) addClass可以動(dòng)態(tài)增加class名字,它并不會(huì)替換一個(gè)樣式名，只是簡(jiǎn)單的添加一個(gè)樣式到元素上
  1.addClass(className):為每個(gè)匹配元素增加一個(gè)或者多個(gè)樣式名
  2.addClass(function(indecx,currentClass)):

        //通過(guò)className(fucntion)方法
        //這個(gè)函數(shù)返回一個(gè)或更多用空格隔開(kāi)的要增加的樣式名。
        //接收index 參數(shù)表示元素在匹配集合中的索引位置和html 參數(shù)表示元素上原來(lái)的 HTML 內(nèi)容
 $("div").addClass(function(index,className) {

            //找到類(lèi)名中包含了name的元素
            if(-1 !== className.indexOf('name')){
                //this指向匹配元素集合中的當(dāng)前元素
                $(this).addClass('xxClass')
            }
        });

• removeClass()
  移除一個(gè)元素上的class樣式
  1.removeClass(className):移除一個(gè) 或者 多個(gè)用空格隔開(kāi)的樣式名
  2.removeClass(function(index,class)):返回一個(gè) 或者 多個(gè)將要移除的樣式名字

6) 切換樣式toggleClass()

即在addClass和removeClass之間的切換，存在就移除，不存在就添加
1.toggleClass(className):在匹配的元素集合中的每個(gè)元素切換一個(gè)或者多個(gè)樣式類(lèi)名
2.toggleClass(className,switch)：switch布爾值，用于判斷是否應(yīng)該添加或者刪除
3..toggleClass( function(index, class, switch) [switch ] )：用來(lái)返回在匹配的元素集合中的每個(gè)元素上用來(lái)切換的樣式類(lèi)名的一個(gè)函數(shù)。接收元素的索引位置和元素舊的樣式類(lèi)作為參數(shù)

7) 切換操作css()

.css()獲取元素樣式屬性或者設(shè)置元素css屬性

• 獲取
  1.css(proName):獲取匹配元素的屬性
  2.css(propertyNames):傳遞一個(gè)數(shù)組
• 設(shè)置

1. css(proName,vlaue)
   2.css( propertyName, function )：可以傳入一個(gè)回調(diào)函數(shù)，返回取到對(duì)應(yīng)的值進(jìn)行處理
   3.css( properties )：可以傳一個(gè)對(duì)象，同時(shí)設(shè)置多個(gè)樣式
   css({ 'font-size' :"15px", "background-color" :"#40E0D0", "border" :"1px solid red" })

四、總結(jié)

jQuery還有好多方法，我這里總結(jié)了一下jQuery一下操作樣式的方法，后續(xù)會(huì)總結(jié)一些，jQuery事件，jQuery動(dòng)畫(huà)等。最近學(xué)前端學(xué)的感覺(jué)入門(mén)了不少，如果你想學(xué)一門(mén)新的語(yǔ)言，那就應(yīng)該去了解實(shí)踐它，不是你看看就可以學(xué)會(huì)的。在上篇文章中，我推薦的那本JavaScript的書(shū)，寫(xiě)的很好，我基本每天中午午睡前都看那么幾頁(yè)，在我看完后，會(huì)寫(xiě)一下心得，到時(shí)候會(huì)分享出來(lái)一起學(xué)習(xí)。
如果覺(jué)得我的文章寫(xiě)的不錯(cuò)，給個(gè)小??吧。