JavaScript選擇元素的方法

document.getElementById();

通過id屬性獲取指定元素

返回唯一的DOM物件

document.getElementsByTagName();

通過標籤名獲取指定元素

返回DOM物件陣列（即使只有一個元素）

符號(名稱)

說明

用法

#

Id選擇器

$(“#btnShow”).css(“color”, “red”);

選擇id為btnShow的一個元素（返回值為jQuery物件，下同）

.

類選擇器

$(“.liItem”).css(“color”, “red”);

選擇含有類liItem的所有元素

element

標籤選擇器

$(“li”).css(“color

選擇標籤名為li的所有元素

符號(名稱)

說明

用法

層級選擇器

空格

後代選擇器

$(“#j_wrap li”).css(“color”,“red”);

選擇id為j_wrap的元素的所有後代元素li

> 

子代選擇器

$(“#j_wrap > ul > li”).css(“color”, “red”);

選擇id為j_wrap的元素的所有子元素ul的所有子元素li

常用的過濾選擇器

:eq(index)

選擇匹配元素中索引號為index的一個元素，index

$(“li:eq(2)”).css(“color”, ”red”);

選擇li元素中索引號為2的一個元素

:odd

選擇匹配元素中索引號為奇數的所有元素，index從0開始

$(“li:odd”).css(“color”, “red”);

選擇li元素中索引號為奇數的所有元素

:even

選擇匹配元素中索引號為偶數的所有元素，index從0開始

$(“li:even”).css(“color”, “red”);

選擇li元素中索引號為偶數的所有元素

符號(名稱)

說明

用法

find(selector)

查詢指定元素的所有後代元素（子子孫孫）

$(“#j_wrap”).find(“li”).css(“color”, “red”);

選擇id為j_wrap的所有後代元素li

children()

查詢指定元素的直接子元素（親兒子元素）

$(“#j_wrap”).children(“ul”).css(“color”, “red”);

選擇id為j_wrap的所有子代元素ul

siblings()

查詢所有兄弟元素（不包括自己）

$(“#j_liItem”).siblings().css(“color”, “red”);

選擇id為j_liItem的所有兄弟元素

parent()

查詢父元素（親的）

$(“#j_liItem”).parent(“ul”).css(“color”, “red”);

選擇id為j_liItem的父元素

eq(index)

查詢指定元素的第index個元素，index是索引號，從0開始

$(“li”).eq(2).css(“color”, “red”);

選擇所有li元素中的第二個

next()

獲取當前元素的下一個兄弟元素

$(“#add”).next().css(“color”, “red”);

選擇id為add的元素中的下一個兄弟元素

prev()

獲取當前元素的上一個兄弟元素

$(“#add”).prev().css(“color”, “red”);

選擇id為add的元素中的上一個兄弟元素