jQuery是一個全球最受歡迎的JavaScript代碼框架侨赡，封裝了常用的JavaScript代碼蓖租，提供一種簡便的JavaScript設(shè)計模式，優(yōu)化HTML文檔操作辆毡、事件處理菜秦、CSS設(shè)計和AJAX交互，兼容所有主流瀏覽器
1舶掖、jQuery的優(yōu)點
- 精確選擇頁面對象
- 進行可靠的CSS樣式控制
- 使DOM操作規(guī)范化
- 標(biāo)準化事件控制
- 支持網(wǎng)頁特效
- 快速通信
- 擴展JavaScript內(nèi)核
2球昨、使用jQuery
jQuery項目主要包含jQuery Core(核心庫)、jQuery UI(界面庫)眨攘、Sizzle(CSS選擇器)主慰、jQuery Mobile(jQuery移動版)和QUnit(測試套件)5個部分。
| 類型 | 網(wǎng)址 |
|---|---|
| jQuery框架官網(wǎng) | https://jquery.com/ |
| jQuery項目組官網(wǎng) | https://js.foundation/ |
| jQuery UI 項目主頁 | https://jqueryui.com |
| jQuery Mobile 項目主頁 | 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)換的雏蛮，因為它們所操作的對象都是DOM元素，只不過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>孤帆遠影碧空盡</li>
<li>唯見長江天際流</li>
</ul>
</body>
</html>
