摘自千鋒教育kerwin的js教程
jQuery是一個前端庫，也是一個方法庫- 他里面封裝著一些列的方法供我們使用
- 我們常用的一些方法它里面都有，我們可以直接拿來使用就行了
jQuery之所以好用，很多人愿意使用，是因為他的幾個優點太強大了- 優質的選擇器和篩選器
- 好用的隱式迭代
- 強大的鏈式編程
- 因為這些東西的出現，很多時候我們要做的事情被 “一行代碼解決”
- 接下來我們就來認識一下
jQuery
01、使用jQuery
-
jQuery官網
-
jQuery方法大全中文網
- 這個網站可以多看看
- 里面是
jQuery的方法大全，而且是中文的
-
我們要使用
jQuery首先要下載一個- 可以去官網下載
-
然后就是再頁面里面引入
jQuery.js就行了 -
jQuery向全局暴露的接口就是jQuery或者$都行<body><div id="box"><ul><li>1</li><li>1</li><li>1</li><li>1</li></ul></div><script src="./lib/jquery-3.7.1.js"></script><script>const el = jQuery('#box');console.log(el);console.log($('ul li'));</script> </body>
02、選擇器和篩選器
2.1、基本選擇器
jQuery 有著相當強大的選擇器
- 按照 id 來獲取元素
// 按照 id 獲取頁面中的元素 const el = jQuery('#box') const el = $('#box') - 按照類名來選擇元素，可以獲取到一組元素
// 按照類名來選擇 const els = jQuery('.a') const els = $('.a') - 按照標簽名來獲取元素，可以獲取到一組元素
const lis = jQuery('li') const lis = $('li') - 按照選擇器來獲取元素，可以獲取到一組元素
const els = jQuery('ul > li') const els = $('ul > li')
2.2、特殊選擇器
-
直接找到第一個
$('li:first') // 找到所有 li 中的第一個 -
直接找到最后一個
$('li:last') // 找到所有 li 中的最后一個 -
直接找到第幾個
$('li:eq(3)') // 找到所有 li 中索引為 3 的那個 -
找到所有奇數個
$('li:odd') // 找到所有 li 中索引為 奇數 的 -
找到所有偶數
$('li:even') // 找到所有 li 中索引為 偶數 的
2.3、篩選器（鏈式調用）
-
jQuery 的篩選器就是在選擇器選擇到一組元素以后
-
對元素進行篩選，也可以對準確的某一個元素進行判斷和獲取
-
找到所有元素中的第一個
$('li').first() -
找到所有元素中的最后一個
$('li').last() -
找到某一個元素的下一個兄弟元素
$('li:eq(3)').next() -
找到某一個元素的上一個兄弟元素
$('li:eq(3)').prev() -
找到某一個元素的后面的所有兄弟元素
$('li:eq(3)').nextAll() -
找到某一個元素的前面的所有兄弟元素
$('li:eq(3)').prevAll() -
找到某一個元素的父元素
$('li:eq(3)').parent()同理。children找孩子
$('li:eq(3)').children()siblings是找兄弟姐妹，不分前后
-
找到某一個元素的所有結構父級，一直到 html
$('li:eq(3)').parents() -
找到一組元素中的某一個
// 在 li 的所有父級里面找到所有 body 標簽 $('li').parents().find('body')// 找到 div 標簽下所有后代元素中所有類名為 box 的元素 $('div').find('.box')
-
3、屬性操作
pro能做的attr都能做
-
給一個元素添加某個屬性
// 給 div 元素添加一個 id 屬性，值是 box $('div').prop('id', 'box') // 獲取 div 的 id 屬性 console.log($('div').prop('id'))- prop 這個方法只能添加元素自己本身就有的屬性
- 如果是添加的自定義屬性，不會顯示在標簽上，但是可以使用
-
給一個元素添加某個自定義屬性
// 給 div 添加一個 index 屬性，值是 1 $('div').attr('index', 1) // 獲取 div 的 index 屬性 console.log($('div').attr('index')) -
移除元素的某一個屬性
removeProp無法移除自帶屬性// 移除元素自己本身的屬性 $('div').removeAttr('id') // 移除元素的自定義屬性 $('div').removeAttr('index')
4.操作元素的類名
// 判斷某一個元素有沒有某一個 class
$('div').hasClass('box') // true 表示該元素有 box 類名，false 表示該元素沒有 box 類名// 給元素添加一個類名
$('div').addClass('box2') // 給 div 元素添加一個 box2 類名// 移除元素的類名
$('div').removeClass('box') // 移除 div 的 box 類名// 切換元素類名
$('div').toggleClass('box3') // 如果元素本身有這個類名就移除，本身沒有就添加
5. 操作元素的內容
給元素的 innerHTML 賦值
$('div').html('<span>hello world</span>')
// 獲取元素的 innerHTML
$('div').html()// 給元素的 innerText 賦值
$('div').text('hello world')
// 獲取元素的 innerText
$('div').text()// 給元素的 value 賦值
$('input').val('admin')
// 獲取元素的 value 值
$('input').val()
6. 操作樣式
-
jQuery 操作元素的樣式就是一個方法
css// 給元素設置一個 css 樣式 $('div').css('width', '100px')// 獲取元素的某一個樣式 $('div').css('width')// 給元素設置一組樣式 $('div').css({width: '100px',height: '200px' })
7. 元素位置
-
元素相對頁面的位置
// 獲取 div 相對頁面的位置 $('div').offset() // 得到的是以一個對象 { left: 值, top: 值 }// 給 div 設置相對頁面的位置 $('div').offset({ left: 100, top: 100 }) // 獲取定位到一個距離頁面左上角 100 100 的位置 -
元素相對于父元素的偏移量
// 獲取 div 相對于父元素的偏移量（定位的值） $('div').position() -
獲取頁面卷去的高度和寬度
window.onscroll = function () {// 獲取瀏覽器卷去的高度console.log($(window).scrollTop()) }window.onscroll = function () {// 獲取瀏覽器卷去的寬度console.log($(window).scrollLeft()) }
8. 元素尺寸
-
操作元素的寬和高
// 獲取 div 元素內容位置的高，不包含 padding 和 border $('div').height() // 設置 div 內容位置的高為 200px $('div').height(200)// 獲取 div 元素內容位置的寬，不包含 padding 和 border $('div').width() // 設置 div 內容位置的寬為 200px $('div').width(200) -
獲取元素的內置寬和高
// 獲取 div 元素內容位置的高，包含 padding 不包含 border $('div').innerHeight()// 獲取 div 元素內容位置的寬，包含 padding 不包含 border $('div').innerWidth() -
獲取元素的外置寬和高
// 獲取 div 元素內容位置的高，包含 padding 和 border $('div').outerHeight() // 獲取 div 元素內容位置的高，包含 padding 和 border 和 margin $('div').outerHeight(true)// 獲取 div 元素內容位置的寬，包含 padding 和 border $('div').outerWidth() // 獲取 div 元素內容位置的高，包含 padding 和 border 和 margin $('div').outerWidth(true)
9. 元素事件
-
綁定事件的方法
// 給 button 按鈕綁定一個點擊事件 $('button').on('click', function () {console.log('我被點擊了') })// 給 button 按鈕綁定一個點擊事件，并且攜帶參數 $('button').on('click', { name: 'Jack' }, function (e) {console.log(e) // 所有的內容都再事件對象里面console.log(e.data) // { name: 'Jack' } })// 事件委托的方式給 button 綁定點擊事件 $('div').on('click', 'button', function () {console.log(this) // button 按鈕 })// 事件委托的方式給 button 綁定點擊事件并攜帶參數 $('div').on('click', 'button', { name: 'Jack' }, function (e) {console.log(this) // button 按鈕console.log(e.data) }) -
移除事件
// 給 button 按鈕綁定一個 點擊事件，執行 handler 函數 $('button').on('click', handler)// 移除事件使用 off $('button').off('click', handler)// 移除所有事件$('button').off() -
只能執行一次的事件
// 這個事件綁定再 button 按鈕身上 // 當執行過一次以后就不會再執行了 $('button').one('click', handler) -
直接觸發事件
// 當代碼執行到這里的時候，會自動觸發一下 button 的 click 事件 $('button').trigger('click')
可以直接使用的常見事件
-
可以直接使用的事件就是可以不利用
on來綁定，直接就可以使用的事件方法 -
click// 直接給 div 綁定一個點擊事件 $('div').click(function () {console.log('我被點擊了') })// 給 div 綁定一個點擊事件并傳遞參數 $('div').click({ name: 'Jack' }, function (e) {console.log(e.data) }) -
dblclick// 直接給 div 綁定一個雙擊事件 $('div').dblclick(function () {console.log('我被點擊了') })// 給 div 綁定一個雙擊事件并傳遞參數 $('div').dblclick({ name: 'Jack' }, function (e) {console.log(e.data) }) -
scroll// 直接給 div 綁定一個滾動事件 $('div').scroll(function () {console.log('我被點擊了') })// 給 div 綁定一個滾動事件并傳遞參數 $('div').scroll({ name: 'Jack' }, function (e) {console.log(e.data) })
10.動畫
-
show// 給 div 綁定一個顯示的動畫 $('div').show() // 如果元素本身是 display none 的狀態可以顯示出來// 給 div 綁定一個顯示的動畫 // 接受三個參數 // $('div').show('毫秒', '速度', '回調函數') $('div').show(1000, 'linear', function () {console.log('我顯示完畢') }) -
hide// 給 div 綁定一個隱藏的動畫 $('div').hide() // 如果元素本身是 display block 的狀態可以隱藏起來// 給 div 綁定一個顯示的動畫 // 接受三個參數 // $('div').show('毫秒', '速度', '回調函數') $('div').hide(1000, 'linear', function () {console.log('我隱藏完畢') }) -
toggle// 給 div 綁定一個切換的動畫 $('div').hide() // 元素本身是顯示，那么就隱藏，本身是隱藏那么就顯示// 給 div 綁定一個顯示的動畫 // 接受三個參數 // $('div').show('毫秒', '速度', '回調函數') $('div').toggle(1000, 'linear', function () {console.log('動畫執行完畢') }) -
slideDown/slideUp/slideToggle（卷動）
-
fadeIn/fadeOut/fadeToggle（淡入淡出）
-
fadeTo（指定透明度）
-
animate// 定義一個自定義動畫 $('.show').click(function () {$('div').animate({width: 500,height: 300}, 1000, 'linear', function () {console.log('動畫運動完畢')}) }) -
stop// 立刻定制動畫 $('div').stop() // 就停止再當前狀態 -
finish// 立刻結束動畫 $('div').finish() // 停止在動畫結束狀態
11. 元素操作
-
創建一個元素
var div = $('<div></div>') -
內部插入元素
// 向 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')) -
外部插入元素
// 在 div 的后面插入一個元素 p $('div').after($('<p></p>'))// 在 div 的前面插入一個元素 p $('div').before($('<p></p>'))// 把 p元素插入到 div 元素的后面$('<p></p>').insertAfter($(‘div’))// 把 div 元素插入到 p 元素的前面 $('<p></p>').insertBefore($('div')) -
替換元素
// 把 div 元素替換成 p 元素 $('div').replaceWith($('<p></p>'))// 用 p 元素替換掉 div 元素 $('<p></p>').replaceAll($('div')) -
刪除元素
// 刪除元素下的所有子節點 $('div').empty()// 把自己從頁面中移除 $('div').remove() -
克隆元素
// 克隆一個 li 元素 // 接受兩個參數 // 參數1： 自己身上的事件要不要復制，默認是 false // 參數2： 所有子節點身上的事件要不要復制，默認是 true $('li').clone()
12. 發送 ajax 請求
-
發送 get 請求
// 直接使用 $.get 方法來發送一個請求 /*參數一： 請求地址參數二： 請求時攜帶的參數參數三： 請求成功的回調參數四： 返回的數據類型 */ $.get('./ajax.php', { id: 10 }, function (res) { console.log(res) }, 'json') -
發送 post 請求
// 直接使用 $.post 方法來發送一個請求 /*參數一： 請求地址參數二： 請求時攜帶的參數參數三： 請求成功的回調參數四： 返回的數據類型 */ $.post('./ajax.php', { id: 10 }, function (res) { console.log(res) }, 'json') -
綜合發送 ajax 請求
// 使用 $.ajax 方法 // 只接受一個參數，是一個對象，這個對象對當前的請求進行所有的配置 $.ajax({url: './ajax', // 必填，請求的地址type: 'GET', // 選填，請求方式，默認是 GET（忽略大小寫）data: {}, // 選填，發送請求是攜帶的參數dataType: 'json', // 選填，期望返回值的數據類型async: true, // 選填，是否異步，默認是 truesuccess () {}, // 選填，成功的回調函數error () {}, // 選填，失敗的回調函數cache: true, // 選填，是否緩存，默認是 truecontext: div, // 選填，回調函數中的 this 指向，默認是 ajax 對象status: {}, // 選填，根據對應的狀態碼進行函數執行timeout: 1000, // 選填，超時事件 }) -
發送一個 jsonp 請求
// 使用 $.ajax 方法也可以發送 jsonp 請求 // 只不過 dataType 要寫成 jsonp $.ajax({url: './jsonp.php',dataType: 'jsonp',data: { name: 'Jack', age: 18 },success (res) {console.log(res)},jsonp: 'cb', // jsonp 請求的時候回調函數的 keyjsonpCallback: 'fn' // jsonp 請求的時候回調函數的名稱 })
13. 全局 ajax 函數
- 全局的
ajax函數我們也叫做ajax的鉤子函數 - 也就是在一個
ajax的整個過程中的某一個階段執行的函數 - 而且每一個
ajax請求都會觸發
ajaxStart
-
任意一個請求在 開始 的時候就會觸發這個函數
$(window).ajaxStart(function () {console.log('有一個請求開始了') })
ajaxSend
-
任意一個請求在 準備 send 之前 會觸發這個函數
$(window).ajaxSend(function () {console.log('有一個要發送出去了') })
ajaxSuccess
-
任意一個請求在 成功 的時候就會觸發這個函數
$(window).ajaxSuccess(function () {console.log('有一個請求成功了') })
ajaxError
-
任意一個請求在 失敗 的時候就會觸發這個函數
$(window).ajaxError(function () {console.log('有一個請求失敗了') })
ajaxComplete
-
任意一個請求在 完成 的時候就會觸發這個函數
$(window).ajaxComplete(function () {console.log('有一個請求完成了') })
ajaxStop
-
任意一個請求在 結束 的時候就會觸發這個函數
$(window).ajaxStop(function () {console.log('有一個請求結束了') })
14. jQuery深淺拷貝
14.1 js實現深拷貝
function deepCopy(o2, o1) {for (var i in o1) {if (o1[i]?.toString === "[object Object]") {o2[i] = {};deepCopy(o2[i], o1[i]);} else if (Object.prototype.toString.call(o1[i]) === "[object Array]") {o2[i] = [];deepCopy(o2[i], o1[i]);} else {o2[i] = o1[i];}}
}
// 這種復制遇到undefine會出問題
var obj2 = JSON.parse(JSON.stringify(obj1));
jQuery方法
也會舍棄undefine的參數
// 深拷貝true,淺拷貝就不寫第一個參數
// targetObj在堆空間中重新開辟一個空間指向自己對象的引用
// 注：后邊可以跟一個或多個參數，都會將他們包括 obj obj1都拷貝到target里頭去
$.extend(true, targetObj, obj, obj1...);
14.jQuery 的多庫共存
-
我們一直在使用
jQuery，都沒有什么問題 -
但是如果有一天，我們需要引入一個別的插件或者庫的時候
-
人家也向外暴露的是
$獲取jQuery -
那么，我們的
jQuery就不能用了 -
那么這個時候，
jQuery為我們提供了一個多庫并存的方法// 這個方法可以交還 jQuery 命名的控制權 jQuery.noConflict()// 上面代碼執行完畢以后 $ 這個變量就不能用了 // 但是 jQuery 可以使用 console.log($) // undefined console.log(jQuery) // 可以使用 -
完全交出控制權
// 這個方法可以交并且傳遞一個 true 的時候，會完全交出控制權 jQuery.noConflict(true)// 上面代碼執行完畢以后 $ 這個變量就不能用了 // jQuery 這個變量也不能用了 console.log($) // undefined console.log(jQuery) // undefined -
更換控制權
// 可以用一個變量來接受返回值，這個變量就是新的控制權 var aa = jQuery.noConflict(true)// 接下來就可以把 aa 當作 jQuery 向外暴露的接口使用了 aa('div').click(function () { console.log('我被點擊了') })
15 . JQuery 的插件擴展
jQuery確實很好很強大- 但是也有一些方法是他沒有的，我們的業務需求中有的時候會遇到一些它里面沒有的方法
- 那么我們就可以給他擴展一些方法
擴展給他自己本身
-
擴展給自己本身使用
jQuery.extend這個方法 -
擴展完后的內容只能用
$或者jQuery來調用// jQuery.extend 接受一個參數，是一個對象，對象里面是我們擴展的方法 jQuery.extend({max: function (...n) { return Math.max.apply(null, n) },min: function (...n) { return Math.min.apply(null, n) } }) -
擴展完畢我們就可以使用了
const max = $.max(4, 5, 3, 2, 6, 1) console.log(max) // 6 const min = $.min(4, 5, 3, 2, 6, 1) console.log(min) // 1
擴展給元素集
-
擴展完畢以后給元素的集合使用
-
也就是我們用
$('li')這樣的選擇器獲取到的元素集合來使用 -
使用
jQuery.fn.extend()方法來擴展// jQuery.fn.extend() 接受一個參數，是一個對象，對象里面是我們擴展的方法 jQuery.fn.extend({checked: function () {// return 關鍵字是為了保證鏈式編程// 后面的代碼才是業務邏輯return this.each(function() { this.checked = true })} }) -
擴展完畢我們就可以使用了
// 靠元素集合來調用 $('input[type=checkbox]').checked() // 執行完畢之后，所有的 復選框 就都是選中狀態了
)
)
