會員登入 新朋友?立刻註冊
[說明]
文章會慢慢移新精讚 //n.sfs.tw
2019/2/23 星期六     [文章分類及列表]
精讚Blog logo 部落格是自己寫爽的
精讚部落 > 前端程設 > jQuery
jQuery神奇的選擇器(Selector) 無次要群組 列印 推薦
作者或來源 文章來源:http://blog.xuite.net/emisjerry/tech/13659524 2009-12-05 11:55:06
關鍵字 1selector 2選擇器 3jquery
此文完整連結 http://n.zipko.info/268.html
文章歡迎轉載,請尊重版權註明連結來源。

就像正規運 算式(Regular Expression)的Pattern match一般,jQuery使用了CSS(Cascading Style Sheet)、XPath(XML Path Language)與自訂等三大類的選擇器(Selector)當做$( )函數的參數,讓我們由複雜多樣的DOM結構裡,快速的找出符合樣式的要素。

使用選擇器的三個基本格式是:

格式 範例 說明
1 $("HTML標籤") $("div") 傳回表示所有div要素的jQuery物件
2 $("#要素的ID") $("#linksLeft") 傳回表示<div id="linksLeft">要素的jQuery物件
3 $(".要素的類別") $(".blogname") 傳回<div class="blogname">要素的jQuery物件

CSS選擇器

更完整的CSS Selector如下表:

樣 式 說明 範例
* 萬用選擇器(Universal selector);表示所有的要素 $("*")
E Type selectors;選取指定的要素類型 $("div") 選取所有的div要素
E > F Child selectors;選取E的子要素F $("div > li") 選取div要素裡的子要素li
E F Descendant selectors;選取E的後代要素F,子代、孫代、... $("div li")
E + F 套用緊鄰在E之後的要素F 範例在表格下面
E:first-child E是第一個子要素;這個表示方法似乎不是很直覺,容易被理解成是E的第一個子要素,但其實是:E是其父要素的第一個子要 素 $(".blogbody:first-child") 找到首頁第一篇文章
E:last-child E是其父要素的最後一個子要素 $(".blogbody:last-child") 找到首頁最後一篇文章
E:nth-child(n) E是其父要素的第n個子要素 $(".blogbody:nth-child(2)") 找到首頁第3篇文章(由0起算)
E:only-child E是唯一的子要素 $(".blogname:only-child")
E:empty E沒有任何的子要素 $("div:empty")
E:enabled 生效的要素E HTML標籤沒有被加上disabled
E:disabled 失效的要素E HTML標籤被加上disabled
E:checked 被勾選的要素E HTML標籤被加上chedked
E:selected 被選取的要素E HTML標籤被加上selected
E:not(s) 不屬於s的要素E $(".blogbody:not(blogbody_even)
E[@attr] 有指定屬性的要素E $("a[@href]) 找出所有的<a href="...">")
E[@attr=value] 屬性的值完全相同的要素E $("h3[@class=hdr]")
E[@attr^=value] 屬性的值以value開頭的要素E $("a[@href^=http://blog.xuite.net]")
E[@attr$=value] 屬性的值以value結尾的要素E $("a[@href$=.pdf]")
E[@attr*=value] 屬性的值含有value的要素E $("a[@href*=xuite.net]")
E[@attr1=value1]
[@attr2=value2
選取條件同時成立的要素E
  • E + F 範例:
 h2 + * { color:green } /*所有緊隨 h2 的要素内的文字皆為紅色 */
 h1 + p { border-top: 3px solid #f60; }
  • HTML原始碼(標題會套用h1 + p):
<h1>標題</h1>
<p>段落 A</p>
<p>段落 B</p>
<p>段落 C</p>

自訂的選擇器

樣 式 說明 範例
:even 要素的偶數項 $("tbody tr:even").addClass("even")
:odd 要素的奇數項 $("tbody tr:odd").addClass("odd")
:eq(N) 第N項的要素 $("div.blogbody:eq(0)") 選第一篇文章
:gt(N) 大於第N項的要素 $("div.blogbody:gt(3)") 選第五篇(由0起算)~第十篇的文章(假設首頁只有十篇)
:lt(N) 小於第N項的要素 $("div.blogbody:lt(3)") 選第一篇至第三篇文章
:first 等於:eq(0),第一個要素 $("div.blogbody:first') 選第一篇文章
:last 最後的要素 $("div.blogbody:last") 第十篇文章
:parent 選取自己是父代的要素 $("div.blogbody:parent") 有子要素的文章會被選取
:contains("text") 選取含有指定文字的要素 $("div.title:contains('jQuery')") 找出有jQuery字串的標題
:visible 有呈現出的要素  
:hidden 隱藏了的要素  

表單的選擇器

樣 式 說明 範例
:input 選取所有的輸入要素,包含input、select、textara、 button等 $("#form1 :input")
:text 選取<input type="text">的要素  
:password 選取<input type="password">的要素  
:radio 選取<input type="radio">的要素  
:checkbox 選取<input type="checkbox">的要素  
:submit 選取<input type="submit">的要素  
:image 選取<input type="image">的要素  
:reset 選取<input type="reset">的要素  
:button 選取<input type="button">的要素  
:reset 選取<input type="reset">的要素  
:file 選取<input type="file">的要素  
  • 表單和選擇器之間至少要空一格,如: $("#fom1 :button")會生效,$("#form1:button")則無法運作

參考:http://docs.jquery.com/DOM/Traversing/Selectors#CSS_Selectors

表單和選擇器之間至少要空一格,如: $("#fom1 :button")會生效,$("#form1:button")則無法運作

這點要補充一下

$("#fom1 :button")是指button,且被id為form1的東西包著

$("#form1:button")是指id為form1的button

那空格是十分重要的

END
F B 留 言 版

留言結束請重新整理網頁顯示留言
相 關 文 章
同 群 組 其 他 文 章
隨 機 文 章
精讚部落版權所有(c) JinZan Blog http://n.zipko.info Author axer@tc.edu.tw. 最佳瀏器為Firefox,本網頁不支援IE6。[文章分類及列表]
本站最佳瀏覽解析度1024x768 網站建置 2009.11