下載地址 https://jquery.com/ https://cdn.jsdelivr.net/npm/[email protected]/ jQuery API 中文文件 https://jquery.cuishifeng.cn/ 簡介 jQuery 是一個 JavaScript 庫，極大地簡化了 JavaScript 程式設計 jQuery 的入口函式

// 第一種
$(function() {
    // 此處是頁面 DOM 載入完成的入口（推薦）
});
// 第二種
$(document).ready(function() {
    // 此處是頁面 DOM 載入完成的入口
});

jQuery 的頂級物件 $

$是 jQuery的別稱，在程式碼中可以使用 jQuery代替$，但一般為了方便，通常都直接使用$ $是 jQuery的頂級物件，相當於原生 JavaScript中的 window。把元素利用$包裝成 jQuery物件,就可以呼叫 jQuery的方法 jQuery 物件和 DOM 物件的互相轉換 DOM 物件轉換為 jQuery 物件：$(DOM物件)

var mydiv = document.querySelector('div');
$(mydiv);

jQuery 物件轉換為 DOM 物件 $('div')[index]; // index是索引號 $('div').get(index); // index是索引號

$('div')[0];
$(
 
'div').get(0);

jQuery 基礎選擇器 $("選擇器") // 選擇器直接寫CSS選擇器即可，但是要加引號 層級選擇器 篩選選擇器 篩選選擇器（重點） 屬性選擇器 $("div[id]") // 選擇所有含有id屬性的div元素 $("input[name='newsletter']") // 選擇所有的name屬性等於'newsletter'的input元素 $("input[name!='newsletter']") // 選擇所有的name屬性不等於'newsletter'的input元素 $("input[name^='news']") // 選擇所有的name屬性以'news'開頭的input元素 $("input[name$='news']") // 選擇所有的name屬性以'news'結尾的input元素 $("input[name*='man']") // 選擇所有的name屬性包含'news'的input元素 $("input[id][name$='man']") // 可以使用多個屬性進行聯合選擇，該選擇器是得到所有的含有id屬性並且name屬性以man結尾的元素 返回指定的祖先元素 parents()

可以返回指定的祖先元素 例：$(".four").parents(".one"); 選擇器 :checked 匹配所有選中的被選中元素(複選框、單選框等) 例：$("input:checked") 元素固有屬性值 prop() 就是元素本身自帶的屬性，比如 <a> 元素裡面的 href 獲取屬性 prop("屬性"); 設定屬性 prop("屬性", "屬性值"); 元素自定義屬性值 attr() 比如給 div 新增 index = "1" 獲取屬性 attr("屬性"); 設定屬性 attr("屬性", "屬性值"); 資料快取 data() data([key],[value]) key:儲存的資料名 value:將要儲存的任意資料 可以在指定的元素上存取資料，並不會修改DOM 元素結構。一旦頁面重新整理，之前存放的資料都將被移除。 新增資料 data("name", "value"); 獲取資料 data("name"); 內容文字值 普通元素內容 html() html() // 獲取元素的內容 html("內容") // 設定元素的內容 普通元素文字內容 text() text() // 獲取元素文字的內容 text("文字內容") // 設定元素文字的內容 表單內容 val() val() // 獲取表單的內容 val("內容") // 設定表單的內容 鏈式程式設計 節省程式碼量，看起來更優雅 例：$(this).css('color', 'red').sibling().css('color', '');

---

多個事件繫結 on() 繫結一個或多個事件的事件處理函式 可以給未來動態生成的元素繫結事件 語法：on(events,[selector],[data],fn) events:一個或多個用空格分隔的事件型別，如"click"或"keydown" selector:元素的子元素選擇器 data:當一個事件被觸發時要傳遞event.data給事件處理函式。 fn:回撥函式 繫結多個事件

$("div").on({
    mouseover: function() {},
    mouseout: function() {},
    click: function() {}
});

如果事件處理函式相同

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

事件委派 把原來加給子元素身上的事件繫結在父元素身上，就是把事件委派給父元素

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

解綁事件 off() $("p").off() // 解綁p元素所有事件函式 $("p").off("click") // 解綁p元素上面的點選事件 $("ul").off("click", "li") // 解綁事件委託 只觸發一次事件 one() $("p").one("click", function() {}); 自動觸發事件 trigger() element.click() // 第一種簡寫形式 element.trigger("click") // 第二種自動觸發模式 element.triggerHandler("click") // 第三種自動觸發模式，不會觸發預設事件 事件物件 element.on(events, [selector], function(event) {}); 阻止預設行為：event.preventDefault() 或者 return false 阻止冒泡：event.stopPropagation() 物件拷貝 $.extend([deep], target, object1, [objectN]) deep:如果設為true為深拷貝，預設為false 淺拷貝 target:待修改物件 object1:待拷貝的第一個物件 objectN:待拷貝的第N個物件 淺拷貝是把被拷貝的物件複雜資料型別中的地址拷貝給目標物件，修改目標物件會影響被拷貝的物件 深拷貝，完全克隆，修改目標物件不會影響被拷貝的物件

---

jQuery 設定CSS樣式 1.引數只寫屬性名，則是返回屬性值 $(this).css('color'); 2.引數是屬性名，屬性值，逗號分隔，是設定一組樣式，屬性必須加引號，值如果是數字可以不用跟單位和引號 $(this).css('屬性', '值'); 例：$('div').css('background-color', 'skyblue'); 3.引數可以是物件形式，方便設定多組樣式。屬性名和屬性值用冒號隔開，屬性可以不用加引號 $(this).css({'color': 'red', 'font-size': '20px'}); 設定類樣式 新增類 $('div').addClass('current'); 移除類 $('div').removeClass('current'); 切換類 $('div').toggleClass('current'); jQuery 得到當前元素的索引號 $(this).index(); hover 事件 hover([over,]out) over:滑鼠移到元素上要觸發的函式 out:滑鼠移出元素要觸發的函式 如果只寫一個函式，那麼滑鼠經過和滑鼠離開都會觸發這個函式

---

延時 delay() delay(duration) duration：延時時間，單位：毫秒 例：$('#foo').slideUp(300).delay(800).fadeIn(400); 顯示隱藏效果 顯示 show([speed,[easing],[fn]]) 隱藏 hide([speed,[easing],[fn]]) 切換 toggle([speed],[easing],[fn]) 引數都可以省略 speed:三種預定速度之一的字串("slow", "normal", "fast")或表示動畫時長的毫秒數值(如：1000) easing:(Optional) 用來指定切換效果，預設是"swing"，可用引數"linear" fn:在動畫完成時執行的函式，每個元素執行一次 滑動效果 向下滑動 slideDown([speed],[easing],[fn]) 向上滑動 slideUp([speed,[easing],[fn]]) 滑動切換 slideToggle([speed],[easing],[fn]) 引數都可以省略 speed:三種預定速度之一的字串("slow", "normal", "fast")或表示動畫時長的毫秒數值(如：1000) easing:(Optional) 用來指定切換效果，預設是"swing"，可用引數"linear" fn:在動畫完成時執行的函式，每個元素執行一次 淡入淡出效果 淡入 fadeIn([speed],[easing],[fn]) 淡出 fadeOut([speed],[easing],[fn]) 切換 fadeToggle([speed,[easing],[fn]]) 引數都可以省略 speed:三種預定速度之一的字串("slow", "normal", "fast")或表示動畫時長的毫秒數值(如：1000) easing:(Optional) 用來指定切換效果，預設是"swing"，可用引數"linear" fn:在動畫完成時執行的函式，每個元素執行一次 修改透明度 fadeTo([[speed],opacity,[easing],[fn]]) speed:三種預定速度之一的字串("slow", "normal", "fast")或表示動畫時長的毫秒數值(如：1000) opacity:一個0至1之間表示透明度的數字 easing:(Optional) 用來指定切換效果，預設是"swing"，可用引數"linear" fn:在動畫完成時執行的函式，每個元素執行一次 自定義動畫 animate animate(params,[speed],[easing],[fn]) params:一組包含作為動畫屬性和終值的樣式屬性和及其值的集合 speed:三種預定速度之一的字串("slow","normal", "fast")或表示動畫時長的毫秒數值(如：1000) easing:要使用的擦除效果的名稱(需要外掛支援).預設jQuery提供"linear" 和 "swing" fn:在動畫完成時執行的函式，每個元素執行一次 $("div").animate({ width: "90%", height: "100%", fontSize: "10px" }, 1000); 因為動畫是給元素做的，如果要給文件做動畫，轉換一下 body 和 html 即可 $("body, html").animate({ scrollTop: 0 }, 1000); 停止動畫 stop();

---

遍歷元素 each 語法1 $("div").each(function(index, domEle) {}); index 是每個元素的索引號，domEle 是每個DOM元素物件 要想使用jQuery方法，需要給DOM元素轉換為jQuery物件 $(domEle) 語法2 $.each(object, function(index, element) {}); $.each() 方法可用於遍歷任何物件。主要用於資料處理，比如陣列，物件 index 是每個元素的索引號，element 遍歷內容 建立元素 例：$("<li></li>"); var li = $("<li>內容</li>"); 新增元素 $("ul").append(li); // 內部新增，放到指定元素內部的最後面 $("ul").prepend(li); // 內部新增，放到指定元素內部的最前面 $("ul").after(li); // 外部新增，放到指定元素的後面 $("ul").before(li); // 外部新增，放到指定元素的前面 刪除元素 $("ul").remove(); // 刪除元素，包括本身 $("ul").empty(); // 刪除元素裡面的子節點 $("ul").html(""); // 清空元素裡面的子節點 jQuery 尺寸 以下引數為空，則是獲取相應值，返回的是數字型 如果引數為數字，則是修改相應值。引數可以不寫單位 jQuery 位置 offset() 設定或獲取元素偏移 offset() 方法設定或返回被選元素相對於文件的偏移座標，跟父級沒有關係 該方法有2個屬性 left、top。 offset().top 用於獲取距離文件頂部的距離，offset().left 用於獲取距離文梐左側的距離 可以設定元素的偏移：offset({top:10, left:30}); position() 獲取元素偏移 position() 方法用於返回被選元素相當於帶有定位的父級偏移座標，如果父級沒有定位，則以文件為準 scrollTop()/scrollLeft() 設定或獲取元素被捲去的頭部和左側 $("div").scrollTop(); // 獲取元素被捲去的頭部 $("document").scrollTop(300); // 設定文件頭部被捲去的距離

---

多庫共存 1.如果 $ 符號衝突，我們就使用 jQuery 例：jQuery.each(); 2.讓 jQuery 釋放對 $ 的控制權，讓使用者自己定義 例：var test = $.noConflict(); 然後再使用 test.each();

本文來自部落格園，作者：番薯吃地瓜，轉載請註明原文連結：https://www.cnblogs.com/sweet-potatos/p/15246029.html