|
|
復制代碼 代碼如下:
<!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>無標題文檔</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">顯示第一個ul節點的值</a>
<a href="#" id="aLast">顯示最后一個ul節點的值</a>
<a href="#" id="aNot">顯示未選擇中checkbox的ID</a>
<a href="#" id="aEven">顯示索引為偶數的ul內容</a>
<a href="#" id="aOdd">顯示索引為奇數的ul內容</a>
<a href="#" id="aEq">顯示索引為3的ul內容</a>
<a href="#" id="aGt">顯示索引大于3的ul內容</a>
<a href="#" id="aLt">顯示索引小于3的ul內容</a>
<a href="#" id="aHeader">顯示頁面標題內容</a>
<br />
Result:
<br />
<div id="Result">
</div>
</body>
</html>
這節好像沒有什么課外知識點，哈，那現在就進入正題咯
1.$("TabName:first")
描述：可獲取某種節點的第一個節點，如例子中有6個ul，使用$("ul:first")即可獲取到首個ul結點
返回值：Element;
2.$("TabName:Last")
描述：與上一個用法差不多，區別只在于此方法用于獲取最后一個節點
返回值：Element;
3.$("TabName:not(:attribute)")
描述：此方法可實現一些簡單的選擇器過濾，如例子中，$("input:not(:checked)")就選擇了未選擇的checkbox元素，此方法尚在實踐中，好像就只能對些值為bool的屬性進行過濾，例子中相當于選擇checked為false的input。
返回值：Array(Element);
4.$("TabName:even")
描述：用于獲取某種節點的偶數索引節點的集合，這邊要強調一點，這邊的索引是從0開始的所以例子中aEven點擊后所獲取的是第1、3、5的ul結點
返回值：Array(Element);
5.$("TagName:odd")
描述：與上個方法類似，唯一的區別就是這獲取的是奇數節點的集合。
返回值：Array(Element);
6.$("TagName:eq(index)")
描述：用于獲取某種節點集合中的index索引位置的節點
返回值：Array(Element);
7.$("TagName:gt(index)")
描述：用于獲取某種節點集合中，索引大于index的節點集合
返回值：Array(Element);
8.$("TagName:lt(index)")
描述：用于獲取某種節點集合中，索引小于index的節點集合
返回值：Array(Element);
9.$(":header")
描述：用于獲取頁面中h1, h2, h3之類的標題節點集合
返回值：Array(Element);
JavaScript技術：JQuery 學習筆記 選擇器之三，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
