jQuery的選擇器

2021-09-02 14:09:28 字數 3070 閱讀 4930

對jquery中的選擇器做個總結和自己的理解,(注釋中是自己的理解)

//基本選擇器:

//1,通過id查詢

$("#mydiv");

//2,通過標籤名查詢

$("div");

//3,通過class名查詢

$(".myclass");

//4,找到每乙個元素

$("*");

//5,群組選擇

$("div,sapn,p.myclass");

//層級選擇:

//1,給定乙個祖先,找他的所有指定的後代元素

$("from input");

//2,給定乙個父元素,找他的指定的子元素

$("form > input");

//3,匹配所有跟在label後邊的input元素

$("label + input");

//4,找到所有與form同輩的input元素

$("form ~ input");

//基本:

//1,獲取匹配的第乙個元素

$('li:first');

//2,獲取匹配的最後乙個元素

$('li:last');

//3,查詢除了預設選中之外的input

$("input:not(:checked)");

//4,匹配下標為偶數的元素,注意從0開始

$("li:even");

//5,匹配下標為奇數的元素,注意從0開始

$("li:odd");

//6,匹配乙個給定下標的元素,注意從0開始

$("li:eq(1)");

//7,匹配所有>給定下標的元素,從0開始

$("li:gt(0)");

//8,匹配所有<給定下標的元素,從0開始

$("li:lt(1)");

//9,匹配如h1,h2,h3...之類的標題元素

$(":header");

//內容:

//1,匹配包含給定文字join的div元素

$("div:contains('join')");

//2,匹配沒有兒子或沒有文字內容的空的td元素

$("td:empty");

//3,匹配包含p這個兒子的所有div元素

$("div:has(p)");

//4,找所有有子元素或者有文字內容的td元素

$("td:parent");

//可見性:

//1,找所有display:none隱藏的tr元素 或者type為hidden的input

$("tr:hidden"); $("input:hidden");

//2,找所有可見的tr元素,就是沒有設定display:none的tr

$("tr:bisible");

//屬性:

//1,查詢所有含有id屬性的div元素

$("div[id]");

//2,匹配所有給定的屬性name的值是某個特定的值newsletter的input元素

$("input[name='newsletter']");

//3,匹配所有給定的屬性name的值不是某個特定的值newsletter的input元素

$("input[name!='newsletter']");

//4,匹配所有給定的屬性name的值是以某些特定的值news開頭的input元素

$("input[name^='news']");

//5,匹配所有給定的屬性name的值是以某些特定的值letter結尾的input元素

$("input[name$='letter']");

//6,匹配所有給定的屬性name的值包含某些特定的值man在內的input元素

$("input[name*='man']");

//7,復合的屬性選擇,需要滿足以上的多個條件(有id這個屬性,且name屬性是以man結尾的input元素)

$("input[id] [name$='man']");

//子元素

//1,匹配所有的父元素ul下的第2個子li元素 從1開始

$("ul li:nth-child(2)");

//2,匹配所有的父元素ul下的第乙個li元素

$("ul li:first-child");

//3,匹配所有父元素ul下的最後乙個li元素

$("ul li:last-child");

//4,在ul裡找是獨子的li元素

$("ul li:only-child");

//表單:

//1,匹配所有的input元素

$(":input");

//2,匹配所有的type屬性為text的input元素

$(":text");

//3,匹配所有的type屬性為password的input元素

$(":password");

//4,匹配所有type屬性為radio的input元素

$(":radio");

//5,匹配所有type屬性為checkbox的input元素

$(":checkbox");

//6,匹配所有type屬性為submit的input元素

$(":submit");

//7,匹配所有type屬性為image的input元素

$(":image");

//8,匹配所有type屬性為reset的input元素

$(":reset");

//9,匹配所有type屬性為button的input元素

$(":button");

//10,匹配所有type屬性為file的input元素

$(":file");

//11,查詢所有可用的input元素

$("input:enabled");

//12,查詢所有不可用的input元素

$("input:disabled");

//13,查詢所有有預設選中屬性的input元素

$("input:checked");

//14,查詢所有選中的option元素

$("select option:selected");

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 屬性中給定的值。示例 查...