jQuery簡介
- 對選擇元素的方法進(jìn)行了優(yōu)化
- 是一個(gè)高效的，精簡并且功能豐富的JavaScript工具庫
版本發(fā)展
- 1.x 兼容 IE6/7/8，是工作中最常用的，學(xué)習(xí)1.12版本
- 2.X：不兼容 IE6/7/8，多用于 jQuery 官方調(diào)整 bug 使用。工作中不使用。
- 3.X：不兼容 IE6/7/8，只能在高版本瀏覽器中使用，是現(xiàn)在 jQuery 官方主要的維護(hù)升級的版本
下載網(wǎng)址
使用過程中建議參考API文檔
jQuery使用
- 極大的簡化了DOM操作，讓編程變得簡單了起來
$()使用
- 在DOM操作中，基本都是從獲取元素開始的
- 在 jQuery 中，只有一個(gè)全局變量 $,這是 jQuery 的一大特點(diǎn)，避免了全局變量的污染。
- 最開始變量不叫做 $，叫做 jQuery() 方法，在庫中兩個(gè)名字是并存的，都可以使用。
- 經(jīng)典錯(cuò)誤：$未定義（經(jīng)典沒引入jQuery文件）
jQuery對象
- $() 方法獲取到的內(nèi)容叫做 jQuery 對象
- 內(nèi)部封裝了大量的屬性和方法,比如 .css() 和 .html() 和 .animate() 等方法都是jQuery 對象的方法。
- 通過 $() 獲取的元素是一組元素，進(jìn)行操作時(shí)是批量操作。
jQuery對象和原生js對象
- jQuery 對象得到后，只能使用 jQuery 對象的方法，不能使用原生 js 元素對象的方法。
- 原生 JS 對象也不能使用 jQuery 的方法。
- jQuery 對象實(shí)際是一個(gè)類數(shù)組對象，內(nèi)部包含所有的獲取的原生 js 對象，以及大量的jQuery 的方法和屬性
JQ對象和原生對象的轉(zhuǎn)換
JQ對象內(nèi)部原生js對象的個(gè)數(shù)
- $().length
- $().size()
將JQ對象轉(zhuǎn)換為原生JS對象
- jQuery 轉(zhuǎn)原生：直接利用數(shù)組下標(biāo)方式，得到 jQuery 封裝的原生對象。
var $ps = $("p")
$ps[0].innerHTML = "你好"
將JS對象轉(zhuǎn)換為JQ對象
- 原生轉(zhuǎn) jQuery：將原生對象用 $() 方法包裹即可。
var op = document.getElementsByTagName("p")[0]
$(op).css("background-color","skyblue"
jQuery選擇器
CSS2.1和CSS3選擇器
- 參數(shù)：字符串類型的選擇器
在JQ文檔手冊里，都有說明，可以自行查閱
除開默認(rèn)已知的選擇器，JQ新添加了自己的選擇器，過濾選擇器
篩選選擇器（過濾選擇器）
-
用法：在基礎(chǔ)選擇器后面增加一些篩選的單詞，篩選出前面選擇器的選中內(nèi)容中一部分?；蛘呖梢宰鳛楦呒夁x擇器的一部分
篩選方法
- 也叫做過濾方法，jQuery中除了用選擇器選擇元素，jQuery對象內(nèi)還封裝了一些對應(yīng)的篩選方法
- 常用：
- $("p").first()
- $("p").last()
- $("p").eq(n)
案例：隔行變色
- 使用JQ的新增篩選選擇器直接:even選擇到奇數(shù)行數(shù)變色，方便快捷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
p {
width: 50px;
height: 50px;
margin-bottom: 10px;
}
table {
border-collapse: collapse;
}
td {
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
// 原生方法
// var trs = document.getElementsByTagName("tr");
// // 遍歷
// for (var i = 0 ; i < trs.length ; i+=2) {
// trs[i].style.backgroundColor = "skyblue"
// }
// jQuery的方法
$("tr:even").css("background-color","yellowgreen")
</script>
</body>
</html>
效果
