jQuery是一個全球最受歡迎的JavaScript代碼框架，封裝了常用的JavaScript代碼，提供一種簡便的JavaScript設(shè)計模式，優(yōu)化HTML文檔操作、事件處理、CSS設(shè)計和AJAX交互，兼容所有主流瀏覽器
1、jQuery的優(yōu)點(diǎn)
- 精確選擇頁面對象
- 進(jìn)行可靠的CSS樣式控制
- 使DOM操作規(guī)范化
- 標(biāo)準(zhǔn)化事件控制
- 支持網(wǎng)頁特效
- 快速通信
- 擴(kuò)展JavaScript內(nèi)核
2、使用jQuery
jQuery項(xiàng)目主要包含jQuery Core(核心庫)、jQuery UI(界面庫)、Sizzle(CSS選擇器)、jQuery Mobile(jQuery移動版)和QUnit(測試套件)5個部分。
| 類型 | 網(wǎng)址 |
|---|---|
| jQuery框架官網(wǎng) | https://jquery.com/ |
| jQuery項(xiàng)目組官網(wǎng) | https://js.foundation/ |
| jQuery UI 項(xiàng)目主頁 | https://jqueryui.com |
| jQuery Mobile 項(xiàng)目主頁 | https://jquerymobile.com |
| Sizzle選擇器引擎官網(wǎng) | https://sizzlejs.com/ |
| QUnit官網(wǎng) | https://qunitjs.com |
| jQuery作者個人網(wǎng)站 | https://johnresig.com/ |
- 在jQuery代碼中，
$是jQuery的別名，如$()等效于jQuery()，也等效于$(document).ready()。jQuery()函數(shù)是jQuery庫文件的接口函數(shù)，所有jQuery操作都必須從該接口函數(shù)切入。
3、jQuery對象和DOM對象的相互轉(zhuǎn)換
jQuery對象和DOM對象時可以相互轉(zhuǎn)換的，因?yàn)樗鼈兯僮鞯膶ο蠖际荄OM元素，只不過jQuery對象包含了多個DOM元素，而DOM對象本身就是一個DOM元素。簡單的說，jQuery對象時DOM元素的集合，也稱為偽類數(shù)組，而DOM對象就是一個DOM元素
- 把jQuery對象轉(zhuǎn)換成DOM對象（兩種方法）
- 借助數(shù)組下標(biāo)來讀取jQuery對象集合中的某個DOM元素對象
- 借助jQuery對象方法，如get()方法，為get()方法傳遞一個下標(biāo)值，即可從jQuery對象中取出一個DOM元素
- 把DOM對象轉(zhuǎn)換成jQuery對象
- 對于DOM元素來說，直接把它傳遞給$()函數(shù)即可，jQuery會自動把它包裝成jQuery對象，然后就可以自由的調(diào)用jQuery定義的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../lib/jQuery/jQuery-3.2.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// jQuery對象轉(zhuǎn)DOM對象
/*
var $li = $('li'); // 返回jQuery對象
// var li = $li[0]; // 返回DOM對象
var li = $li.get(0);
alert(li.innerHTML);
*/
// DOM對象轉(zhuǎn)換成jQuery對象
var li = document.getElementsByTagName('li'); // 獲取所有l(wèi)i元素
var $li = $(li[0]); // 把第一個li元素封裝成為jQuery對象
alert($li.html());
})
</script>
<title>jQuery與DOM轉(zhuǎn)換</title>
</head>
<body>
<ul>
<li>故人西辭黃鶴樓</li>
<li>煙波三月下?lián)P州</li>
<li>孤帆遠(yuǎn)影碧空盡</li>
<li>唯見長江天際流</li>
</ul>
</body>
</html>
