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...