Javascript - Jquery選擇器
選擇器(JQuery Selector)
JQuery是一個JavaScript庫,它極大地簡化了JavaScript編程。整個JQuery庫的方法都在$這個工廠函數裏,我們只需要實例化$對象,提供作為參數的選擇器就可以很輕易的獲取DOM元素的數組表示。
選擇器
基本選擇器
通過標簽名、ID、類名獲取元素。
標簽選擇:$ ( ‘p‘ )
選擇所有P元素。
ID選擇:$ ( ‘#box‘ )
選擇ID為box的元素。
類名選擇:$ ( ‘.box‘ )
選擇類名為box的元素。
限定選擇:$(div#box)
選擇ID為box的div元素。
所有選擇:$(‘*‘)
選擇所有元素。
<body>
<div id="box">flikr</div>
<div class="classBox">google</div>
<div>microsoft</div>
<script>
$(document).ready(function () {
alert($("#box")[0].id);
alert($(".classBox")[0].className);
alert($( "div")[2].textContent);
});
</script>
</body>
基本選擇器組合
基本選擇器可搭配組合,每個選擇中間用逗號隔開。
$(‘div#box‘)
選擇ID為box的div元素。
$(‘span.box‘)
選擇類名為box的span元素。
$(‘div,span,p.box‘)
選擇div、span和類名為box的p元素。
層次選擇器
通過DOM的層次關系來選擇元素。
同級選擇:$(‘div+span‘)、$(‘div~span‘)
+號表示緊靠該元素的同級元素,~號表示所有該元素的同級元素。
$("div+span")//選擇緊靠div元素後的同級span元素,其實就是選擇div後的那個元素,只不過你得顯示說明該元素是什麽元素。
$("div+span+p")//選擇緊靠div元素後的兄弟span元素後的兄弟p元素
$("div~span")//選擇div元素後的所有同級span元素
後代選擇:$(‘div span‘)
選擇div包含的所有後代span元素。不能寫成$(‘div ‘),這只會返回div。
過濾選擇器
過濾器的語法格式與css偽類類似,它需要你指定一個條件從而篩選出符合條件的元素。過濾選擇器使用:號和[]號指定過濾規則。首先必須有基本選擇器,表示選擇xx,接著在過濾器的條件裏篩選出需要的元素,註意以下的A表示基本選擇器。
順序過濾
$(‘A:first‘)
選擇A,過濾出第一個A。
$(‘A空格:first‘)
選擇A的所後代元素,過濾出第一個子元素。
其它類似過濾
:last(過濾出最後一個元素)、空格:last(過濾出子元素中的最後一個)、first(過濾出第一個元素)、空格:first(過濾出子元素中的第一個元素)、:animated(過濾出正在執行動畫的元素)、空格:animated(過濾出正在執行動畫的子元素)。
內容過濾
$(‘A:empty‘)
選擇A,過濾出不包含任何子元素的A。
$(‘A空格:empty‘)
選擇A所有的子元素,過濾出不包含任何子元素的元素。
其它類似過濾
$(‘A:parent‘)(過濾出擁有後代元素的A)、$(‘A:has(text)‘)(過濾出類名或ID名是text的A)、$(‘A:not()‘)(過濾出類名或ID名不是text的A)、$(‘A:contains(‘text‘)‘)(選擇A,過濾出包含text文本的層級元素(如果子元素包含文本,將視其上層也包含相同的文本,它們會一並被獲取))。
索引過濾
$(‘A:eq(index)‘)
選擇A,過濾出指定索引的A。
其它類似過濾
$(‘A:odd‘)(過濾出索引是奇數的A)、$(‘A:even‘)(過濾出索引是偶數的A)、$(‘A:gt(數字)‘)(過濾出索引<數字的A)、$(‘A:gt(數字)‘)(過濾出索引>數字的A)。
可見性過濾
不可見元素包括display為none的元素和屬性為hidden的元素,如input的type=hidden的元素。
$(‘:visible‘)
選擇所有元素,過濾出可見元素。
$(‘A:visible‘)
選擇A,過濾出可見的A元素。
其它類似過濾
$(‘:hidden‘)(過濾出所有不可見元素)
屬性過濾
$(‘A[id]‘)
選擇A,擁有id屬性的div元素。
$(‘A[id!=idName]‘)
選擇A,過濾出id不是idName或沒有id的A元素。
其它類似過濾
$(‘div[class^=text]‘)(過濾出類名是以text開頭的A元素)、$("A[class$=c]")、(過濾出類名是以text結尾的A元素)、$(‘div[class*=text]‘)(過濾出類名包含了text字符的div元素)。
屬性過濾組合
組合多個屬性過濾器,相當於&&。
$(‘div[id][id!=box]‘)
選擇div,過濾出擁有id屬性並且id名不是box的div元素。
後代元素過濾
$(‘:nth-child(n)‘)
選擇所有元素,但他們必須是其父元素中的第n個子元素。n從1開始。
$(‘A:nth-child(n)‘)
選擇A元素,A元素必須是其父元素中的第n個子元素,n從1開始。
$(‘A:nth-child(even)‘)
選擇A元素,A元素必須是其父元素中的索引為偶數的子元素。
$(‘A:nth-child(odd)‘)
選擇A元素,父元素中的索引為奇數的子元素。
$(‘A:nth-child(數字n)‘)
選擇A元素,A元素必須是其父元素下索引是數字的n倍的子元素 ,n從0開始自動與數字相乘。
例子:選擇第3、6、9個子元素:
$(‘A:nth-child(數字n+1) ‘)
選擇A,A元素必須是其父元素下索引是數字的n倍+1的子元素 ,n從0開始自動與數字相乘。
$(‘A:first-child‘)
選擇A,A元素必須是其父元素的第一個子元素。
$(‘A空格:first-child‘)
選擇A的後代元素,後代元素只要是其父元素的第一個子元素都會被獲取到。
$(‘A:last-child‘)
選擇A,A元素必須是其父元素的最後一個子元素。
$(‘A空格:last-child‘)
選擇A的後代元素,後代元素只要是其父元素的最後一個子元素都會被獲取到。
表單屬性過濾
$(‘:enabled‘)
選擇所有元素,同時必須是未被禁用的元素
其它類似過濾
$(‘:disabled‘)(過濾出被禁用的元素)、 $(‘:checked‘)(過濾出被選中的復選框元素)、$(‘:selected‘)(過濾出被選中的下拉框元素)。
表單元素過濾
$(‘:radio‘)
過濾出所有單選框元素。
$(‘:file‘)
過濾出所有的上傳域元素。
$(‘:reset‘)
過濾出所有重置按鈕元素。
$(‘:text‘)
過濾出所有單行文本框元素。
$(‘:image‘)
過濾出所有圖像按鈕元素。
$(‘:submit‘)
過濾出所有提交按鈕元素。
$(‘:checkbox‘)
過濾出所有復選框元素。
$(‘:hidden‘)
過濾出所有表單不可見元素
$(‘:password‘)
過濾出所有密碼文本框元素。
$(‘:input‘)
過濾出所有input、textarea、select、button元素。
附:如果一個頁面中不但引用了jquery.js 還引用了有可能引發沖突的其它js腳本 可如下設置
//使用一個變量替代$即可 var jq = $.noConflict();
Javascript - 學習總目錄
Javascript - Jquery選擇器