JQ基礎

一.選擇器

1.基本選擇器：基本選擇器是Jquery中最經常使用的選擇器，也是最簡單的選擇器，他經過元素id、class和標籤名等來查找DOM元素。在網頁中，每一個id名稱只能使用一次，class容許重複使用。

 

#id       根據給定的id匹配一個元素  $("#test")選取id爲test的元素

.class    根據給定的類名匹配元素    $(".test")選取全部class爲test的元素

element   根據給定的元素名匹配元素  $("p")選取全部的 元素

*         匹配全部元素              $("*")選取全部的元素

selector1,selector2,...selectorN    $("div,span,p.myClass")選取全部 ,和擁有class爲myClass的 標籤的一組元素

 

2.層次選擇器：經過DOM元素之間的層次關係來獲取特定元素，例如後代元素、子元素、相鄰元素和同輩元素等。

$("ancestor descendant")   選取ancestor元素裏的全部descendant(後代)元素    $("div span")選取 裏的全部的元素

 

$("parent>child")選取parent元素下的child(子)元素，與$("ancestor descendant")有區別，$("ancestor descendant")選擇的是後代元素   $("div>span")選取

元素下元素名是的子元素

 

$("prev+next")  選取緊接在prev元素後的next元素   $(".one+div")選取class爲one的下一個

同輩元素。

 

$("prev~siblings")選取prev元素以後的全部siblings元素    $("#two~div")選取id爲two的元素後面的全部

同輩元素。

 

3.過濾選擇器

1.基本過濾選擇器

a.:first   選取第一個元素     $("div:first")選取全部

元素中第一個                              

元素

b.:last    選取最後一個元素   $("div:last")選取全部

元素中最後一                              個

元素

c.:not(selector) 去除全部與給定選擇器匹配的元素   $("input:not(.mayclass)")選取class不是myClass元素

  

d.:even/:odd選取索引是偶數/奇數的全部元素

 

e.:eq(index)/gt(index)/lt(index)選取索引等於/大於/小於index的元素

 

f.:header   選取全部的標題元素   $(":header")選取網頁中全部的

g.:animated  選取當前正在執行動畫的全部元素   $("div:animated")

h.:focus  選取當前得到焦點的元素  

2.內容過濾選擇器

a.:contain(text)   選取含有文本內容爲text的元素   $("div:contains('我')")選取含有文本‘我’的div元素

b.:empty 選取不包含子元素或文本的空元素    $("div:empty")選取不包含子元素的空元素

c.:has(selector)選取含有選擇器所匹配的元素的元素  $("div:has(p)")選取含有元素的元素

d.:parent      選取含有子元素或文本的元素       $("div:parent")選取擁有子元素（包括文本元素）的 元素

 

3.可見性過濾選擇器

a.:hidden    選取全部不可見的元素

b.:visible   選取全部可見的元素   $("div:visible")選取全部可見的 元素

 

4.屬性過濾選擇器：經過元素的屬性來獲取相應的元素

a.[attribute]     選取擁有此屬性的元素   $("div[id]")選取擁有屬性id的元素    $("div[id]")選取擁有屬性id的元素

 

b.[attribute=value]    選取屬性值爲value的元素     $("div[title=test]")選取屬性title爲"test"的 元素

 

c.[attribute!=value] 不等於value

  [attribute^=value] 以value開始的元素

  [attribute$=value] 以value結束的元素

  [attribute*=value] 含有value的元素

  [attribute|=value] 選取屬性等於給定字符串或以該字符串爲前綴的元素 

  [attribute~=value] 選取屬性用空格分隔的值中包含一個給定值得元素

  [attribute1][attribute2][attributeN]

 

5.子元素過濾選擇器

a.:nth-child(index/even/odd/equation) 選取每一個父元素下的第index個子元素或奇偶元素（index從1算起）

  

b.:first-child   選取每一個父元素的第一個子元素    $("ul li:first-child") 選取每一個 中第一個 元素

 

c.:last-child    選取每一個父元素的最後一個子元素

 

d.only-child   若是某個元素是它父元素中惟一的子元素，那麼將會被匹配。若是父元素中含有其它元素，則不會被匹配。

 

6.表單對象屬性過濾選擇器

a. :enable/disabled  選取全部可用/不可用元素     $("#form1 :enabled") 選取id 爲form1的表單內的全部可用/不可用元素

 

b. :checked    選中所被選中的元素（單選框、多選框） $("input:checked")

 

c. :selected    選取全部被選中的選項元素    $("select option:selected")

 

7. 表單選擇器

 :input  :text   :password  :radio   :checkbox  :submit    :image  :reset  :button  :file   :hidden

 

二.插入節點

append()       向每一個匹配的元素內部追加內容

appendTo()     將全部匹配的元素追加到指定的元素中  $(A).appendTo(B)將A追加到B

prepend()      向每一個匹配的元素內部前置內容   

prependTo()    將全部匹配的元素前置到指定的元素中

after()        在每一個匹配的元素以後插入內容

insertAfter()  將全部匹配的元素插入到指定元素的後面

before()       在每一個匹配元素以前插入內容

insertBefore() 將全部匹配的元素插入到指定的元素的前面

     

三.detach()和remove()同樣，也是從DOM中去掉全部匹配的元素，但detach()不會把匹配的元素從JQuery對象中刪除，於是能夠在未來再使用這些元素。   與remove()不一樣的是，全部綁定的事件、附加的數據等都會保存下來。

 

四.clone()複製節點後，被複制的新元素不具備任何行爲。clone(true)含義是   複製元素的同時複製元素中所綁定的事件。 

 

五.replaceWith():將全部匹配的元素都替換成指定的HTML或者DOM元素

   replaceAll():顛倒了replaceWith()的用法。

 

六.wrap():將某個節點用其餘元素包裹起來。

   wrapAll():將全部匹配的元素用一個元素來包裹。它不一樣於wrap(),wrap()方法是將全部的元素進行單獨的包裹。

   wrapInner():將每個匹配的元素的子內容（包括文本節點）用其餘結構化的標記包裹起來。

七.removeAttr():刪除元素屬性

   attr():獲取屬性

 

八.attr("class") 獲取元素的class

   addClass()追加樣式

   若是給一個元素添加了多個class值，就至關於合併了它們的樣式。

   若是有不一樣的class設定了同同樣式屬性，則後者覆蓋前者。

   removeClass()   $p.removeClass(" high another");同時移除多個

 

九.toggle():主要控制行爲上的重複切換，若是元素原來是隱藏的則顯示它，            若是原來是顯示的則隱藏它。

 

十.hasClass() 判斷元素中是否含有某個class,若是有返回true.

 

十一.遍歷節點

a.children():取得匹配元素的子元素集合。children()方法只考慮子元素不考慮其餘後代元素。

b.next():取得匹配元素後面緊鄰的同輩元素。

c.prev():取得匹配元素前面緊鄰的同輩元素。

d.siblings():取得匹配元素先後全部的同輩元素（除他自身）。

e.closet():取得最近的匹配元素。首先檢查當前元素是否匹配，若是匹配則直接返回元素自己。若是不匹配則            向上查找父元素，逐級向上直到找到匹配選擇器的元素。若是什麼都沒有，返回一個空的JQuery對            象。

f.find()/filter()/nextAll()

 

十二.$(document).ready()方法和window.onload()方法有類似的功能，可是在執行時機方面有區別。               window.onload()是在網頁中全部元素徹底加載到瀏覽器後才執行，即JavaScript此時才能夠訪問頁面中       的任何元素。而經過jQuery中的$(documnent).ready()方法註冊的事件處理程序，在DOM徹底就緒時就可       以被調用。

      JavaScript的onload事件一次只能保存對一個函數的引用，它會自動用後面的函數覆蓋前面的函數，所以       不能在現有的行爲上添加新的行爲。而$(document).ready()方法會在現有的行爲上添加新的行爲。這些       行爲函數會根據註冊的順序依次執行。

十三.jQuery有兩個合成事件——hover()方法和toggle()方法。

     hover(enter,leave)方法用於模擬光標懸停事件。當光標移動到元素上時，會觸發指定的第一個函數         （enter）;當光標移出這個元素時，會觸發指定的第二個函數(leave)。

    $(function(){

         $("#panel h5.head").hover(function(){

                 $(this).next().show();

           },function(){

                 $(this).next().hide(); 

          });

     });

     toggle()方法用於模仿鼠標連續單擊事件。第一次單擊元素時，觸發指定的第一個函數；當再次點擊同一      元素時，則觸發指定的第二個函數。最經常使用的是切換元素的可見狀態。若是元素時可見的，單擊切換後則      爲隱藏；若是元素時隱藏的，單擊切換後則爲可見的。

十四.事件冒泡：事件會按照DOM的層次結構像水泡同樣不斷向上直至頂端。

     事件對象：event

     阻止事件冒泡：stopPropagation()    event.stopPropagation(); 

十五.阻止默認行爲：網頁中的元素有本身的默認行爲，例如單擊超連接後會跳轉、單擊「提交」按鈕後表單會      提交，有時須要阻止元素的默認行爲。preventDefault()方法來阻止元素的默認行爲。return false;可實      現一樣功能。