快捷導(dǎo)航

JQuery 學(xué)習(xí)筆記選擇器之三

更新時(shí)間：2009年07月23日 22:26:47 作者：

JQuery選擇器之三首先老規(guī)矩提供我學(xué)習(xí)用的例子

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>無標(biāo)題文檔</title> 
<script src="js/jquery-1.3.2.js"></script> 
<script type="text/javascript"><!-- 
$(function(){ 
$("#aFirst").click(function(){ 
$("#Result").html(""); 
$("#Result").html($("ul:first").html()); 
}) 
$("#aLast").click(function(){ 
$("#Result").html(""); 
$("#Result").html($("ul:last").html()); 
}) 
$("#aNot").click(function(){ 
$("#Result").html(""); 
$("#Result").html($("input:not(:checked)").attr("id")); 
}) 
$("#aEven").click(function(){ 
$("#Result").html(""); 
$("ul:even").each(function(){ 
$("#Result").html($("#Result").html() + $(this).html()); 
}) 
}) 
$("#aOdd").click(function(){ 
$("#Result").html(""); 
$("ul:odd").each(function(){ 
$("#Result").html($("#Result").html() + $(this).html()); 
}) 
}) 
$("#aEq").click(function(){ 
$("#Result").html(""); 
$("ul:eq(3)").each(function(){ 
$("#Result").html($("#Result").html() + $(this).html()); 
}) 
}) 
$("#aGt").click(function(){ 
$("#Result").html(""); 
$("ul:gt(3)").each(function(){ 
$("#Result").html($("#Result").html() + $(this).html()); 
}) 
}) 
$("#aLt").click(function(){ 
$("#Result").html(""); 
$("ul:lt(3)").each(function(){ 
$("#Result").html($("#Result").html() + $(this).html()); 
}) 
}) 
$("#aHeader").click(function(){ 
$("#Result").html(""); 
$(":header").each(function(){ 
$("#Result").html($("#Result").html() + $(this).html()); 
}) 
}) 
}) 
// --></script> 
</head> 

<body> 
<div> 
<h1>h1</h1> 
<h2>h2</h2> 
<li>li1 
<ul>1</ul> 
<ul>2</ul> 
<ul>3</ul> 
<ul>4</ul> 
</li> 
<li>li2 
<ul>5</ul> 
<ul>6</ul> 
</li> 
<li>li3 
</li> 
</div> 
<input type="checkbox" id="checkbox1" />checkbox1 
<input name="flower" type="checkbox" id="checkbox2" checked="checked" />checkbox2 
<br /> 
<a href="#" id="aFirst">顯示第一個(gè)ul節(jié)點(diǎn)的值</a> 
<a href="#" id="aLast">顯示最后一個(gè)ul節(jié)點(diǎn)的值</a> 
<a href="#" id="aNot">顯示未選擇中checkbox的ID</a> 
<a href="#" id="aEven">顯示索引為偶數(shù)的ul內(nèi)容</a> 
<a href="#" id="aOdd">顯示索引為奇數(shù)的ul內(nèi)容</a> 
<a href="#" id="aEq">顯示索引為3的ul內(nèi)容</a> 
<a href="#" id="aGt">顯示索引大于3的ul內(nèi)容</a> 
<a href="#" id="aLt">顯示索引小于3的ul內(nèi)容</a> 
<a href="#" id="aHeader">顯示頁面標(biāo)題內(nèi)容</a> 
<br /> 
Result: 
<br /> 
<div id="Result"> 
</div> 
</body> 
</html> 

這節(jié)好像沒有什么課外知識(shí)點(diǎn)，哈，那現(xiàn)在就進(jìn)入正題咯
1.$("TabName:first")
描述：可獲取某種節(jié)點(diǎn)的第一個(gè)節(jié)點(diǎn)，如例子中有6個(gè)ul，使用$("ul:first")即可獲取到首個(gè)ul結(jié)點(diǎn)
返回值：Element;
2.$("TabName:Last")
描述：與上一個(gè)用法差不多，區(qū)別只在于此方法用于獲取最后一個(gè)節(jié)點(diǎn)
返回值：Element;
3.$("TabName:not(:attribute)")
描述：此方法可實(shí)現(xiàn)一些簡(jiǎn)單的選擇器過濾，如例子中，$("input:not(:checked)")就選擇了未選擇的checkbox元素，此方法尚在實(shí)踐中，好像就只能對(duì)些值為bool的屬性進(jìn)行過濾，例子中相當(dāng)于選擇checked為false的input。
返回值：Array(Element);
4.$("TabName:even")
描述：用于獲取某種節(jié)點(diǎn)的偶數(shù)索引節(jié)點(diǎn)的集合，這邊要強(qiáng)調(diào)一點(diǎn)，這邊的索引是從0開始的所以例子中aEven點(diǎn)擊后所獲取的是第1、3、5的ul結(jié)點(diǎn)
返回值：Array(Element);
5.$("TagName:odd")
描述：與上個(gè)方法類似，唯一的區(qū)別就是這獲取的是奇數(shù)節(jié)點(diǎn)的集合。
返回值：Array(Element);
6.$("TagName:eq(index)")
描述：用于獲取某種節(jié)點(diǎn)集合中的index索引位置的節(jié)點(diǎn)
返回值：Array(Element);
7.$("TagName:gt(index)")
描述：用于獲取某種節(jié)點(diǎn)集合中，索引大于index的節(jié)點(diǎn)集合
返回值：Array(Element);
8.$("TagName:lt(index)")
描述：用于獲取某種節(jié)點(diǎn)集合中，索引小于index的節(jié)點(diǎn)集合
返回值：Array(Element);
9.$(":header")
描述：用于獲取頁面中h1, h2, h3之類的標(biāo)題節(jié)點(diǎn)集合
返回值：Array(Element);

您可能感興趣的文章: