jQuery 什麼是jQuery？ jQuery是一個實用的JavaScript函數庫，jQuery極大地簡化了JS對DOM的操作，封裝並實現的一系列常用的方法。 jQuery庫封裝了JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫 ...

jQuery

什麼是jQuery？

jQuery是一個實用的JavaScript函數庫，jQuery極大地簡化了JS對DOM的操作，封裝並實現的一系列常用的方法。

jQuery庫封裝了JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。

其實除了jQuery，還有許許多多的開源好用的JavaScript庫，只不過jQuery較為流行，使用廣泛所以要著重瞭解和學習

jQuery能夠做什麼？

快速獲取文檔元素

jQuery的選擇機制構建於Css的選擇器，它提供了快速查詢DOM文檔中元素的能力，而且大大強化了JavaScript中獲取頁面元素的方式。

提供漂亮的頁面動態效果

jQuery中內置了一系列的動畫效果，可以開發出非常漂亮的網頁，許多網站都使用jQuery的內置的效果，比如淡入淡出、元素移除等動態特效。

創建AJAX無刷新網頁

AJAX是非同步的JavaScript和XML的簡稱，可以開發出非常靈敏無刷新的網頁，特別是開發伺服器端網頁時，比如PHP網站，需要往返地與伺服器通信，如果不使用AJAX，每次數據更新不得不重新刷新網頁，而使用AJAX特效後，可以對頁面進行局部刷新，提供動態的效果。

提供對JavaScript語言的增強

jQuery提供了對基本JavaScript結構的增強，比如元素迭代和數組處理等操作。

增強的事件處理

jQuery提供了各種頁面事件，它可以避免程式員在HTML中添加太多事件處理代碼，最重要的是，它的事件處理器消除了各種瀏覽器相容性問題。

更改網頁內容

jQuery可以修改網頁中的內容，比如更改網頁的文本、插入或者翻轉網頁圖像，jQuery簡化了原本使用JavaScript代碼需要處理的方式。

jQuery如何使用？

上文提到jQuery是一個實用的JavaScript函數庫，那麼引入jQuery就和引入一個JavaScript文件的方式相同，通常是外部引入

jQuery文件可以從jQuery的官網下載或者其他第三方網站下載到不同的版本，引入到HTML頁面後即可使用

jQuery的基本設計和主要用法，就是"選擇某個網頁元素，然後對其進行某種操作"

jQuery語法

jQuery 語法是通過選取 HTML 元素，並對選取的元素執行某些操作

基礎語法： $(selector).action()

jQuery詳解

jQuery入口函數

等著DOM結構渲染完畢即可執行內部代碼，不必等到所有外部

資源載入完成，jQuery幫我們完成了封裝。

第一種方法

$(document).ready(function(){
    ...//此處是頁面DOM載入完成的入口
});

第二種方法

$(function(){
   ...//此處是頁面DOM載入完成的入口
});

jQuery的頂級對象

$是jQuery的另外一個名稱

 $(function(){
     alert(111)
  })//alert(111)
 
jQuery(function(){
     alert(111)
 })

$是jQuery中的頂級對象（可以把元素包裝成我們的jQuery對象）
```
 $('div').hide();
```

jQuery對象和DOM對象

DOM對象：用原生js獲取過來的對象就是DOM對象
```
 var myDiv=document.querySelector('div');
```
jQuery對象：用jquery方式獲取過來的對象是jQuery對象。本質：通過$符把元素進行了封裝
```
 $('div');
```
jQuery對象只能使用jQuery方法，DOM對象則使用原生的JavaScript方法和屬性

兩者之間可以相互轉換
- DOM對象轉換為jQuery對象
  - 直接獲取div，得到的就是jQuery對象
```
 $('div');
```
  - 已經使用原生的js獲取過來DOM
```
var myDiv=document.querySelector('div');
$(myDiv);
```
- jQuery對象轉換為DOM對象
```
$('div')[0].function(); 
$('div').get(0).function();
```

jQuery選擇器

$("選擇器") //裡面選擇器直接寫CSS選擇器即可，要加引號

名稱	用法	描述
ID選擇器	$("#id")	獲取指定id的元素
全選選擇器	$("*")	匹配所有的元素
類選擇器	$(".class")	獲取同一類class的元素
標簽選擇器	$("div")	獲取同一標簽的所有元素
並集選擇器	$("div,p,li")	獲取多個元素
交集選擇器	$("li,current")	交集元素
子代選擇器	$("ul>li")	使用>號，獲取親兒子層級的元素；註意，並不會獲取孫子層級的元素
後代選擇器	$(“ul li”)	使用空格，選擇後代選擇器，獲取ul下的所有li元素，包括孫子等。

jQuery隱式迭代

隱式迭代就是把匹配的所有元素內部進行遍歷迴圈，給每一個元素添加css這個方法

給匹配到的所有元素進行迴圈遍歷，執行相應的方法，而不是我們再進行迴圈，簡化我們的操作，方便我們調用。

 <head>
 <style>
        div{
            width: 300px;
            height: 300px;
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
      $("div").css("background","pink");
    </script>
</body>

jQuery篩選選擇器

語法	用法	描述
:first	$("li:first")	獲取第一個li元素
:last	$("li:last")	獲取最後一個選擇器
:eq(index)	$(li:eq(2))	獲取到的li元素中，選擇索引號為2的元素，索引號index從0開始
:odd	$("li:odd")	獲取到的li元素中，選擇索引號為奇數的元素
:even	$("li:even")	獲取到的li元素中，選擇索引號為偶數的元素

jQuery篩選方法

語法	用法	說明
parent()	$("li").parent();	查找父級，最近一級
parents()	$("li").parents("選擇器");	查找指定祖先父級
children(selector)	$("ul").children("li")	相當於$("ul>li"),最近一級（親兒子）
find(selector)	$("ul").find("li")	相當於$("ul li"),後代選擇器
siblings(selector)	$(".first").siblings("li")	查找兄弟節點，不包括自己本身
nextAll([expr])	$(".first").nextAll()	查找當前元素之後所有的同輩元素
prevAll([expr])	$(".last").prevAll()	查找當前元素之前的所有同輩元素
hasClass(class)	$('div').hasClass("protected")	檢查當前的元素是否含有某個特定的類
eq(index)	$("li").eq(2)	相當於$("li:eq(2)"),index從0開始

$(".son").parent();
$('.nav').children("p").css("color","red");
$('.nav').find("p").css("color","red"); 
$(".content div").eq(index).siblings().hide();
$(".content div").eq(index).show();

jQuery樣式操作

操作css方法

jQuery可以使用css方法來修改簡單元素樣式；也可以操作類，修改多個樣式
- 參數只寫屬性名，則返回屬性值
```
$("div").css("width")
```
- 參數是屬性名，屬性值，逗號分離，是設置一組樣式，屬性必須加引號，值如果是數字可以不用跟單位和引號
```
$("div").css("width","500px")
```
- 參數可以是對象形式，方便設置多組樣式。屬性名和屬性值用冒號隔開，屬性可以不用加引號
```
 $("div").css({
        "width":"500",
        "height":"1000"
      })
```

設置類樣式方法

添加類

$("div").click(function(){
   $(this).addClass("current");
 })

刪除類

$("div").click(function(){
  $(this).removeClass("current");
})

切換類

 $("div").click(function(){
   $(this).toggleClass("current");
})

類操作與className操作

原生JS中className會覆蓋元素原先裡面的類名。

jQuery裡面類操作只是對指定類進行操作，不影響原先的類名

jQuery效果

顯示隱藏
- show()
```
show([speed,[easing],[fn]])
```
  顯示參數
  
  (1)參數可以省略，無動畫直接顯示
  
  (2)speed:三種預定速度之一的字元串("slow","normal",or"fast")或表示動畫時長的毫秒數值
  
  (3)easing:(Optional)用來指定切換效果，預設是“swing”，可用參數“linear”
  
  (4)fn:回調函數,在動畫完成時執行的函數，每個元素執行一次
```
$("button").eq(0).click(function(){
 $("div").show(1000,function(){
      alert(12)
   })
  });
```
- hide()
```
hide([speed,[easing],[fn]])
```
  隱藏參數
  
  (1)參數可以省略，無動畫直接顯示
  
  (2)speed:三種預定速度之一的字元串("slow","normal",or"fast")或表示動畫時長的毫秒數值
  
  (3)easing:(Optional)用來指定切換效果，預設是“swing”，可用參數“linear”
  
  (4)fn:回調函數,在動畫完成時執行的函數，每個元素執行一次
```
$("button").eq(1).click(function(){
                  $("div").hide(1000,function(){
                   alert(1)
                  })
                });
```
- toggle()
```
toggle([speed,[easing],[fn]])
```
  切換參數
  
  (1)參數可以省略，無動畫直接顯示
  
  (2)speed:三種預定速度之一的字元串("slow","normal",or"fast")或表示動畫時長的毫秒數值
  
  (3)easing:(Optional)用來指定切換效果，預設是“swing”，可用參數“linear”
  
  (4)fn:回調函數,在動畫完成時執行的函數，每個元素執行一次
```
 $("button").eq(2).click(function(){
                  $("div").toggle(1000,function(){
                    alert(1)
                  });
```
滑動
- slideDown()
```
slideDown([speed,[easing],[fn]])
```
  (1)參數可以省略，無動畫直接顯示
  
  (2)speed:三種預定速度之一的字元串("slow","normal",or"fast")或表示動畫時長的毫秒數值
  
  (3)easing:(Optional)用來指定切換效果，預設是“swing”，可用參數“linear”
  
  (4)fn:回調函數,在動畫完成時執行的函數，每個元素執行一次
```
$("div").slideDown(1000);
```
- slideUp()
```
slideUp([speed,[easing],[fn]])
```
  (1)參數可以省略，無動畫直接顯示
  
  (2)speed:三種預定速度之一的字元串("slow","normal",or"fast")或表示動畫時長的毫秒數值
  
  (3)easing:(Optional)用來指定切換效果，預設是“swing”，可用參數“linear”
  
  (4)fn:回調函數,在動畫完成時執行的函數，每個元素執行一次
```
$("div").slideUp(1000);
```
- slideToggle()
```
slideToggle([speed,[easing],[fn]])
```
  1)參數可以省略，無動畫直接顯示
  
  (2)speed:三種預定速度之一的字元串("slow","normal",or"fast")或表示動畫時長的毫秒數值
  
  (3)easing:(Optional)用來指定切換效果，預設是“swing”，可用參數“linear”
  
  (4)fn:回調函數,在動畫完成時執行的函數，每個元素執行一次
```
 $("div").slideToggle(1000);
```
- 事件切換（就是滑鼠經過和離開的複合寫法）
```
hover([over],out)
```
  (1)over：滑鼠移到元素上要觸發的函數（相當於mouseenter）
  
  (2)out：滑鼠移出元素要觸發的函數（相當於mouseleave）
```
 $("button").eq(2).hover(function(){
                  $("div").slideUp(1000);
                },function(){
                  $("div").slideDown(1000);
                });
//相當於
 $("button").eq(2).hover(function(){
                 $("div").slideToggle(1000);
         });
```
動畫隊列及其停止排隊方法
- 動畫或效果隊列
  
  動畫或者效果一旦觸發就會執行，如果多次觸發，就會造成多個動畫或者效果隊列
- 停止排隊
```
stop()
```
  (1)stop()方法用於停止動畫或效果
  
  (2)註意：stop()寫到動畫或者效果前面，相當於停止結束上一次的動畫
```
$("div").stop().slideToggle(1000); 
```
淡入淡出
- fadeIn()
```
fadeIn([speed,[easing],[fn]])
```
  1)參數可以省略，無動畫直接顯示
  
  (2)speed:三種預定速度之一的字元串("slow","normal",or"fast")或表示動畫時長的毫秒數值
  
  (3)easing:(Optional)用來指定切換效果，預設是“swing”，可用參數“linear”
  
  (4)fn:回調函數,在動畫完成時執行的函數，每個元素執行一次
```
$("div").stop().fadeIn(1000);
```
- fadeOut()
```
fadeOut([speed,[easing],[fn]])
```
  1)參數可以省略，無動畫直接顯示
  
  (2)speed:三種預定速度之一的字元串("slow","normal",or"fast")或表示動畫時長的毫秒數值
  
  (3)easing:(Optional)用來指定切換效果，預設是“swing”，可用參數“linear”
  
  (4)fn:回調函數,在動畫完成時執行的函數，每個元素執行一次
```
$("div").stop().fadeOut(1000);
```
- fadeToggle()
```
fadeToggle([speed,[easing],[fn]])
```
  1)參數可以省略，無動畫直接顯示
  
  (2)speed:三種預定速度之一的字元串("slow","normal",or"fast")或表示動畫時長的毫秒數值
  
  (3)easing:(Optional)用來指定切換效果，預設是“swing”，可用參數“linear”
  
  (4)fn:回調函數,在動畫完成時執行的函數，每個元素執行一次
```
$("div").stop().fadeToggle(1000);
```
- fadeTo()
```
fadeTo([[speed],opacity,[easing],[fn]])
```
  (1)opacity透明度必須寫，取值0-1之間
  
  (2)speed:三種預定速度之一的字元串（“show”，“normal”，or “fast”）或表示動畫時長的毫秒數值（如：1000）。必須寫
  
  (3)easing:(Optional)用來指定切換效果，預設是“swing”，可用參數“linear”。
```
$("div").stop().fadeTo(1000,0.5);
```
自定義動畫
- animate()
```
animate(params,[speed],[easing],[fn])
```
  參數
  
  (1)params:想要更改的樣式屬性，以對像形式傳遞，必須寫。屬性名可以不帶引號，如果是複合屬性採用駝峰命名法borderLeft。其餘參數都可以省略
  
  (2)speed:三種預定速度之一的字元串("slow","normal",or"fast")或表示動畫時長的毫秒數值
  
  (3)easing:(Optional)用來指定切換效果，預設是“swing”，可用參數“linear”
  
  (4)fn:回調函數,在動畫完成時執行的函數，每個元素執行一次
```
//手風琴效果
$(function(){
  $(".king li").mouseenter(function(){
  $(this).stop().animate({
  width:200
}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
  $(this).siblings("li").stop().animate({
  width:100
}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
 })
 })
```

jQuery屬性操作

設置或獲取元素固有屬性值

元素固有屬性就是元素自帶的屬性，比如a元素裡面的href，比如input元素裡面的type
- 獲取屬性方法
```
prop("屬性")
```
- 設置屬性語法
```
prop("屬性","屬性值")
```
```
$("input").prop("checked")
$("a").prop("title","wwww");
```
元素的自定義屬性

用戶自己給元素添加的屬性，我們稱之為自定義屬性。比如給div添加index=“1”
- 獲取屬性語法
```
attr("屬性") //類似原生getAttribute()
```
- 設置屬性語法
```
attr("屬性","屬性值") //類似原生setAttribute()
```
  該方法也可以獲取H5自定義屬性
```
$("div").attr("index")
$("div").attr("index","34")
```
數據緩存data()

data()方法可以在指定的元素上存取數據，並不會修改DOM元素結構。一旦頁面刷新，之氣那存放的數據都將會被刪除
- 附加數據語法
```
data("name","value") //向被選元素附加數據
```
- 獲取數據語法
```
data("name") //向被選元素獲取數據
```
  同時，還可以讀取HTML5自定義屬性data-index，得到的是數字型
```
 $("span").data("uname","andy");
 $("span").data("uname")
```

jQuery內容文本值

普通元素內容html()(相當於原生innerHTML)

html() //獲取元素內容
html("內容") //設置元素內容
$("div").html();//獲取元素內容
$("div").html("123");//設置元素內容

普通元素文本內容text()（相當於原生innerText）

text()  //獲取元素內容
text("內容") //設置元素內容
$("div").text(); //獲取元素內容
$("div").text("123"); //設置元素內容

設置表單值 val()

val() //獲取表單值
val("內容") //設置表單內容
$("input").val(); //獲取表單值
$("input").val("123"); //設置表單內容

tofixed(index)(保留幾位小數方法)

(p*n).toFixed(2)//保留兩位小數

jQuery尺寸、位置操作

jQuery尺寸

語法	用法
width()/height()	取得匹配元素寬度和高度值只算width/height
innerWidth()/innerHeight()	取得匹配元素寬度和高度值包含padding
outerWidth()/outerHeight()	取得匹配元素寬度和高度值包含padding、border
outerWidth(true)/outerHeight(true)	取得匹配元素寬度和高度值包含padding、borde、margin

  div{
     width: 200px;
     height: 200px;
     background-color: aqua;
     padding: 10px;
     border: 15px solid red;
     margin: 20px;
   } 
	  $("div").width(500)
	  console.log($("div").width()); //500
      console.log($("div").innerWidth());//520
      console.log($("div").outerWidth());//550
      console.log($("div").outerWidth(true));//590

以上參數為空，則是獲取相應值，返回的是數字型
如果參數為數字，則是修改相應值。
參數可以不必寫單位

jQuery位置

位置主要有三個：offset()、position、scrollTop()/scrollLeft()
- offset()
  
  offset()設置或返回被選元素相對於文檔的偏移坐標，跟父級沒有關係
  
  該方法有2個屬性left、top。offset().top用於獲取距離文檔頂部的距離，offset().left用於獲取距離文檔左側的距離。
  
  可以設置元素的偏移：offset({top:10,left:30})
- position()
  
  position方法用於返回被選元素相對於帶有定位的父級偏移坐標，如果父級都沒有定位，則以文檔為準。
- scrollTop()/scrollLeft()
  
  scrollTop()方法設置或返回被選元素被捲去的頭部或左側。

jQuery元素操作

遍歷元素

JQuery隱式迭代對同一類元素做出了同樣的操作。如果想要給同一類元素做不同操作，就需要用到遍歷

語法1
```
$("div").each(function(index,domEle){xxx;})
```
- each()方法遍歷匹配的每一個元素。主要用DOM處理。each每一個
- 裡面的回調函數有2個參數：index是每個元素的索引號，demEle是每個DOM元素對象，不是jQuery對象
- 想用jQuery方法，需要給這個dom元素轉換為jquery對象
```
var arr=["red","blue","pink"]
 $(function(){
 $("div").each(function(index,domEle){
 $(domEle).css("color",arr[index])
 })
})
```
  語法2
```
$.each(object,function(index,element){xxx;})
```
  - $each()方法可用於遍歷任何對象。主要用於數據處理，比如數組，對象
  - 裡面的函數有兩個參數：index是每個元素的索引號，element遍歷內容

創建元素

$("<li></li>")
$("<li>我是後來創建的li</li>")

動態的創建了一個

添加元素

內部添加

element.append("內容")
$("ul").append(li)//放到內容的最後面
$("ul").prepend(li)//放到內容的最前面

把內容放入匹配元素內部的後面，類似於原生appendChild

外部添加

element.after("內容") //把內容放入目標元素後面
$(".test").after(div) //把內容放入目標元素後面

element.before("內容") //把內容放入目標元素前面
$(".test").before(div) //把內容放入目標元素前面

刪除元素

element.remove() //刪除匹配的元素（本身）
 $("ul").remove()
element.empty() //可以刪除匹配的元素裡面的子節點 孩子
 $("ul").empty();
element.html() //可以刪除匹配元素裡面的子節點 孩子
$("ul").html();

$(".p-action a").click(function(){
   $(this).parents(".cart").remove();
 })

jQuery事件

事件註冊
- 單個事件註冊
```
element.事件(function(){})
$("div").click(function(){事件處理程式})
```
  其他事件和原生基本一致
  
  比如，mouseover、mouseout、blur、focus等

事件處理

on()綁定事件

on()方法在匹配元素上綁定一個或多個事件的事件處理函數

element.on(events,[selector],fn)

1.events:一個或多個用空格分隔的事件類型，如"click"或“keydown”、

2.selector：元素的子元素選擇器

3.fn:回調函數即綁定在元素身上的偵聽函數

  //事件處理不同的
$("div").on({
   click:function(){
   $("div").css("background","black")
   },
   mouseover:function(){
   $("div").css("background","pink")
    }
 })
//事件處理相同的
$("div").on("mouseover mouseout",function(){
 	$(this).toggleClass("togg");
  })

on()方法還可以進行委派操作，事件委派的操作的定義是，把原來加給子元素身上的事件綁定在父元素身上，就是把事件委派給父元素

$('ul').on('click','li',function(){
    alert('hello world!');
})

動態創建的元素，click()沒有辦法綁定事件，on()可以給動態生成的元素綁定事件

 $("ul").on("click","li",function(){
    alert(11)
 })
 var li=$("<li>我是後來的</li>")
 $("ul").append(li);

如果有的事件只想觸發一次，可以使用one()來綁定事件

$('ul').one('click','li',function(){
    alert('hello world!');
})

自動觸發事件

有些事件希望自動觸發，比如輪播圖自動播放功能跟點擊右側按鈕一致。可以利用定時器自動觸發右側按鈕點擊事件，不必滑鼠點擊觸發

第一種

$("div").click();//第一種簡寫形式 元素.事件() 會觸發元素的預設行為

第二種

$("div").trigger("click");//第二種自動觸發方式 會觸發元素的預設行為

第三種

 $("div").triggerHandler("click");//第三種自動觸發方式  不會觸發元素的預設行為

事件處理解綁

事件解綁off()

$("div").off() //解除了div身上的所有事件
$("div").off("click"); //解除了div身上的點擊事件
$("ul").off("click","li") //解除事件委托

事件對象

事件被觸發，就會有事件對象的產生
```
element.on(events,[selector],function(event){})
```
阻止預設行為：event.preventDefault()或者return false

阻止冒泡：event.stopPropagation()

jQuery拷貝對象

如果想要把某個對象拷貝(合併)給另外一個對象使用，此時可以用$.extend()方法

語法：

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

deep:如果設true為深拷貝，預設為false淺拷貝
target:要拷貝的對象
object1:待拷貝到第一個對象的對象
objectN:待拷貝到第N個對象的對象
淺拷貝是把被拷貝的對象複雜數據類型中的地址拷貝給目標對象，修改目標對象會影響被拷貝對象
深拷貝，前面加true，完全克隆（拷貝的對象，而不是地址），修改目標對象不會影響被拷貝對象。

var targetObj={
       id:1
};
	var obj={
        id:1,
	    name:"andy"
     };
  $.extend(targetObj,obj);//淺拷貝
  $.extend(true,targetObj,obj);//深拷貝

jQuery多庫共存

jQuery使用$作為表示符，隨著jQuery的流行，其他js庫也會用這$作為標識符，這樣一起使用會引起衝突

需要一個解決方案，讓jQuery和其他的js庫不存在衝突，可以同時存在，這就叫多庫共存

解決方案：

把裡面的$符號統一改為jQuery。比如jQuery("div")

jQuery變數規定新的名稱：$noConflict() var xx=$.noConflict()

 <div></div>
              <script>
                $(function(){
               function $(ele){
                 return document.querySelector(ele);
               }
               console.log(div);//error
               jQuery.each();//right
               var suibian=jQuery.noConflict();
               console.log(suibian("span"));//right
                })
              </script>

jQuery插件

jQuery功能比較有限，想要更複雜的特效效果，可以藉助jQuery插件完成

jQuery插件庫 https://www.jq22.com/
jQuery之家 http://www.htmleaf.com/

jQuery插件使用步驟

引入相關文件。（jQuery文件和插件文件）
複製相關html、css、js（調用插件）

常用插件：

瀑布流
圖片懶載入（圖片使用延遲載入在可提高網頁下載速度。也能幫助減輕伺服器負載，當我們頁面滑動到可視區域，再顯示圖片）
全屏滾動

中文翻譯網站：http://www.dowebok.com/demo/2014/77/

Bootstrap JS 插件：

bootstrap框架也是依賴於jQuery開發的，因此裡面的js插件使用，也必須引入jQuery文件

jQuery筆記