19、Query九類選擇器
要求
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 )查詢所有樣式是"myClass"的元素的個數
//alert( $(".myClass").size() );
//4)查詢所有DIV,SPAN,P元素的個數
//alert( $("DIV,span,p").size() );
//5)查詢所有ID為div1ID,CLASS為myClass,P元素的個數
alert( $("#div1ID,.myClass,p").size() );
(2)層次選擇器【參見02_selector.html】
<!--
<input type="radio" value="z"/>
<input type="radio" value="e"/>
<input type="radio" value="y"/>
-->
<form>
<input type="text" value="a"/>
<table>
<tr>
<td>
<input type="checkbox" value="b"/>
</td>
</tr>
</table>
</form>
<input type="radio" value="ccccccccc"/>
<input type="radio" value="d"/>
<input type="radio" value="e"/>
<script type="text/javascript">
//1)找到表單form裡所有的input元素的個數
//alert( $("form input").size() );
//2)找到表單form裡所有的子級input元素個數
//alert( $("form>input").size() );
//3)找到表單form同級第一個input元素的value屬性值
//alert( $("form+input").val() );
//4)找到所有與表單form同級的input元素個數
alert( $("form~input").size() );
(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目錄下的所有練習題做一遍