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