jQuery是一款流行的JavaScript庫(kù),它簡(jiǎn)化了在網(wǎng)頁(yè)上操作HTML元素、事件處理、動(dòng)畫(huà)效果和Ajax等操作的過(guò)程。在使用jQuery進(jìn)行開(kāi)發(fā)時(shí),熟練掌握各種選擇器種類(lèi)及其用途是至關(guān)重要的。選擇器是jQuery中用于選取指定元素的方法,可以根據(jù)需要精準(zhǔn)選擇想要操作的元素,從而實(shí)現(xiàn)更加靈活的開(kāi)發(fā)。
1. 基礎(chǔ)選擇器
元素選擇器:選擇所有指定元素,語(yǔ)法為$("element")。例如,$("p")選取所有段落元素。
$("p").css("color", "red");
登錄后復(fù)制
ID選擇器:選擇特定id的元素,語(yǔ)法為$("#id")。例如,$("#myId")選取id為”myId”的元素。
$("#myId").hide();
登錄后復(fù)制
類(lèi)選擇器:選擇指定類(lèi)的元素,語(yǔ)法為$(".class")。例如,$(".myClass")選取類(lèi)為”myClass”的元素。
$(".myClass").fadeIn();
登錄后復(fù)制
2. 層級(jí)選擇器
后代選擇器:選擇指定元素的后代元素,語(yǔ)法為$("parent descendant")。例如,$("div p")選取所有div元素內(nèi)的段落元素。
$("div p").addClass("highlight");
登錄后復(fù)制
子元素選擇器:選擇指定元素的直接子元素,語(yǔ)法為$("parent > child")。例如,$("ul > li")選取ul元素下的直接子元素li。
$("ul > li").hover(function(){
$(this).toggleClass("hover");
});
### 3. 過(guò)濾選擇器
登錄后復(fù)制
第一個(gè)元素:選擇第一個(gè)匹配的元素,語(yǔ)法為:first。例如,$("li:first")選取第一個(gè)li元素。
$("li:first").css("font-weight", "bold");
登錄后復(fù)制
最后一個(gè)元素:選擇最后一個(gè)匹配的元素,語(yǔ)法為:last。例如,$("li:last")選取最后一個(gè)li元素。
$("li:last").css("color", "blue");
登錄后復(fù)制
4. 內(nèi)容選擇器
包含指定文本內(nèi)容的元素:選擇包含指定文本內(nèi)容的元素,語(yǔ)法為:contains(text)。例如,$("p:contains('Hello')")選取包含文本”Hello”的段落元素。
$("p:contains('Hello')").addClass("highlight");
登錄后復(fù)制
空元素:選擇沒(méi)有子元素的空元素,語(yǔ)法為:empty。例如,$("div:empty")選取空的div元素。
$("div:empty").text("This div is empty");
登錄后復(fù)制
5. 狀態(tài)選擇器
可見(jiàn)元素:選擇可見(jiàn)的元素,語(yǔ)法為:visible。例如,$("div:visible")選取可見(jiàn)的div元素。
$("div:visible").fadeOut();
登錄后復(fù)制
隱藏元素:選擇被隱藏的元素,語(yǔ)法為:hidden。例如,$("div:hidden")選取被隱藏的div元素。






