JQuery是一套JAVAscript腳本庫.使用JQuery將極大的提高編寫JavaScript代碼的效率,讓寫出來的代碼更加優(yōu)雅,更加健壯.
JQuery第一個(gè)版本JQuery1.0發(fā)布時(shí)間是2006年1月，目前最新版本是JQuery3.1.0，JQuery2.0及后續(xù)版本已不再支持IE6/7/8瀏覽器。
同類JS庫：DojoExtjs
選擇器
帶有特定語法格式的字符串，用于對頁面元素進(jìn)行篩選
包裝集
將選擇器所選擇的元素封裝在一個(gè)類似于數(shù)組的JQuery對象中，該對象封裝了所選擇的元素
JQuery中的基本選擇器
|
選擇器 |
描述 |
示例 |
|
#id |
根據(jù)給定的id匹配一個(gè)元素 |
$(“#test”) 選取id為test 的元素 |
|
.class |
根據(jù)給定的類名匹配元素 |
$(“.test”) 選取所有class 為test的元素 |
|
element |
根據(jù)給定的元素名稱匹配元素 |
$(“p”) 選取所有的 <p>元素 |
|
Selector1, Selector2, Selector3 ... |
將每一個(gè)選擇器匹配到的元素合并后一起返回 |
$(“div,span,p.cls”) 選取所有<div>，<span> 和擁有class為cls的 <p>標(biāo)簽的一組元素 |
|
* |
匹配所有元素 |
$(“*”) 選取所有的元素 |
選擇器語法：
1、通過ID選取元素
語法：$("#id")
2、通過類名獲取元素
語法：$(".className")
3、通過標(biāo)簽名獲取元素
語法：$("tagName")
4、一次性獲取多個(gè)元素
語法：$("selector1,selector2,select3...")
確定包裝集的大小
1、使用size()方法(JQuery1.8中被廢棄，使用length代替)
代碼如圖：
獲得元素在包裝集中的位置
index(element)
代碼如圖：
對包裝集進(jìn)行篩選
添加元素到包裝集：add(expression)
代碼如圖：
刪除包裝集中的元素：not(expression)
代碼如圖：
對包裝集中的元素進(jìn)行過濾：filter(expression)
代碼如圖：
獲取包裝集的子集：slice(begin,end)
代碼如圖：
選擇器綜合示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../assets/js/jquery-3.1.1.min.js"></script>
<title>選擇器</title>
</head>
<body>
<script>
$(function () {
alert("包裝集的大小"+$("div").length);
alert("元素在包裝類中的位置"+$("div").index($("#id_div")));
//div和p元素都加上css樣式
$("div").add("p").css("background-color","yellow");
//div和p元素不添加樣式
$("div").not($("#id_div")).css("background-color","orange");
//對包裝集中的元素進(jìn)行過濾
$("div").filter($("#id_div")).css
("background-color","beige");
//獲取包裝集的子集：slice（begin,end）
$("div").slice(1,3).css("background-color","cyan");
})
</script>
<!--size()方法jQuery1.8中被廢棄，使用length代替-->
<div>這個(gè)是div1</div>
<div id="id_div">這個(gè)是div2</div>
<div>這個(gè)是div3</div>
</body>
</html>
