然冬 ·jQuery
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.(jQuery 官方介紹)
1. 什么是 jQuery
jQuery 是一個(gè)使用 JavaScript 編寫(xiě)的庫(kù)，可以讓開(kāi)發(fā)者用更少的代碼來(lái)完成業(yè)務(wù)邏輯。
許多年前前端的技術(shù)沒(méi)有現(xiàn)在這么豐富，jQuery 和 JavaScript 也會(huì)被經(jīng)常稱(chēng)為兩個(gè)技術(shù)，因?yàn)槭褂?jQuery 完全可以替代掉使用原生的 JavaScript 操作 DOM、處理動(dòng)畫(huà)、處理 AJAX 等，這讓兩者之間的概念變得模糊。
可以對(duì)比一下刪除一個(gè)節(jié)點(diǎn)的操作：
// 使用JavaScript
var el = document.getElementById('element');
el.parentNode.removeChild(el);
// 使用 jQuery
$('#element').remove();
兩者的區(qū)別一比較就出來(lái)了，jQuery 封裝一層 DOM 操作，將原生的 DOM 方法向上層抽象，提供了一套更簡(jiǎn)潔的 API 來(lái)操作 DOM，同時(shí)也針對(duì)各個(gè)瀏覽器做了兼容性處理，如事件對(duì)象、事件的綁定方式等。
2. 引入 jQuery
jQuery 可以直接從官網(wǎng)下載，也可以用 npm 安裝，也可以使用 bower 等這些包管理工具，本篇幅采用 CDN 的形式引入，本身 jQuery 就是一個(gè) .js 文件，只需引入就能使用。
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
引入之后就可以在全局下通過(guò) jQuery 或者 $ 調(diào)用 jQuery 了。
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
console.log($);
console.log(jQuery);
console.log($ === jQuery); // 輸出：true
</script>
3. 使用 jQuery
jQuery 使用 $ 或者 jQuery 來(lái)生成一個(gè) jQuery 對(duì)象，這里統(tǒng)一使用 $。
<div class="element">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('.element').html('<p>這里是用 jQuery 插入的 HTML</p>');
</script>
$ 可以接受一個(gè) CSS 規(guī)范的選擇器，用來(lái)選擇元素，html 方法相當(dāng)于設(shè)置 DOM 節(jié)點(diǎn)的 innerHTML 屬性。
在 DOM 相關(guān)章節(jié)有提到，如果使用 querySelector 來(lái)選擇節(jié)點(diǎn)，碰到節(jié)點(diǎn)不存在的情況下，會(huì)返回 null，這樣就需要一層判斷， jQuery 已經(jīng)處理好了這些情況。
<div>DOM節(jié)點(diǎn)</div>
<div class="element">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('.ele').html('<p>這里是用 jQuery 插入的 HTML</p>');
console.log('不會(huì)影響正常程序執(zhí)行');
</script>
其可以接受的參數(shù)不僅僅是 CSS 選擇器，也可以是一個(gè)原生 DOM 節(jié)點(diǎn)，一段 HTML 字符串等。
jQuery 選擇 $ 作為作為入口名稱(chēng)，一部分是因?yàn)楹?jiǎn)單，原生 DOM 提供的選擇 DOM 節(jié)點(diǎn)的方法都是一長(zhǎng)串，另一個(gè)原因是 $ 本身的發(fā)音
dollar和DOM的發(fā)音接近。
4. 小結(jié)
jQuery 提供了一系列的方法使得操作 DOM 變得更簡(jiǎn)單，更具體的內(nèi)容可以參考官方官方文檔。
現(xiàn)代框架的涌現(xiàn)，使得 jQuery 被使用到的場(chǎng)景也在變少，也有許多文獻(xiàn)有 不應(yīng)將 jQuery 與現(xiàn)代框架一起使用 的說(shuō)法。其實(shí) jQuery 在壓縮后非常小，如果有需要完全可以考慮引入。
2025 imooc.com All Rights Reserved |