jQuery學習小結

1.size( )和length的區別

（1）針對標籤對象元素，好比數html頁面有多少個段落元素<p></p> ，那麼此時的$("p").size() == $("p").length ；

（2）計算一個字符串的長度或者計算一個數組元素的個數 那麼此時只能用length而不能用size()；

 

2.closet()、parent()、parents()的區別

.closet()--開始於當前元素， 在 DOM 樹中向上遍歷，直到找到了與提供的選擇器相匹配的元素， 返回包含零個或一個元素的jQuery對象。

.parent()-- 只進行一個單級的DOM樹查找，也就是隻查找一層，找到直接的父元素，而不是更加上級的祖先元素。此外，$( "html" ).parent()方法返回一個包含document的集合，而$( "html" ).parents()返回一個空集合。

.parents()--開始於父元素， 向上遍歷DOM樹到文檔的根元素，每一個祖先元素加入到臨時集合，若是提供一個選擇器，則會使用該選擇器在集合中進行過濾， 返回包含零個、一個或多個元素的jQuery對象。

 

3.this和$(this)

若是使用html元素自己的屬性或方法就須要使用this， this是html元素對象，能調用元素屬性；

若是使用jQuery包裝後的方法或屬性就要$(this)， $(this)是jquery對象，能調用jquery的方法；

通常則有以下的關係:  $(this)[0] == this;

 

4.阻止事件冒泡和阻止默認行爲

（1）event.stopPropagation();  事件處理過程當中，阻止了事件冒泡，但不會阻擊默認行爲；

（2）return false; 事件處理過程當中，阻止了事件冒泡，也阻止了默認行爲；

（3）event.preventDefault(); 事件處理過程當中，不阻止事件冒泡，但阻止了默認行爲；

 

5.property和attribute以及prop() 和 attr()

      property是DOM中的屬性，是JavaScript裏的對象。每個DOM對象都會有它默認的基本屬性，而在建立的時候，它只會建立這些基本屬性，在標籤中自定義的屬性是不會直接放到DOM中的。 DOM有其默認的基本屬性，而這些屬性就是所謂的「property」，不管如何，它們都會在初始化的時候在DOM對象上建立。若是在標籤裏對這些屬性進行賦值，那麼這些值就會做爲初始值賦給DOM的同名property。

      attribute是HTML標籤上的特性，它的值只可以是字符串。attributes是屬於property的一個子集，它保存了HTML標籤上定義的屬性。若是再進一步探索attitudes中的每個屬性，會發現它們並非簡單的對象，它是一個Attr類型的對象，擁有NodeType、NodeName等屬性。

       結論：property是DOM對象自身就擁有的屬性，而attribute是咱們經過設置HTML標籤而給之賦予的特性，attribute和property的同名屬性/特性之間會產生一些特殊的數據聯繫，而這些聯繫會針對不一樣的屬性/特性有不一樣的區別。

從 jQuery 1.6 開始， .prop()方法 方法返回 property 的值,而 .attr() 方法返回 attributes 的值。

.prop()方法-- 若要檢索和更改DOM屬性,好比元素的checked, selected, 或 disabled狀態，使用 .prop()方法。

.attr()方法 -- 其餘全部的attributes(在html中你看到的那些alt、title、src)可使用.attr()方法來進行操做。

6.$.extend()

     jQuery.extend(object):用於將一個或多個對象的內容合併到目標對象。該函數能夠將一個或多個對象的成員屬性和方法複製到指定的對象上。且該函數屬於全局jQuery對象。

用法一：jQuery 1.0 新增該用法。  

jQuery.extend(target [, object1 ] [, objectN... ] )

用法二：jQuery 1.1.4 新增該用法。 

jQuery.extend([ deep ], target , object1 [, objectN... ] )

注意事項：

一、該函數複製的對象屬性包括方法在內。此外，還會複製對象繼承自原型中的屬性(JS內置的對象除外)。

二、參數deep的默認值爲false，能夠明確指定該參數爲true值，但不能明確指定爲false值。 jQuery中深度複製，是將除null、undefined、window對象、dom對象以及經過繼承建立的對象外的其它對象克隆後保存到target中，之因此排除部分對象，一是考慮性能，二是考慮複雜度（如dom、window對象，若是克隆複製，消耗過大，而經過繼承實現的對象，複雜程度不可預知，所以也不進行深度複製）。深度與非深度複製區別是，深度複製的對象中若是有複雜屬性值（如數組、函數、json對象等），那將會遞歸屬性值的複製，合併後的對象修改屬性值不影響原對象

三、若是參數爲null或undefined，則該參數將被忽略。

四、若是隻爲$.extend()指定了一個參數，則意味着參數target被省略。此時，target就是jQuery對象自己。經過這種方式，咱們能夠爲全局對象jQuery添加新的函數。

五、若是多個對象具備相同的屬性，則後者會覆蓋前者的屬性值。

六、改函數的返回值爲參數target表明的對象。  

（1） extend(result,item1,item2…..)

     這個方法主要用來合併，將全部的參數項都合併result中，並返回result，可是這樣就會破壞result的結構。

（2）extend({},item1,item2,……)

     這個方法能夠將所得的結果所有合併在{}中，並返回，並且還不會破壞原有的項的結構。

     示例：

     Var item={name:」olive」,age:23};

     Var item1={name:」Momo」,sex:」gril」};

     Var result=$.extend({},item,item1);

     結果：Result={name:」Momo」,age:23,sex:」gril」};

     以上的結果代表extend方法將全部的項都合併到了{}中，可是，細心一點就會發現，其中item1中的name：「Momo」 將item中的name：「olive」給覆蓋了，這是怎麼回事？請接着往下看。

（3）extend(bool,{},item1,item2….)

     Extend方法還有帶bool型參數的重載。bool型參數爲true表示深拷貝，爲false時表示淺拷貝。具體能夠經過一下示例來講明：

     示例：

     var item={name：「olive」,age:23,address{provice:」河南」,city:」鄭州」}};

     var item1={sex:」girl」,address{city:」北京」}};

     var result=$.extend(true,item,item1);

     var result1=$.extend(false,item,item1);

     結果：

     Result={name：「olive」,age:23,sex:」gril」,address:{provice:」河南」,city:」北京」}};

     Result1={name：「olive」,age:23,sex:」gril」,address:{ city:」北京」}};

     以上結果說明，當參數爲ture時，即爲深拷貝，當子項item1中的子項有與item中的子項相同屬性的值不同時，item1中子項的值會將item子項中的值給覆蓋，當子項item1的屬性跟item中的屬性不一樣時，會與item進行合併。當參數爲false時，子項item1中的子項中與item中的子項屬性相同時，item1中子項的屬性值會將item中的值給徹底覆蓋。

 

（4）$.extend(item)

     該方法是將item合併到Jquery的全局對象中去，至關於爲Jquery全局對象添加了一個靜態方法（對應這裏的靜態方法，固然還有實例方法，在後邊有介紹）。

      示例：

      $.extend({SayHello:function(value){alert(「hello 「+value);}});

      這樣寫過以後，就能夠直接調用SayHello方法：

      $.SayHello(「Olive」);

      說明：該方法至關於爲Jquery類添加了新的方法。

 

（5）$.fn.extend(item)

     jQuery.fn.extend(object): 函數用於爲jQuery擴展一個或多個實例屬性和方法(主要用於擴展方法)。

     jQuery.fn是jQuery的原型對象，其extend()方法用於爲jQuery的原型添加新的屬性和方法。這些方法能夠在jQuery實例對象上調用。該函數屬於jQuery的原型對象(jQuery.fn)。

    上邊提到的$.extend(item)是爲Jquery類添加了靜態方法，那麼這裏的$.fn.extend(item)就是爲每個實例添加一個實例方法了。

     示例：

     $.fn.extend({hello:function(value){alert(「hello 「+value);}});

      這樣寫過以後，在獲取每個示例以後，均可以調用該方法：

     $(「#id」).hello(「Olive」);

 

7.jQuery CSS 操做函數

jQuery CSS 操做 - css( ) 方法--返回或設置匹配的元素的一個或多個樣式屬性。

     $(selector).css(name)

     當用於返回屬性：返回第一個匹配元素的 CSS 屬性值。 當用於返回一個值時，不支持簡寫的 CSS 屬性（好比 "background" 和 "border"）

     當用於設置屬性：該方法爲全部匹配元素設置指定 CSS 屬性。

 

jQuery CSS 操做 - height( ) 方法--返回或設置匹配元素的高度。

     $(selector).height()

     當用於返回高度時， 則返回第一個匹配元素的高度。

     當用於設置高度時，則設置全部匹配元素的高度。

     以下面的圖像所示，該方法不包含 padding、border 或 margin。 

          

 

jQuery CSS 操做 - width() 方法--返回或設置匹配元素的寬度。

     $(selector).width()

     當該方法用於返回寬度時， 則返回第一個匹配元素的寬度。

     當該方法用於設置寬度時，則設置全部匹配元素的寬度。

     以下面的圖像所示，該方法不包含 padding、border 或 margin。

          

 

jQuery CSS 操做 - offset( ) 方法--返回或設置匹配元素相對於文檔的偏移位置。

     返回偏移座標： $(selector).offset( )

     設置偏移座標：$(selector).offset({top:value,left:value})

     使用函數設置偏移座標： $(selector).offset(function(index,currentoffset))

     當用於返回偏移時： 該方法返回第一個匹配元素的偏移座標。它返回一個帶有兩個屬性（以像素爲單位的 top 和 left 位置）的對象。

     當用於設置偏移時： 該方法設置全部匹配元素的偏移座標。

 

jQuery CSS 操做 - offsetParent( ) 方法--返回最近的祖先定位元素。定位元素指的是元素的 CSS position 屬性被設置爲 relative、absolute 或 fixed 的元素。

     $(selector).offsetParent( )

 

jQuery CSS 操做 - position( ) 方法--返回匹配元素相對於父元素的位置（偏移）。該方法返回的對象包含兩個整型屬性：top 和 left，以像素計。此方法只對可見元素有效。

     $(selector).position( )

 

jQuery CSS 操做 - scrollLeft( ) 方法--返回或設置匹配元素的滾動條的水平位置。滾動條的水平位置指的是從其左側滾動過的像素數。當滾動條位於最左側時，位置是 0。

     $(selector).scrollLeft( )

     當用於返回位置時：該方法返回第一個匹配元素的滾動條的水平位置。

     當用於設置位置時：該方法設置全部匹配元素的滾動條的水平位置。

 

jQuery CSS 操做 - scrollTop() 方法--用於設置或返回當前匹配元素相對於垂直滾動條頂部的偏移。 當滾動條位於最頂部時，位置是 0。

     $(selector).scrollTop( )

     當用於返回位置時： 該方法返回第一個匹配元素的滾動條的垂直位置。

     當用於設置位置時： 該方法設置全部匹配元素的滾動條的垂直位置。

 

jQuery 的幾個css相關方法

innerWidth() - 返回第一個匹配元素的寬度（包含 padding）

innerHeight() - 返回第一個匹配元素的高度（包含 padding）

outerWidth() - 返回第一個匹配元素的寬度（包含 padding 和 border）

outerHeight() - 返回第一個匹配元素的高度（包含 padding 和 border）

 

8.jQuery的DOM操做

一、篩選元素

.filter(selector)        與selector匹配的元素

.filter(callbaxk)        callback中返回true的元素

.eq(index)               從0開始計數的第index個選中元素

.first()                      選中元素中的第一個元素

.last()                      選中元素的最後一個元素

.slice(start[,end])    從0開始計數的給定範圍內的選中元素

.not(selector)          與selector不匹配的元素

.has(selector)         與selector匹配的的後代元素

二、後代元素

.find(selector)            與selector匹配的後代元素

.contents()                 得到匹配元素集合中每一個元素的子節點，包括文本和註釋節點。

.children([selector])   子節點，可傳入selector進行篩選

三、同輩元素

.next([selector])                     每一個選中元素緊鄰的下一個元素，可傳入selector進行篩選

.nextAll([selector])                 每一個選中元素後的全部同輩元素，可傳入selector進行篩選

.nextUntil([selector],[filter])    每一個選中元素以後、直至但不包含第一個和selector匹配的元素，可傳入filter進行篩選

.prev([selector])                     每一個選中元素緊鄰的上一個元素，可傳入selector進行篩選

.prevAll([selector])                 每一個選中元素前的全部同輩元素，可傳入selector進行篩選

.prevUntil([selector],[filter])    每一個選中元素以前、直至但不包含第一個和selector匹配的元素，可傳入filter進行篩選

.siblings([selector])                全部同輩元素，可傳入selector進行篩選

四、祖先元素

.parent([selector])                        每一個選中元素的父元素，可傳入selector進行篩選

.parents([selector])                      每一個選中元素的全部祖先元素，可傳入selector進行篩選

.parentsUntil([selector],[filter])     每一個選中元素的全部祖先元素、直至但不包含第一個和selector匹配的元素可傳入filter進行篩選

.closest(selector)                        從元素自身開始沿DOM數向上搜索祖先元素 與selector匹配的第一個元素

.offsetParent()                             選中元素的第一個被定位的父元素(relative或absolute)

五、集合操做

.add([selector])           將與selector匹配的元素添加原對象集合中

.addBack()                 選中的元素加上JQuery內部棧中以前選中的元素

.end()                         內部JQuery棧中以前選中的元素

.map(callback)           對每一個選中調用回調函數callback以後的結果

.pushStack()              指定的元素

6.操做選中的元素

.is(selector)              肯定匹配的元素中是否有傳入的與selector匹配的元素

.index()                    取得匹配元素相對其同輩元素的索引

.index(element)       取得匹配元素中與指定元素對象的DOM節點的索引

.contains(a,b)          肯定DOM節點a是否包含DOM節點b

.each(callback)        迭代匹配元素，對每一個元素執行callback

.size()                      返回被 jQuery 選擇器匹配的元素的數量。

.length                     取得匹配元素的數量

.get()                       取得與匹配元素對應的DOM節點列表

.get(index)              取得匹配元素中與指定索引對應的DOM節點

.toArray()                取得與匹配元素對應的DOM節點列表

7.特性和屬性

.attr(key)                     取得特性key的值

.attr(key，value)        設置特性key的值爲value

.attr(key，fn)              將fn的返回值做爲key的值

.attr(obj)                     根據傳入的鍵值對象參數設置特性的值

.removeAttr(key)        刪除特性key的值

.prop(key)                  取得屬性key的值

.prop(key，value)      設置屬性key的值爲value

.prop(key，fn)           將fn的返回值做爲key的值

.prop(obj)                  根據傳入的鍵值對象參數設置屬性的值

.removeProp(key)     刪除屬性key的值

.addClass(class)       爲匹配元素添加傳入的類

.removeClass(class) 爲匹配元素刪除傳入的類

.toggleClass(class)   對於匹配元素，若是存在類則刪除，不存在則添加

.hasClass(class)       匹配元素中至少一個包含傳入的類則返回true

.val()                         獲取第一個匹配元素的value屬性值

.val(value)                設置每一個匹配元素的value屬性

8.內容操做

.html()               獲取第一個匹配元素的HTML內容

.html(value)      將每一個匹配元素的HTML內容設置爲value

.text()                獲取全部匹配元素的文本，以字符串返回

.text(value)       將每一個匹配元素的文本設置爲value

9.DOM插入

.append(content)              在每一個匹配元素內部的末尾插入content

.appendTo(selector)         將匹配元素插入到與selector匹配的元素的內部的末尾

.prepend(content)             在每一個匹配元素內部的開頭插入content

.prependTo(selector)        將匹配元素插入到與selector匹配的元素的內部的開頭

.after(content)                   在每一個匹配元素外部的後面插入content

.insertAfter(selector)         將匹配元素插入到與selector匹配的元素的外部的後面

.before(content)                在每一個匹配元素外部的前面插入content

.insertBefore(selector)      將匹配元素插入到與selector匹配的元素的外部的前面

.wrap(content)                  匹配的每一個元素包含在content中

.wrapAll(content)              匹配的每一個元素做爲一個總體包含在content中

.wrapInner(content)          匹配的每一個元素的內部內容包含在content中

.unwrap()                          刪除元素的父元素（反操做）

10.替換、刪除和複製

.replaceWith(content)                                        將匹配的元素替換爲content

.replaceAll(selector)                                          將與selector匹配的元素替換爲匹配的元素

.empty()                                                             刪除每一個元素的子節點

.remove([selector])                                            從DOM中刪除節點，selector能夠用於篩選

.detach([selector])                                             從DOM中刪除節點，selector能夠用於篩選，並保留JQuery給元素添加的數據

.clone([withHandlers],[deepWithHandlers])      返回匹配元素的副本，也能夠複製事件處理程序

11.數據

.data(key)                                 獲取第一個匹配元素的key鍵對應的數據

.data(key,value)                       設置每一個元素關聯的key對應的數據值爲value

.removeData(key)                    刪除每一個元素與key鍵關聯的數據

 

9.移動端軟鍵盤檢測

keyup事件——移動端能夠經過綁定keyup事件，來檢測當前鍵的鍵值。

$("#phone").on('keyup', function(e) {

              alert (e.keyCode) ;

            })

刪除鍵的鍵值爲keyCode=8；