Jquery選擇器總結

2021-06-06 08:56:38 字數 1673 閱讀 2501

jquery中的選擇器通用的格式為:

$("selector")

這裡的selector總的來說可以按照幾種類別進行選擇:

(1)按照元素的名稱選

這時直接寫元素的名稱即可,此時返回的是所有該名稱元素的集合。如:

$("a")  //選擇所有的元素,是個集合陣列

$("p") //選擇所有的元素

(2)按照元素的id屬性選擇

這時selector的格式為:#id,此時返回的是第乙個匹配的id屬性的元素,注意:不是乙個集合。

$("#idname")  //選擇第乙個id屬性值為idname的元素。

(3)按照元素的css樣式類選

這時selector的格式為:.classname,此時返回的是所有class屬性為classname的元素集合

$(".classname")  //選擇所有class屬性為classname的元素集合

(4)按照元素的type型別選,通常用於input元素

這時的selector的格式為::typename ,返回是所有type型別為typename的元素

$(":text")  //返回是所有type型別為text的元素

(5)按照元素的屬性選

這時的selector的格式為:[attributename] ,此時,還能對屬性的值做一些限制。如:

$("[herf]")  //選擇所有包含href屬性的元素。

$("[href = "#"]") //選擇所有包含href屬性且值為#的元素

$("[href != "#"]") //選擇所有包含href屬性且值不為#的元素。

$("[href $= ".img"]") //選擇所有包含href屬性,且值的尾部為.img的元素

注意:$= 是乙個「結尾等」運算子,按照字尾匹配的規則選擇元素。

(6)元素的巢狀選擇

這時selector的格式為:father child:restrict ,這裡的restrict是對子元素的限制條件,是可選的。不寫即選擇所有的子元素。限制條件常用的可以有兩種寫法:

a. nth-child(number || even || odd)  

說明:number給出乙個數字,表明是第幾個孩子。even選擇偶數孩子,odd選擇奇數孩子。

b. eq(number)  lt(number)  gt(number)

說明:eq(number)  number給出乙個數字,表明選擇的是等於索引為幾的孩子(索引從0開始)

lt(number)    選擇索引小於number的所有孩子

gt(number)   選擇索引大於number的所有孩子

示例:

$("table tr:nth-child(even)")  //選擇table元素下所有的索引為偶數的tr元素

$("table tr:nth-child(3)") //選擇table元素下索引為3的tr元素

$("ul li:eq(3)") //選擇ul元素下的索引為3的li子元素

$("ul li:lt(3)") //選擇ul元素下的索引小於3的li子元素。

jQuery選擇器總結

父元素中所有的子元素,不包括後代元 父元素 子元素 選擇某元素的緊挨著的元素 如果不存在則什麼都不選擇 某元素 需要查詢的元素 層次選擇器4 個 選擇父元素中的某些元素 父元素 子元素 選擇選擇兄弟元素 可以間隔其他元素 某元素 需要查詢的元素 簡單選擇器10 個 簡單選擇器的特點是有個 first...

jQuery選擇器總結

jquery 的選擇器可謂之強大無比,這裡簡單地總結一下常用的元素查詢方法 myelement 選擇id值等於myelement的元素,id值不能重複在文件中只能有乙個id值是myelement所以得到的是唯一的元素 div 選擇所有的div標籤元素,返回div元素陣列 myclass 選擇使用my...

jQuery選擇器總結

所有元素 this 當前元素 test id為test的所有元素 test 類名為test的所有元素 div 標籤為div的所有元素 test first class為test的第乙個元素,test可以換成任意選擇器得到的節點 以下都是 的形式,用法同上 last 最後乙個元素 not 例 inpu...