基本選擇器是最常用的選擇器,也是最簡單的選擇器.
$("#test") //
選取id為test的元素
$(".test") //
選取class為test的元素
$("div.test") //
選取class為test的div元素
$("div") //
選取所有的div元素
$("*") //
選取所有元素
$("div,p") //
選取所有div元素和p元素
一般使用基本選擇器就可以完成大部分工作
如果希望通過元素之間的層次關係來獲取特定元素,比如後代元素,子元素,相鄰元素等,那就需要使用層次選擇器
$("div p") //
選取div裡所有的p元素
$("div>p") //
選取div的子元素中所有的p元素
//上面這兩個是有區別的,前者選擇的div下的後代元素,後者選擇的是div下一級的子元素
$(".test + div") //
選取class為test的下乙個div同輩元素
$(".test ~ div")//
選取class為test的元素後面所有的div同輩元素
層次選擇器中,前兩個比較常用,後兩個不常用,一般會使用next()和nextall()代替
過濾選擇器通過特定的規則開篩選出所需的dom元素,這個稍微複雜些,又可分為以下幾種
$("div:first") //
選取所有div元素中的第乙個div元素
$("div:last") //
選取所有div元素中的最後乙個div元素
$("div:not(.test)") //
選取所有div元素中class不為test的div元素
$("input:focus") //
選取當前獲取焦點的input元素
$("div:eq(1)") //
選取所有div元素中索引是1的div元素
$("div:gt(1)") //
選取所有div元素中索引大於1的div元素
$("div:lt(1)") //
選取所有div元素中索引小於1的div元素
$("div:even") //
選取所有div元素中索引是偶數的div元素
$("div:odd") //
選取所有div元素中索引是奇數的div元素
內容過濾器主要是通過它所包含的子元素或者文字內容來定位某些元素
$("div:contains("test")") //
選取所有div元素中含有文字test的div元素
$("div:has(p)") //
獲取含有p元素的div元素
$("div:empty") //
選取不包含子元素或者文字元素的div元素
$("div:parent") //
選取包含子元素或者文字元素的div元素
根據元素的可見和不可見狀態來選擇相應的元素
$("div:hidden") //
選取所有不可見的div元素
$("div:visible") //
獲取所有可見的div元素
屬性過濾器的規則是通過元素的屬性來獲取響應的元素.
$("div[id=test]") //
選取屬性id為test的div元素
$("div[class!=test]") //
選取屬性class不為test的div元素
$("div[class^=test]") //
選取屬性class以test開始的div元素
$("div[class$=test]") //
選取屬性class以test結束的div元素
$("div[class*=test]") //
選取屬性class類名中包含test的div元素
$("input[class=test][name=a]") //
選取屬性class類名為test並且name為a的的input元素
對所選擇的表單元素進行篩選,比如下拉框,多選框等
$("#form1:enabled") //
選取id為form1的表單內的所有可用元素
$("#form1:disabled") //
選取id為form1的表單內的所有不可用元素
$("input:checked") //
選取所有被選中的input元素,適用於單選框,多選框
$("select option:selected") //
選取所有被選中的option元素,適用於下拉框
CSS3選擇器備忘錄
除了id選擇器和class選擇器，另還有元素選擇器 屬性選擇器 包含選擇器 子選擇器和css3中新增的兄弟選擇器，以下帶上id選擇器和類選擇器一起舉例。1.id 選擇器 id selector，is 使用 標識selector，語法格式 s s為選擇器名 例 id為name的標籤會匹配下面的樣式 r...
jquery學習備忘錄
語法解釋 1.select id change function 為select新增事件，當選擇其中一項時觸發 2.var checktext select id find option selected text 獲取select選擇的text 3.var checkvalue select id...
前端 jQuery選擇器
jquery selectorstitle src script body header container style head jqueryh1 header container heading1 heading oneh1 para1 hellop class heading2 heading...