19、Query九類選擇器
阿新 • • 發佈：2018-12-26
要求
1）掌握jQuery九類選擇器及應用
2）掌握jQuery常用Method-API
3）掌握jQuery常用Event-API
一）jQuery九類選擇器【參見jQueryAPI.chm手冊】
目的：通過九類選擇器，能定位web頁面（HTML/JSP/XML）中的任何標籤
（1）基本選擇器【參見01_selector.html】
/1)查詢ID為"div1ID"的元素個數
//alert( $("#div1ID").size() );
//2)查詢DIV元素的個數
//alert( $("div").length );
//3 （2）層次選擇器【參見02_selector.html】
<!--
<input type="radio" value="z"/>
<input type="radio" value="e"/>
<input type="radio" value="y"/>
--> （3）增強基本選擇器【參見03_selector.html】
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<input type="checkbox" checked/>
<input type="checkbox" checked/>
<input type="checkbox"/>
<table border="1">
<tr><td>line1[0]</td></tr>
<tr><td>line2[1]</td></tr>
<tr><td>line3[2]</td></tr>
<tr><td>line4[3]</td></tr>
<tr><td>line5[4]</td></tr>
<tr><td>line6[5]</td></tr>
</table>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
<script type="text/javascript">
//1)查詢UL中第一個LI元素的內容
//html()要用於html/jsp，不能用在xml
//text()既能用於html/jsp，且能用於xml
//alert( $("ul li:first").text() );
//2)查詢UL中最後個元素的內容
//alert( $("ul li:last").text() );
//4)查詢表格的索引號為1、3、5...奇數行個數，索引號從0開始
//alert( $("table tr:odd").size() );
//5)查詢表格的索引號為2、4、6...偶數行個數，索引號從0開始
//alert( $("table tr:even").size() );
//6)查詢表格中第二行的內容，從索引號0開始，這是一種祖先 後代 的變化形式
//html()：強調的是標籤中的內容，即便標籤中的子標籤，也會顯示出來
//text()：強調的是標籤中的文字內容，即便標籤中的子標籤，也只會顯示出文字內容，不會顯示子標籤
//alert( $("table tr:eq(1)").text() );
//7)查詢表格中第二第三行的個數，即索引值是1和2，也就是比0大
//alert( $("table tr:gt(0)").size() );
//8)查詢表格中第一第二行的個數，即索引值是0和1，也就是比2小
//alert( $("table tr:lt(3)").size() );
//9)給頁面內所有標題<h1><h2><h3>加上紅色背景色，且文字加藍色
//$(":header").css("background-color","red").css("color","#ffff33");
//3)查詢所有[未]選中的input為checkbox的元素個數
alert( $(":checkbox:not(:checked)").size() );
</script>（4）內容選擇器【參見04_selector.html】
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
<style type="text/css">
.myClass{
font-size:44px;
color:blue
}
</style>
</head>
<body>
<div><p>John Resig</p></div>
<div><p>George Martin</p></div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
<div></div>
<p></p>
<p></p>
<script type="text/javascript">
//1)查詢所有包含文字"John"的div元素的個數
//alert( $("div:contains('John')").size() );
//2)查詢所有p元素為空的元素個數
//alert( $("p:empty").size() );
//3)給所有包含p元素的div元素新增一個myClass樣式
//$("div:has(p)").addClass("myClass");
//4)查詢所有含有子元素或者文字的p元素個數,即p為父元素
alert( $("p:parent").size() );
</script>
</body>
</html>
（5）可見性選擇器【參見05_selector.html】
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<table border="1" align="center">
<tr style="display:none">
<td>Value 1</td>
</tr>
<tr>
<td>Value 2</td>
</tr>
<tr>
<td>Value 3</td>
</tr>
</table>
<script type="text/javascript">
//1)查詢隱藏的tr元素的個數
//alert( $("table tr:hidden").size() );
//2)查詢所有可見的tr元素的個數
//alert( $("table tr:NOT(:hidden)").size() );
alert( $("table tr:visible").size() );//提倡
</script>
</body>
</html> （6）屬性選擇器【參見06_selector.html】
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<div>
<p>Hello!</p>
</div>
<div id="test2"></div>
<input type="checkbox" name="newsletter" value="Hot Fuzz"/>
<input id="myID" type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="newsaccept" value="Evil Plans" />
<!--
<input type="checkbox" name="letternews" value="Hot Fuzz"/>
<input id="myID" type="checkbox" name="letnewster" value="Cold Fusion" />
<input type="checkbox" name="accNEWSept" value="Evil Plans" />
-->
<script type="text/javascript">
//1)查詢所有含有id屬性的div元素個數
//alert( $('div[id]').size() );
//2)查詢所有name屬性是newsletter的input元素，並將其選中
//$("input[name='newsletter']").attr("checked","checked");
//3)查詢所有name屬性不是newsletter的input元素，並將其選中
//$("input[name!='newsletter']").attr("checked","true");
/*
請問：在JS中如下符號表示什麼意思
1)=/==/===
2)!=/!==
明天講解
*/
//4)查詢所有name屬性以'news'開頭的input元素，並將其選中
//$("input[name^='news']").attr("checked","checked");
//5)查詢所有name屬性以'letter'結尾的input元素，並將其選中
//$("input[name$='letter']").attr("checked","checked");
//6)查詢所有name屬性包含'news'的input元素，並將其選中
//$("input[name*='news']").attr("checked","checked");
//7)找到所有含有id屬性，並且它的name屬性是以"letter"結尾的input元素，並將其選中
$("input[id][name$='letter']").attr("checked","true");
</script>
</body>
</html>（7）子元素選擇器【參見07_selector.html】
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
<ul>
<li>Marry</li>
</ul>
<ul>
<li>Jack</li>
</ul>
<script type="text/javascript">
/*1)迭代[each]每個ul中第1個li元素中的內容,索引從1開始
$("ul li:first-child").each(function(){
alert( $(this).text() );
});
*/
/*2)迭代每個ul中最後1個li元素中的內容,索引從1開始
$("ul li:last-child").each(function(){
alert( $(this).text() );
});
*/
/*4)迭代每個ul中第2個li元素中的內容,索引從1開始
$("ul li:nth-child(2)").each(function(){
alert( $(this).text() );
});*/
//3)在ul中查詢是唯一子元素的li元素的內容
$("ul li:only-child").each(function(){
alert( $(this).text() );
});
</script>
</body>
</html>
（8）表單選擇器【參見08_selector.html】
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<form>
<input type="button" value="Input Button"/><br/>
<input type="checkbox" /><br/>
<input type="file" /><br/>
<input type="hidden" name="id" value="123"/><br/>
<input type="image" src="../images/lb.jpg" width="25px" height="25px"/><br/>
<input type="password" /><br/>
<input type="radio" /><br/>
<input type="reset" /><br/>
<input type="submit" /><br/>
<input type="text" /><br/>
<select><option>Option</option></select><br/>
<textarea></textarea><br/>
<button>Button</button><br/>
</form>
<script type="text/javascript">
//1)查詢所有input元素的個數
//alert( $("input").size() );//10，找input標籤
//alert( $(":input").size() );//13，找input標籤和select/textarea/button
//2)查詢所有文字框的個數
//alert( $(":text").size() );
//3)查詢所有密碼框的個數
//alert( $(":password").size() );
//4)查詢所有單選按鈕的個數
//alert( $(":radio").size() );
//5)查詢所有複選框的個數
//alert( $(":checkbox").size() );
//6)查詢所有提交按鈕的個數
//alert( $(":submit").size() );
//7)匹配所有影象域的個數
//alert( $(":images").size() );
//8)查詢所有重置按鈕的個數
//alert( $(":reset").size() );
//9)查詢所有普通按鈕的個數
//alert( $(":button").size() );
//10)查詢所有檔案域的個數
//alert( $(":file").size() );
//11)查詢所有input元素為隱藏域的個數
//alert( $(":input:hidden").size() );
</script>
</body>
</html>
（9）表單物件屬性選擇器【參見09_selector.html】
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<form>
<input type="text" name="email" disabled="disabled" />
<input type="text" name="password" disabled="disabled" />
<input type="text" name="id" />
<input type="checkbox" name="newsletter" checked="checked" value="Daily" />
<input type="checkbox" name="newsletter" value="Weekly" />
<input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
<select id="provinceID">
<option value="1">廣東</option>
<option value="2" selected="selected">湖南</option>
<option value="3">湖北</option>
</select>
</form>
<script type="text/javascript">
//1)查詢所有可用的input元素的個數
//alert( $("input:enabled").size() );
//2)查詢所有不可用的input元素的個數
//alert( $("input:disabled").size() );
//3)查詢所有選中的複選框元素的個數
//alert( $(":checkbox:checked").size() );
//4)查詢所有未選中的複選框元素的個數
//alert( $(":checkbox:NOT(:checked)").size() );
//5)查詢所有選中的選項元素的個數
//alert( $("select option:selected").size() );
alert( $("#provinceID option:NOT(:selected)").size() );
</script>
</body>
</html>
注意：專案中，通常是多種選擇器一起使用
二）jQuery常用Method-API
目的：對web頁面（HTML/JSP/XML）中的任何標籤，屬性，內容進行增刪改查
（1）DOM簡述與分類
（A）DOM是一種W3C官方標準規則，可訪問任何標籤語言的頁面(HTML/JSP/XML)
（B）DOM是跨平臺(window/linux/unix)，跨語言(javascript/java)，
跨瀏覽器(ie/firefox/Chrome)的標準規則
（C）我們只需要按照DOM標準規則，針對主流瀏覽器(ie/firefox/Chrome)程式設計
（D）JS/jQuery按照DOM的標準規則，既可以操作HTML/JSP，也能操作CSS
（E）DOM標準規則不是JS的專屬，其它語言，也能適用，例如:VBScript，Java語言等
（2）DOM標準規則下的jQuery常用API，注意：以下方法均由jQuery物件呼叫
each()：是jQuery中專用於迭代陣列的方法，引數為一個處理函式，this表示當前需要迭代的js物件
append()：追加到父元素之後
prepend()：追加到父元素之前
after()：追加到兄弟元素之後
before()：追加到兄弟元素之前
attr(name)：獲取屬性值
attr(name,value)：給符合條件的標籤新增key-value屬性對
$(“
remove()：刪除自已及其後代節點
val()：獲取value屬性的值
val(“”)：設定value屬性值為”“空串，相當於清空
text()：獲取HTML或XML標籤之間的值
text(“”)：設定HTML或XML標籤之間的值為”“空串
clone()：只複製樣式，不復制行為
clone(true)：既複製樣式，又複製行為
replaceWith()：替代原來的節點
removeAttr()：刪除已存在的屬性
addClass()：增加已存在的樣式
removeClass()：刪除已存在的樣式
hasClass()：判斷標籤是否有指定的樣式，true表示有樣式，false表示無樣式
toggleClass()：如果標籤有樣式就刪除，否則增加樣式
offset()：獲取物件的left和top座標
offset({top:100,left:200})：將物件直接定位到指定的left和top座標
width()：獲取物件的寬
width(300)：設定物件的寬
height()：獲取物件的高
height(500)：設定物件的高
children()：只查詢子節點，不含後代節點
next()：下一下兄弟節點
prev()：上一下兄弟節點
siblings()：上下兄弟節點
show()：顯示物件
hide()：隱藏物件
fadeIn()：淡入顯示物件
fadeOut()：淡出隱藏物件
slideUp()：向上滑動
slideDown()：向下滑動
slideToggle()：上下切換滑動，速度快點
面試題–find(“9類選擇器”)：查詢指定的節點和多重each()迭代
//使用jquery彈出奇數的tr標籤下的td裡的值
var $tr = $("table tr:lt(4):even");
$tr.each(function(){
//tr中查詢td標籤,$(this)表示tr
var $td = $(this).find("td");
$td.each(function(){
//$(this)表示td
var txt = $(this).text();
alert(txt);
});
});三）jQuery常用Event-API
目的：對web頁面（HTML/JSP）進行事件觸發，完成特殊效果的處理
window.onload：在瀏覽器載入web頁面時觸發，可以寫多次onload事件，但後者覆蓋前者
ready：在瀏覽器載入web頁面時觸發，可以寫多次ready事件，不會後者覆蓋前者，依次從上向下執行，我們常用$(函式)簡化
ready和onload同時存在時，二者都會觸發執行，ready快於onload
change：當內容改變時觸發
focus：焦點獲取
select：選中所有的文字值
keyup/keydown/keypress：演示在IE和Firefox中獲取event物件的不同
mousemove：在指定區域中不斷移動觸發
mouseover：滑鼠移入時觸發
mouseout：滑鼠移出時觸發
submit：在提交表單時觸發，true表示提交到後臺，false表示不提交到後臺
click：單擊觸發
dblclick：雙擊觸發
blur：焦點失去
作業：
1）將selector目錄下的所有練習題做一遍
2）將method目錄下的所有練習題做一遍
3）將event目錄下的所有練習題做一遍[暫不做]
4）將exe目錄下的所有練習題做一遍