jQuery的選擇器

2022-08-24 18:42:07 字數 2025 閱讀 7685

一:基本選擇器

標籤選擇器:$("標籤名"); 返回一組元素集合(匹配相同的標籤名)

類選擇器:$(".class類名"); 返回一組元素集合(匹配相同的class屬性值)

id選擇器:$("#id名"); 返回單個元素(匹配id屬性值)

通用選擇器:$("標籤,class,id"); 返回一組元素集合(選擇的元素)

全域性選擇器:$("*"); 返回一組元素集合(網頁所有元素)

二.層次選擇器

後代選擇器 ancestor descendant 選取ancestor元素裡的所有descendant(後代)元素 $("#menu span" )選取#menu下的元素

子選擇器 parent>child 選取parent元素下的child(子)元素 $(" #menu>span" )選取#menu的子元素

相鄰元素選擇器 prev+next 選取緊鄰prev元素之後的next元素 $(" h2+dl " )選取緊鄰元素之後的同輩元素

同輩元素選擇器 prev~sibings 選取prev元素之後的所有siblings元素 $(" h2~dl " )選取元素之後所有的同輩元素

三.屬性選擇器

[attribute] 選取包含給定屬性的元素 $(" [href]" )選取含有href屬性的元素

[attribute=value] 選取等於給定屬性是某個特定值的元素 $(" [href ='#']" )選取href屬性值為「#」的元素

[attribute !=value] 選取不等於給定屬性是某個特定值的元素 $(" [href !='#']" )選取href屬性值不為「#」的元素

[attribute^=value] 選取給定屬性是以某些特定值開始的元素 $(" [href^='en']" )選取href屬性值以en開頭的元素

[attribute$=value] 選取給定屬性是以某些特定值結尾的元素 $(" [href$='.jpg']" )選取href屬性值以.jpg結尾的元素

[attribute*=value] 選取給定屬性是以包含某些值的元素 $(" [href* ='txt']" )選取href屬性值中含有txt的元素

四.過濾選擇器

/*獲取第乙個元素*/

//$(".lis:first").css("color","green");

/*獲取最後乙個元素*/

//$(".lis:last").css("color","blue");

/*忽略元素*/

//$("a:not([href^=g])").css("background-color","pink");

/*奇數偶數:下標0開始*/

/* $("li:odd").css("background-color","pink"); */

/*定位到具體哪乙個*/

$("li:eq(0)").css("color","red");

/*定位到大於位置的元素*/

$("li:gt(2)").css("background-color","pink");

/*定位到小於位置的元素*/

$("li:lt(2)").css("background-color","green");

/*定位到標題元素*/

$(":header").css("background-color","blue");

/*獲取有焦點的元素*/

//$("#wht").focus();

//$("input:focus").val('磊 給你太美');

/*獲取動畫元素*/

//$("ul").fadeout(3000).fadein(5000);

//$("ul:animated").css("background-color","blue");

/*可見性選擇器*/

/* :hidden可以定位到隱藏元素,包含隱藏域等,如果說定位到的時隱藏域,顯示時則修改type屬性值,如果時普通元素則可以修改css樣式display */

$("input:hidden").attr("type","visible");

Jquery 選擇器 簡單的選擇器

1.3簡單的偽類選擇器 你們好你們好 你們好你們好 你們好你們好 1.3.1特定位置選擇器 主要包括 first last,eq index 3中位置 p first css color blue 匹配第乙個p標籤 p eq 3 css background yellow 匹配第4個p標籤 p la...

JQuery選擇器 選擇器簡介

在開始學習jquery選擇器之前,有必要了解一下css 層疊樣式表 技術。css是一項出色的技術,它使得網頁的結構和表現樣式完全分離。利用css選擇器能夠輕鬆的對某個元素新增樣式而不改變html結構,只需通過新增不同的css規則,就可以得到各種不同樣式的網頁。常用的css選擇器分類如下表 選擇器語法...

Jquery選擇器 基本選擇器

jquery作為我們常用前端工具之一,實際專案中常用的的選擇器有id選擇器 id 元素選擇器 element 樣式選擇器 class 概述 根據給定的id匹配乙個元素。使用任何的元字元 如 作為名稱的文字部分,它必須被兩個反斜槓轉義 引數 id,用於搜尋的,通過元素的 id 屬性中給定的值。示例 查...