一、 jQuery對象與DOM對象

DOM對象：原生js獲取的對象

jQuery對象：用jQuery方法獲取的對象

注意：

1. jQuery對象只能使用jQuery方法，DOM對象只能使用原生js提供的方法

2. jQuery對象與DOM對象的相互轉換：

（1）DOM轉換為jQuery對象：$(DOM對象)

var newli = document.querySelector('li');
$(newli);

（2）jQuery轉換為DOM對象：$(DOM對象)

? ? ? ? ?$(DOM元素)[index]? 或者? $(DOM元素).get(index)

$('.input')[0]; //方法一
$('.input').get(0) //方法二

二、相關操作

1. 入口函數

原生：window.addEventListener('DOMContentLoaded',function(){})

現在：$(function(){})或$(document).ready(function(){}) ?即等DOM結構渲染完畢后就執行

2. 設置樣式

$('div').css('屬性名','屬性值')

注意：

（1）jQuery的隱式迭代：遍歷匹配到的所有元素，即不需要我們再進行手動循環?

（2）多個樣式：$('div').css({width:200, height:200, backgroundColor:'blue'})

example:

  

    
微博1
      

        
首頁
        
注冊
        
登錄
      
    
    
微博2
      

        
首頁
        
注冊
        
登錄
      
    
    
微博3
      

        
首頁
        
注冊
        
登錄
      
    
  
  
  

3. 篩選選擇器

$('li:first') - 取第一個li元素

$('li:last') - 取最后一個li元素

$('li:eq(2)') - 取索引號為2的li元素

$('li:odd') - 取索引號為奇數的li元素

$('li:even') - 取索引號為偶數的li元素

$('.checkinput:checked') - 被選中的復選框（可帶length）

一些方法：?

?$('li').parent() - 查找父級

?$('div').parents('選擇器') - 查找指定的祖先元素?

?$('div').children('p') - 查找子集

?$('ul').find('li') - 查找ul里面的li，即后代選擇器

?$('li:first').siblings('li') - 查找兄弟結點

?$('li:first').nextAll() - 查找當前元素之后的所有同輩結點

?$('li:last').prevAll() - 查找當前元素之前的所有同輩結點

?$('li').eq(2) - 查找索引號為2的li元素

?$('div').hasClass('current') - 判斷div是否有current這個類名

?$(this).index() - 獲取當前索引號

ps: .toFixed(2) - 小數點后保留兩位小數

4. 添加/刪除/切換類

$('div').addClass('current');? -- 添加

$('div').removeClass('current'); -- 刪除

$('div').toggleClass('current'); -- 切換

三、jQuery效果?

1. 顯示/隱藏

（1）show 顯示 ([speed, [easing], [fn]])

? ? ? ? ?speed：slow、normal、fast、值(毫秒數)?

? ? ? ? ?easing：swing（慢-快-慢）、linear（勻速）

? ???????fn：回調函數，動畫完成時執行

（2）hide 隱藏 同 show

（3）toggle 切換 同 show

2. 滑動?

（1）slideDown 下滑 ([speed, [easing], [fn]])

（2）slideUp 上滑 參數同上

（3）slideToggle 切換?參數同上

3. 事件切換?

hover([over], out)

over：鼠標移到元素上時觸發的函數

out：鼠標離開元素時觸發的函數

注意：如果只寫一個函數，則鼠標經過和離開都會觸發這個函數，可以配合toggle方法使用

  

    
微博1
      

        
首頁
        
注冊
        
登錄
      
    
    
微博2
      

        
首頁
        
注冊
        
登錄
      
    
    
微博3
      

        
首頁
        
注冊
        
登錄
      
    
  
  
  

注意動畫隊列：即多次觸發，會有多個動畫排隊現象出現

可以停止排隊，使用stop() --stop()需寫到要執行的動畫前面

$('.nav>li').hover(function(){
  $(this).children('ul').stop().slideToggle();
})

4. 淡入淡出

（1）fadeIn 淡入 ([speed, [easing], [fn]])

（2）fadeOut?淡出?參數同上

（1）fadeToggle 切換 參數同上

（1）fadeTo?調整透明度 ([[speed], opacity, [easing], [fn]])

? ? ? ? ?注意：opacity與speed必須寫，其他參數同上

5. 自定義動畫?

animate(params, [speed], [easing], [fn])

params：樣式屬性（必須寫，并以對象的形式傳送）其他參數如上

PS手風琴操作：

ul>li*n 每個li設置較短的寬度（加上overflow:hidden），當鼠標移入到某個li時，當前li的寬度需要增加到圖片的正常寬度，而此li的兄弟結點的寬度變為較短寬度?？梢允褂胒adeIn與fadeOut再加上animate({width:xx})來完成手風琴效果，注意每個jQuery效果前最好都加上stop()防止動畫隊列中出現多個動畫。

四、對元素的操作

1. 遍歷對象

方法一：$('div').each(function(index, documentElement) {....})

（1）index -- 索引號

（2）documentElement -- DOM元素對象

（3）適用于遍歷DOM對象

方法二：$.each(object, function(index, documentElement) {....})

（1）object 如：$('div')

（2）適用于遍歷數組、對象：

var arr = ['red', 'blue', 'yellow'];
$.each(arr, function(i, elem) {
  console.log(i,elem);
})

2. 創建、添加和刪除元素?

（1）創建元素

? ? ? ? ?var p = $("

我是創建的p

")?

（2）添加元素

? ? ? ? ?$("div").append(p) - 放到div內部元素的最后面

? ? ? ? ?$("div").prepend(p) - 放到div內部元素的最前面

? ? ? ? ?$("div").after(p) - 放到原來div的后面

? ? ? ? ?$("div").before(p) - 放到原來div的前面

（3）刪除元素

? ? ? ? ?$("div").remove() - 刪除div元素

? ? ? ? ?$("div").empty() - 刪除div的所有子節點

? ? ? ? ?$("div").html("") - 將里面的內容清除（即子節點也沒了）

五、jQuery 尺寸以及位置

Size

1. width()、height() -- 得到或修改元素的寬、高

2. innerWidth()、innerHeight() -- 得到加了padding的寬、高

3. outerWidth()、outerHeight() -- 得到帶有padding與border的寬、高，若在括號內加上true則會加上margin值

Location

1. offset() -- 返回或修改元素距離文檔的偏移坐標值（對象），與父級元素無關

若要修改：offset({top:100,left:200})

2. position() -- 返回與父親定位有關的偏移坐標值（對象），不能設置

3. scrollTop() / scrollLeft() -- 返回元素被卷去的頭部或左側，animate中也可以有scrollTop

六、on()綁定事件

element.on(events, [selector], fn)? --? 可以綁定多個處理事件

1. events：事件類型（用對象形式）

2. selector：子元素選擇器，可以實現事件委托

例子：

$("div").on({

? ? ? ? mouseenter: function() {alert(123);},

? ? ? ? click:function(){console.log(111)}

})

$("div").on("click", "p", function() {alert(123);}) -- div為p的父元素。可以冒泡

注意：

1. 若處理事件相同

$("div").on("mouseover mouseout", function() {$(this).toggleClass("red");})

2.?on()可以給動態生成（比如后來生成的）的元素綁定事件

七、off()解綁事件

可移除由on創立的事件

1. $("div").off()? -- 將div身上所有的事件都解綁

2. $("div").off("mouseover") -- 只解除div身上的mouseover事件

3. $("div").off("click","p"); -- 解除委托事件（div為p的父元素）

注意：用one()來綁定事件 -- 事件只觸發一次，用法與on相似

八、自動觸發事件trigger()

1. element.event();

2. element.trigger("event");

3. element.triggerHandler("event"); -- 特殊：不會觸發元素的默認行為

九、jQuery拷貝對象

?$.extend([deep], target, object1, [objectN])

1. deep：若設置為true則為深拷貝，默認為false，淺拷貝

2. target：需要拷貝的目標

3. object1：待拷貝到第一個對象的對象

注意：

1. 淺拷貝：將復雜對象的地址拷貝過去，target有而object1沒有的數據會被覆蓋掉，這樣一修改數據，被拷貝對象的數據也會跟著變。

2. 深拷貝：拷貝的對象，而不是地址，target有而object1沒有的數據繼續保留。修改數據，被拷貝對象的數據不會跟著改變。