關於前端jquery的總結


  • 簡介

  jQuery是一個JavaScript庫,特性豐富,包含若干對象和很多函數,可以代替傳統DOM編程的操作方式和操作風格,通過對DOM  API、DOM事件的封裝,提供了一套全新的API,這套全新的API更簡單更靈活,而且,jQuery考慮並解決了不同瀏覽器之間的兼容性問題,所以在使用jQuery進行編程的時候,不用顧慮兼容性問題,可以鏈式編程提高開發速度,有隱式迭代的效果,還有類似css選擇器的強大功能。jQuery宗旨是:write less, do more.

  • $對象和Jquery對象

  就像DOM的編程入口是document對象一樣,jQuery的編程入口是$對象,它是jQuery的核心對象。$對象也是一個函數對象,我們可以使用$()的形式調用它,傳遞給$()不同的參數可以做不同的事情,$函數異常強大! $函數可以把若干個DOM對象包裝進一個對象,這個對象稱為jQuery對象,jQuery對象可以看成數組對象,此外還擁有一整套全新的方法

  • Jquery選擇器

  jQuery的編程思路和DOM一樣,先獲取到要操作的元素,然后操作該元素。為了能准確的獲取元素,jQuery站到了CSS的肩膀上——直接復制了CSS選擇器語法。jQuery選擇器中除了偽類選擇器外絕大部分和CSS選擇器相同 

  選擇器類型:標簽選擇器、id選擇器、類選擇器、屬性選擇器、偽類選擇器、復合選擇器

  語法:$( selector ) 或者 $( selector , parent )

  • 屬性選擇器

  [attr]選擇有attr屬性的元素 

  [attr=val] 選擇以attr屬性值為val的元素 

  [attr^=val]  選擇以attr屬性值以val開頭的元素

  [attr$=val]  選擇以attr屬性值以val結尾的元素

  [attr*=val]  選擇以attr屬性值中包含val的元

  • 偽類選擇器

  :first     第一個元素

  :last      最后一個元素

  :even    第偶數個

  :odd     第奇數個

  :eq(index)   第index個

  :gt(index)    第index之后的

  :lt(index)     第index之前的

  :not( selector )     對括號里面的選擇器取反

  :first-child    第一個子元素

  :last-child    最后一個子元素

  :n-child       第n個子元素

  • 復合選擇器

  selector1空格selector2   在1選中的元素中,使用2篩選其后代元素(2不要使用偽類選擇器)

  selector1>selector2       在1選中的元素中,使用2篩選其子元素 

  selector1~selector2    在1選中的元素中,使用2篩選其后續兄弟元素 

  selector1+selector2    在1選中的元素中,使用2篩選其后續緊鄰的兄弟元素

  selector1,selector2     各個選擇器的並集

  selector1(沒有空格)selector2    各個選擇器的交集(復合后可識別才可以這樣使用) 

  • jQuery特性:隱式迭代

  jQuery選擇器可能會選中多個DOM元素,jQuery會把選中的多個DOM元素封裝成一個jQuery對象,實際上是個JavaScript數組對象。對jQuery對象進行的操作實際上會對數組里面的每個元素都進行(個別操作只對第一個數組元素進行)

  如:

  $("div").css("backgroundColor", "lightgray"); //這句代碼會把每一個div元素的背景色設置為淺灰色

  隱式迭代特性配合jQuery選擇器,使得使用jQuery進行編程十分簡潔和高效。

  當我們希望對jQuery對象包含的DOM對象進行不同的操作時,可以使用jQuery對象的each()方法主動遍歷內部的每個DOM對象,並進行針對性處理

  each用法:

  $(selector).each(function(index,element)

  {

    //index選擇器當前的索引位置,element是當前選擇的元素

  })

  • Jquery操作元素屬性

  attr(attrName)                獲取第一個元素的該屬性的值

  attr(attrName,value)      設置所有元素的該屬性的值

  attr(attrName,  function(index,  value){  })   設置所有元素的該屬性的值,值由函數的返回值決定,index表示元素索引,value表示該屬性的原值

  atrr()函數無論對HTML元素固有的屬性還是我們自定義的屬性都有效,但對於類似復選框的checked屬性,以及元素的那5個只讀屬性(offsetXxx),大家要使用jQuery對象的prop()函數來操作,但prop()函數對自定義屬性無效。

  • jQuery操作元素的CSS樣式

  操作元素的style屬性

  css(propName)

  css(propName, value)

  css(propName, function(index, value){  })

  操作元素的class屬性

  addClass(class)

  removeClass(class)

  toggleClass(class)      切換class(如果存在就刪除,如果不存在就添加)

  注意:也可以使用attr()函數來操作style屬性以及class屬性,但是有風險,千萬不要使用 。因為style屬性的值可能有多個,但是使用attr的話,你重新賦的值會把之前已有的值全給刪掉

  • 操作元素的文本內容、子節點、元素值

  html()                獲取第一個元素的HTML內容(包括子元素和文本內容)

  html(string)       設置所有元素的HTML內容(效果等同於DOM對象的innerHTML屬性)

  val()                   獲取第一個元素的value屬性的值(如果有value屬性的話)

  val(string)          設置所有元素的value屬性的值

  • 操作元素節點

  $(html)                    創建元素節點

  append(content)     插入子節點

  before(content)       插入兄弟節點

  remove()    刪除元素自己

  children()    獲得元素的子元素

  parent()      獲得元素的父元素

  prevall()      獲得元素之前的兄弟元素

  nextall()      獲得元素之后的兄弟元素

  siblings()     獲得兄弟元素

  • Jquery事件處理

  文檔加載完成事件

  $(document).ready(function(){  });或者$(function(){  });

  其他常見事件

  jQuery提供了一系列如click()、focus()、mouseover()等方法,給元素注冊對應的事件處理函數。如$("div").click( function(){  alter('xx') });  這句代碼給所有div元素的點擊事件注冊了處理函數。特別的,jQuery提供了ready()函數來代替window的load加載事件,ready()可以在文檔的DOM結構加載完成后就觸發,而不必等到頁面的圖片等資源也加載完成,並且這些函數都可以多次使用

  $(this)的使用

  因為jQuery的隱式迭代特性,使用jQuery注冊的事件處理函數中的this實際上是DOM對象,因此this可以調用DOM  API,也可以使用$(this)調用jQuery  API

  例子代碼:

$(document).ready(function(){
        $("div").click(function(){
                alert(this);
         });
});
  • 鏈式編程

  如果打算對一個jQuery對象做一組動作,使用jQuery的鏈式編程更優雅,為了支持鏈式編程,大部分jQuery方法的返回值還是此jQuery對象本身。

  如:$("div").mouseout().click();

  但有些jQuery方法返回的jQuery對象並不是原來的jQuery對象了(稱為斷鏈),這時可以使用end()返回斷鏈之前的狀態

  如:$("#div01").siblings().html("other").end().html("div01");

  但對於那些返回值不是jQuery對象的方法,就沒辦法把鏈接上了

  $("div").html();

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com