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