整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
Query 是為事件處理特別設計的。
什么是事件？
頁面對不同訪問者的響應叫做事件。
事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。
實例：
在元素上移動鼠標。
選取單選按鈕
點擊元素
在事件中經常使用術語"觸發"（或"激發"）例如： "當您按下按鍵時觸發 keypress 事件"。
常見 DOM 事件：
| 鼠標事件 | 鍵盤事件 | 表單事件 | 文檔/窗口事件 |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload |
jQuery 事件方法語法
在 jQuery 中，大多數 DOM 事件都有一個等效的 jQuery 方法。
頁面中指定一個點擊事件：
$("p").click();
下一步是定義什么時間觸發事件。您可以通過一個事件函數實現：
$("p").click(function(){// 動作觸發后執行的代碼!!});
常用的 jQuery 事件方法
$(document).ready()
$(document).ready() 方法允許我們在文檔完全加載完后執行函數。該事件方法在 jQuery 語法 章節中已經提到過。
click()
click() 方法是當按鈕點擊事件被觸發時會調用一個函數。
該函數在用戶點擊 HTML 元素時執行。
在下面的實例中，當點擊事件在某個 <p> 元素上觸發時，隱藏當前的 <p> 元素：
實例
$("p").click(function(){ $(this).hide();});
dblclick()
當雙擊元素時，會發生 dblclick 事件。
dblclick() 方法觸發 dblclick 事件，或規定當發生 dblclick 事件時運行的函數：
實例
$("p").dblclick(function(){ $(this).hide();});
嘗試一下 ?
mouseenter()
當鼠標指針穿過元素時，會發生 mouseenter 事件。
mouseenter() 方法觸發 mouseenter 事件，或規定當發生 mouseenter 事件時運行的函數：
實例
$("#p1").mouseenter(function(){alert('您的鼠標移到了 id="p1" 的元素上!');});
嘗試一下 ?
mouseleave()
當鼠標指針離開元素時，會發生 mouseleave 事件。
mouseleave() 方法觸發 mouseleave 事件，或規定當發生 mouseleave 事件時運行的函數：
實例
$("#p1").mouseleave(function(){alert("再見，您的鼠標離開了該段落。");});
嘗試一下 ?
mousedown()
當鼠標指針移動到元素上方，并按下鼠標按鍵時，會發生 mousedown 事件。
mousedown() 方法觸發 mousedown 事件，或規定當發生 mousedown 事件時運行的函數：
實例
$("#p1").mousedown(function(){alert("鼠標在該段落上按下！");});
嘗試一下 ?
mouseup()
當在元素上松開鼠標按鈕時，會發生 mouseup 事件。
mouseup() 方法觸發 mouseup 事件，或規定當發生 mouseup 事件時運行的函數：
實例
$("#p1").mouseup(function(){alert("鼠標在段落上松開。");});
嘗試一下 ?
hover()
hover()方法用于模擬光標懸停事件。
當鼠標移動到元素上時，會觸發指定的第一個函數(mouseenter);當鼠標移出這個元素時，會觸發指定的第二個函數(mouseleave)。
實例
$("#p1").hover(function(){alert("你進入了 p1!"); }, function(){alert("拜拜! 現在你離開了 p1!"); });
focus()
當元素獲得焦點時，發生 focus 事件。
當通過鼠標點擊選中元素或通過 tab 鍵定位到元素時，該元素就會獲得焦點。
focus() 方法觸發 focus 事件，或規定當發生 focus 事件時運行的函數：
實例
$("input").focus(function(){ $(this).css("background-color","#cccccc");});
嘗試一下 ?
blur()
當元素失去焦點時，發生 blur 事件。
blur() 方法觸發 blur 事件，或規定當發生 blur 事件時運行的函數：
實例
$("input").blur(function(){ $(this).css("background-color","#ffffff");});
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
節我們學習 jQuery 中的事件的使用，jQuery 是專門為響應 HTML 頁面中的事件而設計的。我們在使用時，需要遵循以下原則：
首先我們要知道什么是事件，頁面對不同訪問者的響應叫做事件，例如點擊某個按鈕，選擇單選框或復選框，滑動鼠標等，這些都可以稱為事件。
在 jQuery 中，大多數 DOM 事件都有一個相應的 jQuery 方法。例如我們前面提到過的點擊事件的對應的方法為 click() 方法。
當我們點擊元素時，會發生 click 點擊事件，這需要用到 click() 方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
alert("hello, xkd!");
});
});
</script>
</head>
<body>
<div>
<button>點擊按鈕</button>
</div>
</body>
</html>
在瀏覽器中的演示效果：
期，英國公共部門信息網站 GOV.UK 前端開發主管 Matt Hobbs 宣布該公司刪除了 jQuery 作為所有前端應用程序的依賴項，這意味著“在所有 13 個 FE 應用程序中，JS 大小減少了 32 KB（31% ～49% 之間）”。
Matt 也在推特上分享了幾組數據，說明了在刪除 jQuery 后一些關鍵指標得到了優化。
“這些用戶會遇到嚴重不利的網絡和設備條件，每一次性能提升對他們來說尤其重要。”Matt 說道。
根據 Matt 說法，刪除 jQuery 的本意是清理技術債?！八畛跏菫榱酥С譃g覽器而存在的，但隨著時間的推移，情況發生了變化，所以 bits 可以被刪除。我想在這之后會重新評估，看看還有什么是不再需要的?！?Matt 表示。
jQuery 是一套跨瀏覽器的 JavaScript 庫，可以簡化 HTML 與 JavaScript 之間的操作。截至 2021 年，有將近 84% 的移動頁面使用 jQuery。jQuery 是最受歡迎的 JavaScript 庫之一，它的一些操作已經反映在標準 Web API 中。
JQuery 創建于 2006 年，主要是為了幫助開發者處理當時瀏覽器的不足。當時谷歌瀏覽器還未流行，人們飽受 Internet Explorer 之苦。而 JQuery 開發者可以使用 CSS 選擇器和函數可以輕松地遍歷和操作 DOM，
此外，JQuery 還提供了一些開箱即用的函數來做動畫 DOM 元素，而無需弄亂 CSS。在沒有 jQuery 之前發出 AJAX 請求很麻煩，但使用 JQuery 只需幾行代碼即可完成。JQuery 提供了一個可以在大多數瀏覽器上工作的 API，這在當時使用 JavaScript 是很難實現的。
但在過去的幾年里，JavaScript 已經成熟了很多，它支持很多新的 API，其社區也構建了很多庫來填補 jQuery 可能留下的任何空白。
現在，開發者幾乎可以在原生 JavaScript 中做任何 jQuery 可以做的事情。例如，可以使用帶有 querySelector 和 querySelectorAll 的 CSS 選擇器語法來選擇元素，使用 classList API 在元素上添加、刪除和切換類，使用 addEventListener 將事件處理程序附加到 DOM 元素和窗口等等。
同時隨著 Angular、Vue 和 React 等框架的出現和流行，一直未有特別創新的 jQuery 更顯“老態”。“對我來說，他們 (jQuery ) 就像是那個隨著時代變遷沒有更新知識的老灰胡子?！庇芯W友直言。
“現在，大多數事情都不再需要 jQuery 了?！庇芯W友評論道，“我個人發現普通的 JS API 和 fetch 甚至比 jQuery 的東西更干凈。人們仍然出于習慣使用 jQuery，是因為擺脫它需要做很多工作。”
近幾年，業內對于“jQuery 是否已死”的討論一直沒停過。實際上，一些大型、資金充足的網站已經“用腳投票”，正在逐漸擺脫對 jQuery 的依賴。
2018 年，GitHub 宣布從 GitHub.com 的前端代碼中完全移除了 jQuery?！霸缙?，jQuery 對我們意義重大?！盙itHub 前端工程團隊在方式發布的文章里表示?！霸?GitHub 的早期階段，jQuery 讓小型的開發團隊能夠快速進行原型設計并開發出新功能，而無需專門針對每個 Web 瀏覽器調整代碼?！?/p>
但隨著 GitHub 成長為一家擁有數百名工程師的公司，jQuery 帶來的價值已經隨著時間的推移而下降。比如技術債會隨著依賴項的增多而增長，給企業帶來很大的維護成本。因此，GitHub 最終決定刪除 jQuery。不過，GitHub 沒有選擇另外的庫或框架，而是使用標準的瀏覽器 API 來實現。
不只 GitHub，Bootstrap 最新版本也將刪除 jQuery。
盡管被認為已經過時，但 jQuery 仍然是占主導地位的 JavaScript 庫。今天的開發人員可能沒有意識到在使用 jQuery，因為它被嵌入在了許多大型開源項目里面，其中最著名的就是 WordPress。
“大多數網站都不需要復雜的開發框架，它們大多是具有一些動態行為的靜態網站，這種網站通常用 WordPress 編寫。jQuery 在這個場景下仍然很流行，因為它既簡單又有效，人們覺得沒必要停止使用它?！眏Query 開發者 Micha Gobiowski-Owczarek 在接受外媒采訪時說道。
Micha Gobiowski-Owczarek 也明確表示，為了不與瀏覽器沖突，jQuery 不會修改原生原型，而是用 jQuery 包裝器對象包裝 DOM 節點，每個操作都會創建一個新的包裝器對象。大多數情況下，這并不重要，但對于具有大量 DOM 操作的、非常復雜的應用程序來說，可能會成為一個問題。
未來的很長一段時間里，jQuery 還繼續會是 WordPress 的一部分，因為它很難在不破壞向后兼容性的情況下將它刪除。但一些改變已經發生，如 WordPress 創建的 Gutenberg 編輯器不依賴于 jQuery。
隨著時間的推移， WordPress 肯定會逐步更新技術，這是一個漸進的過程，jQuery 的最終去留也很難說。但不可否認的是，jQuery 為前端帶來了重大的影響。
參考鏈接：
https://thenewstack.io/why-outdated-jquery-is-still-the-dominant-javascript-library/
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
