目錄

一、jQuery介紹

1. jQuery概述

2. jQuery基本使用——入口函式

3. DOM物件和jQuery物件

4. DOM物件和jQuery物件相互轉換

5. jQuery隱式迭代（重要）

二、jQuery鏈式編程及樣式操作

1. 鏈式編程

2. jQuery修改樣式css方法

3. 設定類樣式方法

三、jQuery影片

1. jQuery顯示與隱藏效果

2. 滑動效果

3. 事件切換

4. 淡入淡出效果

5. 自定義影片

6. 停止影片排隊

四、jQuery相關操作

1. jQuery屬性操作

1.1 設定或獲取元素固有屬性值prop()

1.2 設定或獲取元素自定義屬性值 attr()

1.3 資料快取 data()

2. jQuery內容文本值

2.1 普通元素內容 html()

2.2 普通元素文本內容 text()

2.3 表單的值 val()

3. jQuery元素操作

3.1 遍歷元素

3.2 遍歷資料

3.3 創建元素

3.4 添加元素

3.5 洗掉元素

4. jQuery尺寸

5. jQuery位置

5.1 offset() 設定或獲取元素偏移

5.2 position()獲取元素偏移

5.3 scrollTop()/scrollLeft()設定或獲取元素被卷去的頭部和左側

五、jQuery事件系結和解綁

1. 事件注冊

1.1 單個事件注冊

1.2 事件處理on()系結事件

2. 事件處理 off() 解綁事件

3. 自動觸發事件

4. 事件物件

5. 拷貝物件 extend

一、jQuery介紹

1. jQuery概述

jQuery 是一個快速、簡潔的 JS庫，其設計宗旨是 “write Less , Do More”,即倡導寫更少的代碼，做更多的事情

jQuery 封裝了 JavaScript 常用的功能代碼，優化了 DOM操作、事件處理、影片設計和 Ajax互動

$是 jQuery 的頂級物件，在代碼中可以使用 jQuery 代替 $，但通常都直接使用$

學習 jQuery本質： 就是學習呼叫這些函式（方法）

jQuery使用前提：引入jQuery檔案

網址：jQuery 進入該鏈接下載jQuery檔案，和代碼放在同一目錄下

像圖片所示引入即可

2. jQuery基本使用——入口函式

?方法一（推薦）：
$(function( ) {
...// 此處是頁面DOM加載完成的入口
});

---

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

說明：

1.等著 DOM結構渲染完畢即可執行內部代碼，不必等到所有外部資源加載完成，jQuery 幫我們完成了封裝，

2. 相當于原生 js中的 DOMContentLoaded,當頁面主要元素加載完畢即執行

3. DOM物件和jQuery物件

1.用原生JS獲取來的物件就是DOM物件
例如： var s = document.querySelector('div'); //s 是DOM物件

2. jQuery方法獲取的元素就是jQuery 物件
例如：$('div'); // $('div')就是一個jQuery 物件

3. jQuery物件本質是： 利用 $ 對 DOM物件包裝后產生的物件（偽陣列形式存盤）

4. jQuery 物件只能使用 jQuery 方法， DOM 物件則 使用原生的 JavaScript 屬性和方法

4. DOM物件和jQuery物件相互轉換

因為原生的 js 比 jQuery更大，原生的一些屬性和方法 jQuery沒有給我們封裝，要想使用這些屬性和方法需要把jQuery物件轉換為 DOM物件才能使用

1.DOM物件轉換為 jQuery 物件： $(DOM物件)

例如： $('div');

如果是用DOM方法獲取過來的DOM物件就不用加 單引號

例如： var demo = document.querySelector('div');

$(demo);

2. jQuery 物件轉換為 DOM物件（兩種）

方法一：
$('div')[index] index是索引號

方法二：
$('div').get(index) index是索引號

如轉換完后使用 DOM的play方法，$('video')[0].play()

關于jQuery的選擇器，其實和CSS很類似，博主會另外寫一篇博客來分享它，不過放心，即使你們沒學過，也可以看的懂喲~

5. jQuery隱式迭代（重要）

遍歷內部DOM元素（偽陣列形式存盤）的程序就叫做 隱式迭代

簡單理解：給匹配到的所有元素進行回圈遍歷，執行相應的方法，而不用我們再進行回圈，簡化我們的操作，

例子： 給四個 div 設定背景顏色為粉色 【jQuery物件不能使用 style】

$("div").css("background","pink");

案例：按下某個按鈕，當前按鈕背景顏色發生變化，其余的按鈕不變

<script> 
  $(function(){
          //1.隱式迭代  給所有的按鈕都系結了點擊事件
            $("button").click(function(){
           // 2.當前的元素變化背景顏色
                $(this).css("background","pink");
             //3.其余的兄弟去掉背景顏色  隱式迭代
                $(this).siblings("button").css("background","");
            })
        });
</script>

二、jQuery鏈式編程及樣式操作

1. 鏈式編程

鏈式編程是為了節省代碼量，看起來更優雅

例子：把當前點擊的元素顏色變為紅色，當前元素的其余兄弟不變色

$(this).css('color','red').sibling().css('color','');

使用鏈式編程一定注意是哪個物件執行樣式

2. jQuery修改樣式css方法

jQuery可以使用css方法來修改簡單元素樣式；也可以操作類，修改多個樣式

1. 引數只寫屬性名，則是回傳屬性值

$(this).css("color");

2. 引數是 屬性名，屬性值，逗號分隔，是設定一組樣式，屬性必須加引號，值如果是數字可以不用跟單位和引號

$(this).css("color","red");

3. 引數可以是物件形式，方便設定多組樣式，屬性名和屬性值用冒號隔開，屬性可以不用加引號

$(this).css({"color":"white","font-size":"20px"});

3. 設定類樣式方法

作用等同于以前的 classList，可以操作類樣式，注意操作類里面的引數不要加點

如類名叫 current；
1. 添加類
$("div").addClass("current");

2. 移除類
$("div").removeClass("current");

3. 切換類(有就移除，沒有就添加)
$("div").toggleClass("current");

原生JS中 className 會覆寫元素原先里面的類名，jQuery 里面類操作只是對指定類進行操作，不影響原先的類名.

三、jQuery影片

1. jQuery顯示與隱藏效果

顯示：
show([speed,[easing],[fn]])

隱藏：
hide([speed,[easing],[fn]])

切換：
toggle([speed,[easing],[fn]])

引數：
（1）引數都可以省略，無影片直接顯示
（2）speed: 三種預定速度之一的字串（“slow”,"normal",or"fast"）或表示影片時常的毫秒數值（如：1000）
（3）easing:（Optional）用來指定切換效果，默認是“swing”,可用引數“linear”
（4）fn: 回呼函式，在影片完成時執行的函式，每個元素執行一次

一般情況下，我們都不加引數直接顯示隱藏就可以了

2. 滑動效果

滑出：
slideDown([speed,[easing],[fn]])

滑入：
slideUp([speed,[easing],[fn]])

切換：
slideToggle([speed,[easing],[fn]])

引數同上

3. 事件切換

hover([over,]out)

（1）over: 滑鼠移到元素上要觸發的函式（相當于 mouseenter）

（2）out: 滑鼠移出元素要觸發的函式（相當于 mouseleave）

1.事件切換 hover 就是滑鼠經過和離開的復合寫法

2. 事件切換 hover 如果只寫一個函式，那么滑鼠經過和滑鼠離開都會觸發這個函式

案例：滑鼠經過 ul 滑出，滑鼠離開，ul滑入

寫法一：

 $(".nav>li").hover(function(){
         //滑鼠經過 滑出
            $(this).children("ul").slideDown(200);
        },function(){
           //滑鼠離開  滑入
            $(this).children("ul").slideUp(200);
        })

寫法二：

如果只寫一個函式，那么滑鼠經過和滑鼠離開都會觸發這個函式

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

4. 淡入淡出效果

淡入：
fadeIn([speed,[easing],[fn]])

淡出：
fadeOut([speed,[easing],[fn]])

切換：
fadeToggle([speed,[easing],[fn]])

引數同上

漸進方式調整到指定的不透明度：
fadeTo([speed,opacity,[easing],[fn]])

效果引數：
（1）opacity透明度必須寫，取值0~1之間
（2）speed:同上，必須寫
后面兩者內容同上

5. 自定義影片

語法：
animate(params,[speed,[easing],[fn]])

引數
（1）params：想要更改的樣式屬性，以物件形式傳遞，必須寫，屬性名可以不用帶引號，如果是復合屬性則需要采取駝峰命名法，其余引數都可以省略

其余三個同上

案例：點擊 button 按鈕 讓 div 盒子做影片

<script>
        $(function(){
            $("button").click(function(){
                $("div").animate({
                    left: 500,
                    top: 300,
                    opacity: .4,
                    width: 500
                }, 500);
            })
        })
</script>

6. 停止影片排隊

1.影片或效果佇列
影片或效果一旦觸發就會執行，如果多次觸發，就造成多個影片或者效果排隊執行

2. 停止排隊
stop()

（1）stop()方法用于停止影片或效果
（2）注意：stop()寫到影片或者效果的 前面，相當于停止結束上一次的影片，寫到后面則不執行影片了

$(this).children("ul").stop().slideToggle();

四、jQuery相關操作

1. jQuery屬性操作

1.1 設定或獲取元素固有屬性值prop()

所謂元素固有屬性就是元素本身自帶的屬性，比如<a>元素里面的href,比如<input>元素里面的type

1.獲取屬性語法
prop("屬性")

2.設定屬性語法
prop("屬性"，“屬性值”)

代碼：

 $(function(){
            $("a").prop("href");  //獲取a標簽的 href屬性
            $("a").prop("title","我們都挺好");  //更改 a 標簽的title內容
            $("input").change(function(){
                console.log($(this).prop("checked"));   //當表單的check屬性發生變化時列印輸出它的值
            })
        }) 

1.2 設定或獲取元素自定義屬性值 attr()

用戶自己給元素添加的屬性，我們稱為自定義屬性，比如給 div 添加 index="1"

1.獲取屬性語法
attr("屬性") //類似原生 getAttribute()

2.設定屬性語法
attr("屬性","屬性值") //類似原生 setAttribute()

該方法也可以獲取H5自定義屬性

1.3 資料快取 data()

data()方法可以在指定的元素上存取資料，并不會修改DOM元素的結構，一旦頁面重繪，之前存放的資料都將被移除，同時，還可以讀取 HTML5自定義屬性 data-index，只不過獲取時不需要加 data- ，得到的是 數字型

1.附加資料語法
data("name","value") //向被選元素附加資料

2.獲取資料語法
data("name") // 向被選元素獲取資料

例子：給span標簽加資料

 $("span").data("uname","andy"); //資料快取 data() 這個里面的資料是存放在元素的記憶體里面,在頁面中看不見
 console.log($("span").data("uname"));
 console.log($("div").data("index")); //獲取 data-index自定義屬性

2. jQuery內容文本值

主要針對元素的 內容 還有 表單的值 操作

2.1 普通元素內容 html()

相當于原生 inner HTML

html() //獲取元素的內容

html("內容") //設定元素的內容

獲取到的包含標簽

代碼演示：

<body>
    <div><i>你好</i></div>
    <ul></ul>
    <script>
        $(function(){
            console.log($("div").html());
        })
    </script>
</body>

2.2 普通元素文本內容 text()

相當于原生 innerText

text() //獲取元素的文本內容

text("文本內容") // 設定元素的文本內容

2.3 表單的值 val()

相當于原生 value

val() //獲取表單的文本內容

val("內容") //設定表單的文本內容

3. jQuery元素操作

主要是遍歷、創建、添加、洗掉元素操作

3.1 遍歷元素

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

語法：

$("div").each(function(index,domEle){
xxx;
})

1.each()方法遍歷匹配的每一個元素，主要用DOM處理，each每一個

2.里面的回呼函式有2個引數： index是每個元素的索引號; domEle是每個 DOM元素物件，不是 jQuery物件，且index和domEle可以自己命名

3.所以要想使用 jquery方法，需要給這個dom元素轉換為 jquery物件
$(domEle)

4.獲取標簽里的值得到的是字串，如果要做運算，需要轉換為 數字型，用 parseInt

3.2 遍歷資料

$.each(object,function(index,element){ xxx; } )

遍歷元素：
$.each($("div"),function(i,e){ })

遍歷陣列：
$.each(arr,function(i,e){ })

遍歷物件：
$.each({name:"andy", age:18},function(i,e){ })

1.$.each()方法可用于遍歷任何物件，主要用于資料處理，比如陣列，物件

2.里面的函式有2個引數： index是每個元素的索引號; element 遍歷內容

3.3 創建元素

語法：

$("<li></li>");

動態的創建了一個 <li>

3.4 添加元素

1. 內部添加

element.append("內容");
把內容放入匹配元素內部最后面，類似原生 appendChild

element.prepend("內容")；
把內容放入匹配元素內部最前面

如
var li = $("<li>新創的li</li>");
$("ul").append(li);
$("ul").prepend(li);

---

2.外部添加

element.after("內容") //把內容放入目標元素后面

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

① 內部添加元素，生成之后，它們是父子關系

② 外部添加元素，生成之后，它們是兄弟關系

3.5 洗掉元素

element.remove() //洗掉匹配的元素（本身）

例如：
$("ul").remove();下列用法相同

element.empty() //洗掉匹配的元素集合中所有的子節點

element().html("") //清空匹配的元素內容

二三兩種，都是洗掉子節點

4. jQuery尺寸

以上引數為空，則是獲取相應值，回傳的是數字型

如果引數為數字，則是修改相應值

引數可以不必寫單位

5. jQuery位置

5.1 offset() 設定或獲取元素偏移

① offset() 方法設定或回傳被選元素相對于 檔案 的偏移坐標，跟父級沒有關系

② 該方法有2個屬性 left、top， offset().top 用于獲取距離檔案頂部的距離， offset().left 用于獲取距離檔案左側的距離

③ 可以設定元素的偏移： offset({top:10, left: 30});

代碼：

$(function(){
   console.log($(".son").offset());
   console.log($(".son").offset().top);
   $(".son").offset({
      top: 200,
      left: 200
})
})

5.2 position()獲取元素偏移

position() 方法用于回傳被選元素相對于 帶有定位的父級 偏移坐標，如果父級都沒有定位，則以檔案為準

里面也有2個屬性，top 和 left

注意： 這個方法只能獲取不能設定偏移

console.log($(".son").position());

5.3 scrollTop()/scrollLeft()設定或獲取元素被卷去的頭部和左側

即可以通過 $("div").scrollTop(100)；來設定使頁面一打開就已經卷去100的高度

其中可以使用 animate影片回傳頂部，animate影片函式里面有個 scrollTop屬性，可以設定位置

但是是元素做影片，因此 $("body,html").animate({scrollTop:0})

五、jQuery事件系結和解綁

1. 事件注冊

1.1 單個事件注冊

語法：

element.事件（function(){ }）

如：$("div").click(function(){ 事件處理程式 })

1.2 事件處理on()系結事件

on() 方法再匹配元素上系結一個或多個事件的事件處理函式

語法：

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

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

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

3. fn:回呼函式 即系結在元素身上的偵聽函式

on方法優勢1：

可以系結多個事件，多個處理事件處理程式

例如： $("div").on({

mouseover:function(){},

mouseout:function(){},

click:function(){}

});

如果事件處理程式相同

$("div").on("mouseover mouseout",function(){

$(this).toggleClass("current");

});

---

on()方法優勢2：

可以事件委派操作，事件委派的定義就是，把原來加給子元素身上的事件系結在父元素身上，就是把事件委派給父元素

例如： $("ul").on("click","li",function(){

alert("hello world!");

});

---

on()方法優勢3：

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

2. 事件處理 off() 解綁事件

off()方法可以移除通過 on() 方法添加的事件處理程式

$("p").off() //解綁p元素所有事件處理程式

$("p").off("click") //解綁p元素上面的點擊事件

$("ul").off("click","li") //解綁事件委托

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

3. 自動觸發事件

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

element.click() // 第一種 簡寫形式

element.trigger("type") // 第二種 自動觸發模式

element.triggerHandler(type) // 第三種 自動觸發模式

注意：第三種觸發事件 triggerHandler()與前面兩種的區別是，他不會觸發元素的默認行為 （默認行為：如表單獲取焦點時，游標自動閃爍，用該方法觸發事件游標不閃爍）

4. 事件物件

事件被觸發，就會有事件物件的產生

element.on(events,[selector],function(event){ })

阻止默認行為： event.preventDefault() 或者 return false

阻止冒泡: event.stopPropagation()

5. 拷貝物件 extend

如果想要把某個物件拷貝（合并）給另外一個物件使用，此時可以使用 $.extend() 方法

語法：

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

1. deep:如果設為 true 為深拷貝，默認為 false 淺拷貝

2. target:要拷貝的目標物件

3. object1:待拷貝到第一個物件的物件

4. objectN:待拷貝到第N個物件的物件

5. 淺拷貝是把被拷貝的物件 復雜資料型別中的地址 拷貝給目標物件，修改目標物件 會影響 被拷貝物件

6. 深拷貝，前面加 true，完全克隆（拷貝的物件，而不是地址），修改目標物件 不會影響 被拷貝物件

下面來看兩張圖：

其中targetObj為要拷貝的物件，obj為待拷貝的物件

淺拷貝：

深拷貝：

這次的知識點總結到這里就結束了，內容可能稍稍有點多，如果你認真看完了，請收下我的大拇指👍！