超詳細的jQuery知識點

jQuery

jQuery的基本介紹

概念
jQuery是一個快速簡介的JavaScript代碼庫，他不是一種新的語言，也不能取代JS，他能幫助我們快速方便的使用JS
官網：https://jquery.com/
傳送門：jQuery官網
特點
1 優質的選擇器和篩選器
2 方便的隱式迭代
3 強大的鏈式編程

基於以上特點：很多時候我們要做的事情被 “一行代碼解決”

使用
必須下載並導入jQuery包
也就是 : jquery.js 或者 jquery.min.js
靜態資源庫

jQuery的引入

1. 將jQuery庫文件添加到項目的js目錄中
2. 在頁面彙總使用script標籤引入jQuery庫文件

<script src="jquery-1.10.2.min.js"></script>

3. 在HTML頁面使用jQuery

• 在<script></script>裏面使用jQuery
• 在獨立的.js文件中使用jQuery，然後將.js文件引入HTML頁面

jQuery語法

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

> javascript 語法：$(selector).action(); 如 
> 隱藏當前元素：$(this).hide();
> 隱藏所有的<p>元素：$("p").hide(); 
> 隱藏所有的class="test"的元素：$(".test").hide();
> 隱藏所有的id="test"的元素：$("#test").hide();

入口函數

1. JavaScript入口函數

window.onload=function(){
//...
}

JavaScript 的 window.onload
事件是等到所有內容，包括外部圖片之類的文件加載完後，纔會執行。且只會執行一次，如果執行多次，前面的會被後面的覆蓋

2. jQuery入口函數

$(document).ready(function(){
    //...
});
或者
$(function(){
    //...
});

jQuery 的入口函數是在 html 所有標籤(DOM)都加載之後，就會去執行。可以執行很多次，不會覆蓋

jQuery選擇器

注意事項：通過jQuery選擇器獲取的對象是jQuery封裝過後的對象，並不是JS原生的對象。所以JS對象的屬性和方法並不能使用
Id選擇器 $("#box");
Class選擇器 $(".box");
標籤選擇器 $(“span”);
包含選擇器 $("#box p");
子選擇器 $("#box>p");
羣組選擇器 $("#box,.cont,p");
屬性選擇器 $(“input[type=button]”);
特殊選擇器:
$("#box:first");
$("#box:last");
$("#box:eq(3)");
$("#box:odd");
$("#box:even")
篩選器方法 — 對選擇器獲取到的一組標籤對象進行篩選
— 便於鏈式編程
first() 匹配第一個
.last() 匹配最後一個
.eq() 匹配指定下標
.find() 匹配指定的後代元素
.children() 匹配指定的子元素
.prev() 匹配上一個兄弟
.prevAll() 匹配上面所有的兄弟
.next() 匹配下一個兄弟
.nextAll() 匹配下面所有兄弟
.siblings() 匹配所有兄弟,不管上下
.parent() 匹配直接父級
.parents() 匹配所有父級
.end() 匹配鏈式編程選擇器的上一級

jQuery的屬性操作

1 .prop()方法

標籤	解釋
標籤對象.prop(屬性)	獲取指定屬性的屬性值
標籤對象.prop(屬性 , 屬性值)	設定屬性和屬性值
標籤對象.prop(自定義屬性 , 屬性值)	設定自定義屬性和屬性值

注意：

設置內置屬性時，可以直接顯示在標籤上，爲 可見的內置屬性 設置自定義屬性時，不會直接顯示在標籤上，爲 不可見的自定義屬性

2 .attr()方法

標籤	解釋
標籤對象.attr(屬性)	獲取指定屬性的屬性值
標籤對象.attr(屬性 , 屬性值)	設定屬性和屬性值
標籤對象.attr(自定義屬性 , 屬性值)	設定自定義屬性和屬性值

注意：

設置屬性時，直接顯示在標籤上，爲 可見的內置 或 自定義

3 .removeProp()方法

標籤	解釋
標籤對象.removeProp(屬性)	刪除指定的屬性，多用於自定義屬性

4 .removeAttr()方法

標籤	解釋
標籤對象.removeAttr(屬性)	刪除指定的屬性

jQuery的樣式操作

常用操作方式：

標籤	解釋
標籤對象.css(屬性)	獲取指定屬性的屬性值
標籤對象.css(屬性 ：屬性值)	設定屬性和屬性值
標籤對象.css({屬性 : 屬性值})	以對象的形式,設定屬性以及屬性值也可以同時設定多個屬性屬性定義的方式比較靈活

標籤對象的內容操作

1. html（）
效果類似於原生JavaScript的 innerHTML

標籤	解釋
標籤對象.html()	沒有參數是獲取標籤內容
標籤對象.html(內容)	帶有參數是設定標籤內容

2. text（）
效果類似於原生JavaScript的 innerText

標籤	解釋
標籤對象.text()	沒有參數是獲取標籤內容
標籤對象.text(內容)	帶有參數是設定標籤內容

3. 總結

.html —> innerHTML
.text —> innerText
區別 : 都是小寫字母
沒有參數是獲取,有參數是設定

標籤對象的class操作

常用操作方式

標籤	解釋
.hasClass()	判斷標籤是否具有某個class，返回布爾值
.addClass()	給標籤添加class，可以添加多個
.removeClass()	刪除標籤的class，可以刪除多個
.toggleClass()	判斷當前標籤是否具有某個class，有就刪除，沒有就添加

jQuery的樣式操作

1.綁定事件 — on（）方法

//給button按鈕綁定一個點擊事件
$("button1),on(1 click1y function ) {
console.log(我被點擊了)
//給button按鈕綁定-個點擊事件，並且攜帶參數
$('button1).on(1 click't { name: 'Jack' }, function (e) {
console.log(e) //所有的內容都再事件對象裏面
console.log(e.data) // { name: 'Jack 1 }
})
//事件委託的方式給button綁定點擊事件
$('div*).on(1 click*, 'button', function () {
console.log(this) // button按鈕})
//事件委託的方式給button綁定點擊事件並攜帶參數
$("div*).on(1 click*, 'button1{ name: 'Jack' }, function（e）{
console.log(this) // button按鈕
console.log(e.data)
})

2.移除事件 — off（）方法

//給button 按鈕綁定一個點擊事件，執行handler 函數
$('button') . on('click', handler)
//移除事件使用off
$(' button') . off('click', handler)

3.只執行一次的事件 — one（）方法

//這個事件綁定在button身上
//當執行過一次之後就不再執行了
$("button").one("click",handler)

4.直接觸發事件 — trigger（）方法

//當代碼執行到這裏的時候，會自動觸發下一個button的click事件
$("button").trigger("click")

jQuery可以直接使用的事件

可以直接使用的事件也就是不需要on（）方法綁定，就可以直接執行的事件

1. click事件

//直接給div綁定一個點擊事件
$("div").click(function(){
console.log("我被點擊了")
}）

//給div綁定一個點擊事件並傳遞參數
$("div").click( {name：“crystal”}， function(e){
console.log("e.data")
}）

2. dblclick事件

//直接給div綁定一個雙擊事件
$("div").dblclick(function(){
console.log("我被點擊了")
}）

//給div綁定一個雙擊事件並傳遞參數
$("div").dblclick( {name：“crystal”}， function(e){
console.log("e.data")
}）

3. scroll事件

//直接給div綁定一個滾動事件
$("div").scroll(function(){
console.log("我被點擊了")
}）

//給div綁定一個滾動事件並傳遞參數
$("div").scroll( {name：“crystal”}， function(e){
console.log("e.data")
}）

4. hover事件

//這個事件要包含兩個事件處理函數
//一個是移入的時候觸發，一個是移出的時候觸發
//經過子級標籤邊界時不會被觸發
$("div").hover(function(){
console.log("移入的時候觸發")
}，function（）{
console.log("移出的時候觸發")
})

5. ready事件

jQuery的ready事件，與window.onload有些類似
相同點：都是文件加載完成以後在執行程序
不同點：
window.onload:當所有內容加載完畢包括圖片完整顯示，纔會認爲是加載完成，執行程序
ready：當頁面的標籤結構加載完成以後，就會加載外部執行程序

window.onload=function(){
    console.log('這是JavaScript加載')
}
$(window).ready(function(){
    console.log("jQuery加載")
})

jQuery阻止冒泡事件

$(".inner").click(e=>{
    //通過事件對象，阻止冒泡事件
    e.stopPropagation();
    //通過return false，阻止冒泡事件
    return false;
})

jQuery阻止默認事件

事件對象 preventDefault（）或者 return false；

$("from").click(e=>{
    //如果輸入的內容不是crystal，就阻止表單提交
    if($("input").val()!="crystal"){
        e.preventDefault();
        //通過return false；阻止默認事件
        return false;
    }
})

總結

jQuery中的return false； 號稱可以阻止一切

jQuery的隱式迭代

1. 常用操作方式
隱式----計算機程序默認自動執行的操作
迭代----此處指的是遍歷操作
總結

jQuery會默認對數組中所有標籤對象，循環遍歷，都執行相應操作
2. DEMO
jQuery的Tab切換

jQuery的元素操作

1. 創建元素

//創建一個標籤對象，同時 可以定義標籤的內容屬性等
var div = $('<div id="div" index="1">我是: - 個div標籤</div>');

2. 內部插入元素

//向div元素中插入一個p元素，放在最後
$('div'). append($('<p></p>'))
//把p元素插入到div中去，放在最後
$('<p>hello</p>'). appendTo($('div'))
//向div元素中插入一個p元素，放在最前
$('div'). prepend($('<p></p>'))
//把p元素插入到div中去，放在最前
$('<p>hello</p>'). prependTo($('div'))

3. 外部插入元素

//在div後面插入一個元素p
$("div").after($("<p></p>"))

//在div前面插入一個元素p
$("div").before($("<p></p>"))

//把p元素插入到div元素的後面
$("div").insertAfter($("<p></p>"))

//把p元素插入到div元素的前面
$("div").insertBefore($("<p></p>"))

4. 替換元素

//把div元素替換成p元素
$("div").replaceWith($("<p></p>"))

//用p元素替換掉div元素
$(("<p></p>").replaceAll($"div"))

5. 刪除元素

//刪除元素下的所有子節點
$("div").empty()

//把自己從頁面中移出
$("div").remove()

6. 克隆元素

//克隆一個li元素，接受兩個參數
//參數1：自己身上的事件要不要複製，默認是false
//參數2：所有子結點上的事件要不要複製，默認是true
$("li").clone()

jQuery的元素尺寸

1. 操作元素的寬和高

//獲取div元素內容位置的高， 不包含padding 和border
$('div').height()

//設置div內容位置的高爲200px
$('div').height(200)

//獲取div元素內容位置的寬，不包含padding 和border
$('div').width()

//設置div內容位置的寬爲200px
$(' div').width(200)

2. 獲取元素內置寬和高

//獲取div元素內容位置的高，包含padding 不包含border
$('div' ). innerHeight()

//獲取div元素內容位置的寬，包含padding 不包含border
$('div'). innerwidth()

3. 獲取元素外置寬和高

// 獲取div元素內容位置的高， 包含padding 和border
$('div' ). outerHeight()

//獲取div元素內容位置的高，包含padding 和border 和margin :
$(' div'). outerHeight(true)

. //獲取div元素內容位置的寬，包含padding 和border
$(' div'). outerWidth()

//獲取div元素內容位置的高，包含padding 和border 和margin
$('div') . outerWidth(true)

jQuery的元素位置

1. 元素相對頁面的位置

//獲取div相對頁面的位置
$('div').offset()
//得到一個對象  {left: 值，top：值}

//給div設置相對頁面的位置
$('div').offset({left:100,top:100})
//獲取定位到一個距離頁面左上角100  100的位置

2. 元素相對父級元素的偏移量

//獲取div相對於父元素的偏移量（定位的值）
$("div").position()

3. 獲取元素捲去的寬度和高度

window.onscroll=function(){
    //獲取瀏覽器捲去的高度
    console.log($(window).scrollTop());
}

window.onscroll=function(){
    //獲取瀏覽器捲去的寬度
    console.log($(window).scrollLeft());
}

jQuery的動畫

之前在原生JavaScript中，要實現動畫效果
我們要自己定義函數，使用逐步位移的方式，達到動畫效果
也就是我們曾經封裝的move函數
現在jQuery幫我們完成了這些操作，他拯救了我們~~~
1. show動畫 顯示動畫

//給div綁定一個顯示的動畫
$('div').show() //如果元素本身是display none的狀態可以顯示出來

//給div綁定一個顯示的動畫，接受三個參數
// $('div').show('毫秒"，' 速度"，' 回調函數')

$('div'). show(1000，'linear', function () {
console.1og('我顯示完畢')
})

2. hide動畫 隱藏動畫

//給div綁定一個隱藏的動畫
$('div').hide() //如果元素本身是display block的狀態可以隱藏出來

//給div綁定一個隱藏的動畫，接受三個參數
// $('div').hide('毫秒"，' 速度"，' 回調函數')

$('div'). hide(1000，'linear', function () {
console.1og('我隱藏完畢')
})

3. toggle動畫 顯示隱藏動畫

//給div綁定一個切換的動畫
$('div').toggle() //如果元素本身是顯示，那麼就隱藏，本身隱藏那麼就顯示

//給div綁定一個切換的動畫，接受三個參數
// $('div').toggle('毫秒"，' 速度"，' 回調函數')

$('div'). toggle(1000，'linear', function () {
console.1og('我動畫執行完畢')
})

4. slideDown動畫 下拉顯示

//給div綁定一個下拉顯示的動畫
$('div').slideDown() //本身隱藏下拉就顯示

//給div綁定一個下拉顯示的動畫，接受三個參數
// $('div').slideDown('毫秒"，' 速度"，' 回調函數')

$('div'). slideDown(1000，'linear', function () {
console.1og('我動畫執行完畢')
})

5. slideUp動畫 上拉隱藏

//給div綁定一個上拉隱藏的動畫
$('div').slideUp() //本身顯示上拉就隱藏

//給div綁定一個上拉隱藏的動畫，接受三個參數
// $('div').slideUp('毫秒"，' 速度"，' 回調函數')

$('div'). slideUp(1000，'linear', function () {
console.1og('我動畫執行完畢')
})

6. slideToggle動畫 上下切換動畫

//給div綁定一個上下切換的動畫
$('div').slideToggle() //本身顯示上拉就隱藏，本身隱藏  下拉就顯示

//給div綁定一個切換的動畫，接受三個參數
// $('div').slideToggle('毫秒"，' 速度"，' 回調函數')

$('div'). slideToggle(1000，'linear', function () {
console.1og('我動畫執行完畢')
})

7. fadeIn動畫 逐漸顯示動畫

//給div綁定動畫
$('div').fadeIn() //元素逐漸顯示

//給div綁定一個動畫，接受三個參數
// $('div').fadeIn('毫秒"，' 速度"，' 回調函數')

$('div'). fadeIn(1000，'linear', function () {
console.1og('我動畫執行完畢')
})

8. fadeOut動畫 逐漸隱藏動畫

//給div綁定動畫
$('div').fadeOut() //元素逐漸隱藏

//給div綁定一個動畫，接受三個參數
// $('div').fadeOut('毫秒"，' 速度"，' 回調函數')

$('div'). fadeOut(1000，'linear', function () {
console.1og('我動畫執行完畢')
})

9. fadeToggle動畫 漸隱漸顯切換動畫

//給div綁定動畫
$('div').fadeToggle() //本身隱藏逐漸顯示 本身顯示逐漸隱藏

//給div綁定一個動畫，接受三個參數
// $('div').fadeToggle('毫秒"，' 速度"，' 回調函數')

$('div'). fadeToggle(1000，'linear', function () {
console.1og('我動畫執行完畢')
})

10. fadeTo切換到指定透明度

//給div綁定動畫
$('div').fadeTo() //切換到指定透明度動畫

//給div綁定一個動畫，接受四個參數
// $('div').fadeToggle('毫秒"，'透明'， 速度"，' 回調函數')

$('div'). fadeToggle(1000，0.3，'linear', function () {
console.1og('我動畫執行完畢')
})

11. animate動畫 自定義動畫

//給div綁定動畫
$('div').animate() 

//給div綁定一個動畫，接受四個參數
// $('div').animate({屬性：屬性值}，'時間"，' 速度"，' 回調函數')

$('div'). animate({width：400}，1000，'linear', function () {
console.1og('我動畫執行完畢')
})

注意：如果一個動畫效果，我們瘋狂點擊的時候會屏閃 ，感覺像鬼畜一樣，這是爲什麼呢？？？（小朋友你是否有很多問號？）
jQuery 的動畫,如果上一次動畫沒有執行完畢
就觸發下一次了下一次動畫的執行
默認會在之前動畫結束之後,再去執行之後的動畫
12. stop（）動畫
當前動畫直接停止，動畫就停止在當前的位置，然後立即執行下一次動畫效果
13. finish（）動畫
當前動畫直接結束，動畫直接執行至終止狀態，然後立即執行下一次動畫效果

jQuery的Ajax

1. get請求

// 直接使用$.get方法發送一個請求
    // 參數一：請求地址
    // 參數二：請求時攜帶的參數
    // 參數三：請求成功的回調
    // 參數四：返回的數據類型

    $.get("./ajax.php", 
    { id: 10 }, 
    function (res) { 
        console.log(res)
    }, 
    "json")

2. post請求

   // 直接使用$.post方法發送一個請求
    // 參數一：請求地址
    // 參數二：請求時攜帶的參數
    // 參數三：請求成功的回調
    // 參數四：返回的數據類型

    $.post("./ajax.php", 
    { id: 10 }, 
    function (res) { 
        console.log(res)
    }, 
    "json")

3.綜合發送Ajax請求

// 使用$.ajax方法
// 只接受一個參數，是一個對象，這個對象對當前的請求進行所有配置
$.ajax({
    url:"./ajax",  // 必填  請求地址
    type:"get",  //選填，請求方式，默認get 忽略大小寫
    data:{},  //選填  發送請求是攜帶參數的
    dataType:"jsonp", //選填  期望返回值的數據類型  默認是string
    async:true, //選填  是否異步  默認爲true
    success(){}, //選填  成功的回調函數
    error(){}, //選填  成功的回調函數
    cache:true,//選填  是否緩存  默認爲true
    context:div, //選填  回調函數中的this指向，默認是Ajax對象
    status:{},  //選填，根據對應的狀態碼進行函數執行
    timeout:3000,  //選填  超時事件
})

4. 發送jsonp請求

// 使用$.ajax方法也可以發送jsonp請求
// 只不過dataType要寫成jsonp
$.ajax({
    url:"./jsonp.php",
    dataType:"jsonp",
    data:{name:"crystal",age:18},
    success(res){
        console.log(res)
    },
    jsonp:"cb"//jsonp請求的時候回調函數的key
    jsonpCallback:"fn"//jsonp請求的時候回調函數的名稱
})

jQuery的Ajax全局函數

1. Ajax的全局函數
全局的 ajax 函數，也稱作鉤子函數
所謂的鉤子函數，也就是在整個 ajax 執行到某個狀態時，執行的函數
而且每個 ajax 請求，鉤子函數都會被觸發
2. ajaxStart

ajax請求,在 開始 的時候,會觸發這個函數,多個請求只會觸發一次

$(window).ajaxStart(function(){
    console.log("有一個請求開始了")
})

3. ajaxSend

任意一個ajax請求,在 準備 send 之前 ,會觸發這個函數

$(window).ajaxSend(function(){
    console.log("有一個請求發送了")
})

4. ajaxSuccess

任意一個ajax請求,在 成功時,會觸發這個函數

$(window).ajaxSuccess(function(){
    console.log("有一個請求成功了")
})

5. ajaxError

任意一個ajax請求,在 失敗時,會觸發這個函數

$(window).ajaxError(function(){
    console.log("有一個請求失敗了")
})

6. ajaxComplete

任意一個ajax請求,在 完成 時,會觸發這個函數

$(window).ajaxComplete(function(){
    console.log("有一個請求完成了")
})

7. ajaxStop

所有ajax請求,都 結束 時,會觸發這個函數,只會觸發一次

$(window).ajaxStop(function(){
    console.log("有一個請求結束了")
})

jQuery的多庫共存

1. 什麼是多庫共存
jQuery 通過 $() 或者 jquery() 這兩個暴露的方法 來操作
如果有其他類庫，暴露的也是這兩個，就會造成使用上的衝突
此時我們就需要多庫共存（就是jquery的自我改名）
例如 : 玩遊戲時，用戶名被別人佔用了，只能換一個名字
2. 操作步驟 — 完全交出控制權

//這個方法可以交併且傳遞一個true 的時候，會完全交出控制權
jQuery.noConflict(true)

//. 上面代碼執行完畢以後$這個變量就不能用了
//jQuery這個變量也不能用了

console.1og($) // undefined
console. log(jQuery) // undefined

//如果沒有參數true jQuery 還可以使用

3. 操作步驟 — 更換控制權

// 可以用一個變量來接受返回值，這個變量就是新的控制權
var aa = jQuery . noConflict(true)
//接下來就可以把aa當作jQuery向外暴露的接口使用了
aa('div').click(function () { console.1og('我被點擊了') }

jQuery的插件擴展

1. jQuery.extend — 擴展給自己
只能通過jQuery來調用

// jQuery.extend接受一個參數， 是一個對象， 對象裏面是我們打展的方法
jQuery. extend({
max: function (...n) { return Math.max. apply(null, n) },
})

//使用添加的方法
const max = $.max(4, 5, 3, 2, 6, 1)
console.1og(max) // 6
const min = $.min(4, 5, 3, 2, 6, 1)
console.log(min) // 1

2. jQuery.fn.extend — 擴展給元素集

// jquery.fn. extend()接受一個參數。是- .個對象，對象裏面是我們擴展的方法
jQuery . fn. extend({
checked: function () {
// return關鍵字是爲T保證鏈式編程
return this . each(function() { this.checked = true })
})
//使用擴展的方法
//靠元素集合來調用
$(' input[type=checkbox]'). checked()
//執行完畢之後，所有的複選框就都是迷中狀態了

呼~~~終於總結完了。。。
最後希望你我都是積極向上的人♥