jQuery 提供了一套非常強大的元素選擇器,它們可以以各種方式定位和操作網頁文檔中的元素。
以下是 jQuery 中的一些常用選擇器:
1、基本選擇器
#id:選擇 ID 為 id 的元素。.(類選擇器):選擇具有特定類的所有元素。標簽選擇器:選擇所有指定類型的標簽。*:選擇所有元素。[attribute]:選擇具有指定屬性的元素。[attribute=value]:選擇具有指定屬性和值的元素。
2、層次選擇器?
>:子元素選擇器,選擇作為其直接子元素的元素。+:相鄰兄弟選擇器,選擇緊接在另一個元素后的元素,且兩個元素有相同的父元素。~:一般兄弟選擇器,選擇擁有相同父元素的元素。
3、后代選擇器
空格分隔的選擇器:選擇作為后代元素的所有元素,無論層次多深。
4、子集選擇器
:first:選擇第一個元素。:last:選擇最后一個元素。:even:選擇索引為偶數的元素。:odd:選擇索引為奇數的元素。:eq(index):選擇索引為 index 的元素。:gt(index):選擇索引大于 index 的所有元素。:lt(index):選擇索引小于 index 的所有元素。
5、表單對象屬性過濾器
:input:選擇所有的 <input>, <textarea>, <select> 和 <button> 元素。:text:選擇所有的 <input type="text"> 元素。:password:選擇所有的 <input type="password"> 元素。:radio:選擇所有的 <input type="radio"> 元素。:checkbox:選擇所有的 <input type="checkbox"> 元素。:selected:選擇所有 <option> 被選中的元素。:checked:選擇所有被選中的 <input> 元素。:enabled:選擇所有啟用的表單元素。:disabled:選擇所有禁用的表單元素。
6、可見性過濾器
:visible:選擇所有可見的元素。:hidden:選擇所有不可見的元素。
7、內容過濾器
:contains(text):選擇包含文本 text 的元素。:empty:選擇沒有子元素或文本的元素。:parent:選擇含有子元素或文本的元素。
8、屬性選擇器
:has(selector):選擇含有匹配 selector 的子元素的元素。[attribute!=value]:選擇不具有屬性 value 的元素。[attribute^=value]:選擇屬性值以 value 開頭的元素。[attribute$=value]:選擇屬性值以 value 結尾的元素。[attribute*=value]:選擇屬性值包含 value 的元素。
這些選擇器可以組合使用,形成更復雜的查詢表達式。
例如:
div p:選擇所有位于 div 元素內部的 p 元素。div > p:選擇所有直接位于 div 元素內部的 p 元素。div + p:選擇所有緊接在 div 元素之后的 p 元素。div ~ p:選擇所有位于 div 元素之后的 p 元素,但不一定緊接在后。
使用這些選擇器時,只需要將它們按照語法要求組合起來,然后用 $() 函數包裹即可。
例如:
$('#someId').find('div p');
$('.someClass').siblings('.anotherClass');
$('div').children('p');