jQuery 选择器
jQuery 选择器
请使用我们的 jQuery 选择器检测器 �演示��的选择器。
| 选择器 | 实例 | 选� |
|---|---|---|
| * | $("*") | æ‰€æœ‰å…ƒç´ |
| #id | $("#lastname") | id="lastname" çš„å…ƒç´ |
| .class | $(".intro") | class="intro" çš„æ‰€æœ‰å…ƒç´ |
| .class,.class | $(".intro,.demo") | class 为 "intro" 或 "demo" çš„æ‰€æœ‰å…ƒç´ |
| element | $("p") | 所有 <p> å…ƒç´ |
| el1,el2,el3 | $("h1,div,p") | 所有 <h1>ã€�<div> å’Œ <p> å…ƒç´ |
| :first | $("p:first") | 第一个 <p> å…ƒç´ |
| :last | $("p:last") | 最å�Žä¸€ä¸ª <p> å…ƒç´ |
| :even | $("tr:even") | 所有å�¶æ•° <tr> å…ƒç´ ï¼Œç´¢å¼•å€¼ä»Ž 0 å¼€å§‹ï¼Œç¬¬ä¸€ä¸ªå…ƒç´ æ˜¯å�¶æ•° (0)ï¼Œç¬¬äºŒä¸ªå…ƒç´ æ˜¯å¥‡æ•° (1),以æ¤ç±»æŽ¨ã€‚ |
| :odd | $("tr:odd") | 所有奇数 <tr> å…ƒç´ ï¼Œç´¢å¼•å€¼ä»Ž 0 å¼€å§‹ï¼Œç¬¬ä¸€ä¸ªå…ƒç´ æ˜¯å�¶æ•° (0)ï¼Œç¬¬äºŒä¸ªå…ƒç´ æ˜¯å¥‡æ•° (1),以æ¤ç±»æŽ¨ã€‚ |
| :first-child | $("p:first-child") | å±žäºŽå…¶çˆ¶å…ƒç´ çš„ç¬¬ä¸€ä¸ªå�å…ƒç´ çš„æ‰€æœ‰ <p> å…ƒç´ |
| :first-of-type | $("p:first-of-type") | å±žäºŽå…¶çˆ¶å…ƒç´ çš„ç¬¬ä¸€ä¸ª <p> å…ƒç´ çš„æ‰€æœ‰ <p> å…ƒç´ |
| :last-child | $("p:last-child") | å±žäºŽå…¶çˆ¶å…ƒç´ çš„æœ€å�Žä¸€ä¸ªå�å…ƒç´ çš„æ‰€æœ‰ <p> å…ƒç´ |
| :last-of-type | $("p:last-of-type") | å±žäºŽå…¶çˆ¶å…ƒç´ çš„æœ€å�Žä¸€ä¸ª <p> å…ƒç´ çš„æ‰€æœ‰ <p> å…ƒç´ |
| :nth-child(n) | $("p:nth-child(2)") | å±žäºŽå…¶çˆ¶å…ƒç´ çš„ç¬¬äºŒä¸ªå�å…ƒç´ çš„æ‰€æœ‰ <p> å…ƒç´ |
| :nth-last-child(n) | $("p:nth-last-child(2)") | å±žäºŽå…¶çˆ¶å…ƒç´ çš„ç¬¬äºŒä¸ªå�å…ƒç´ çš„æ‰€æœ‰ <p> å…ƒç´ ï¼Œä»Žæœ€å�Žä¸€ä¸ªå�å…ƒç´ å¼€å§‹è®¡æ•° |
| :nth-of-type(n) | $("p:nth-of-type(2)") | å±žäºŽå…¶çˆ¶å…ƒç´ çš„ç¬¬äºŒä¸ª <p> å…ƒç´ çš„æ‰€æœ‰ <p> å…ƒç´ |
| :nth-last-of-type(n) | $("p:nth-last-of-type(2)") | å±žäºŽå…¶çˆ¶å…ƒç´ çš„ç¬¬äºŒä¸ª <p> å…ƒç´ çš„æ‰€æœ‰ <p> å…ƒç´ ï¼Œä»Žæœ€å�Žä¸€ä¸ªå�å…ƒç´ å¼€å§‹è®¡æ•° |
| :only-child | $("p:only-child") | å±žäºŽå…¶çˆ¶å…ƒç´ çš„å”¯ä¸€å�å…ƒç´ çš„æ‰€æœ‰ <p> å…ƒç´ |
| :only-of-type | $("p:only-of-type") | å±žäºŽå…¶çˆ¶å…ƒç´ çš„ç‰¹å®šç±»åž‹çš„å”¯ä¸€å�å…ƒç´ çš„æ‰€æœ‰ <p> å…ƒç´ |
| parent > child | $("div > p") | <div> å…ƒç´ çš„ç›´æŽ¥å�å…ƒç´ çš„æ‰€æœ‰ <p> å…ƒç´ |
| parent descendant | $("div p") | <div> å…ƒç´ çš„å�Žä»£çš„æ‰€æœ‰ <p> å…ƒç´ |
| element + next | $("div + p") | æ¯�个 <div> å…ƒç´ ç›¸é‚»çš„ä¸‹ä¸€ä¸ª <p> å…ƒç´ |
| element ~ siblings | $("div ~ p") | <div> å…ƒç´ å�Œçº§çš„æ‰€æœ‰ <p> å…ƒç´ |
| :eq(index) | $("ul li:eq(3)") | 列表ä¸çš„ç¬¬å››ä¸ªå…ƒç´ ï¼ˆindex 值从 0 开始) |
| :gt(no) | $("ul li:gt(3)") | 列举 index 大于 3 çš„å…ƒç´ |
| :lt(no) | $("ul li:lt(3)") | 列举 index å°�于 3 çš„å…ƒç´ |
| :not(selector) | $("input:not(:empty)") | 所有ä¸�ä¸ºç©ºçš„è¾“å…¥å…ƒç´ |
| :header | $(":header") | æ‰€æœ‰æ ‡é¢˜å…ƒç´ <h1>, <h2> ... |
| :animated | $(":animated") | æ‰€æœ‰åŠ¨ç”»å…ƒç´ |
| :focus | $(":focus") | 当å‰�å…·æœ‰ç„¦ç‚¹çš„å…ƒç´ |
| :contains(text) | $(":contains('Hello')") | 所有包å�«æ–‡æœ¬ "Hello" çš„å…ƒç´ |
| :has(selector) | $("div:has(p)") | 所有包å�«æœ‰ <p> å…ƒç´ åœ¨å…¶å†…çš„ <div> å…ƒç´ |
| :empty | $(":empty") | æ‰€æœ‰ç©ºå…ƒç´ |
| :parent | $(":parent") | 匹é…�所有å�«æœ‰å�å…ƒç´ æˆ–è€…æ–‡æœ¬çš„çˆ¶å…ƒç´ ã€‚ |
| :hidden | $("p:hidden") | 所有éš�è—�çš„ <p> å…ƒç´ |
| :visible | $("table:visible") | 所有å�¯è§�çš„è¡¨æ ¼ |
| :root | $(":root") | æ–‡æ¡£çš„æ ¹å…ƒç´ |
| :lang(language) | $("p:lang(de)") | 所有 lang 属性值为 "de" çš„ <p> å…ƒç´ |
| [attribute] | $("[href]") | 所有带有 href å±žæ€§çš„å…ƒç´ |
| [attribute=value] | $("[href='default.htm']") | 所有带有 href 属性且值ç‰äºŽ "default.htm" çš„å…ƒç´ |
| [attribute!=value] | $("[href!='default.htm']") | 所有带有 href 属性且值ä¸�ç‰äºŽ "default.htm" çš„å…ƒç´ |
| [attribute$=value] | $("[href$='.jpg']") | 所有带有 href 属性且值以 ".jpg" ç»“å°¾çš„å…ƒç´ |
| [attribute|=value] | $("[title|='Tomorrow']") | 所有带有 title 属性且值ç‰äºŽ 'Tomorrow' 或者以 'Tomorrow' å�Žè·Ÿè¿žæŽ¥ç¬¦ä½œä¸ºå¼€å¤´çš„å—符串 |
| [attribute^=value] | $("[title^='Tom']") | 所有带有 title 属性且值以 "Tom" å¼€å¤´çš„å…ƒç´ |
| [attribute~=value] | $("[title~='hello']") | 所有带有 title 属性且值包å�«å�•è¯� "hello" çš„å…ƒç´ |
| [attribute*=value] | $("[title*='hello']") | 所有带有 title 属性且值包å�«å—符串 "hello" çš„å…ƒç´ |
| [name=value][name2=value2] | $( "input[id][name$='man']" ) | 带有 id 属性,并且 name 属性以 man 结尾的输入框 |
| :input | $(":input") | 所有 input å…ƒç´ |
| :text | $(":text") | 所有带有 type="text" çš„ input å…ƒç´ |
| :password | $(":password") | 所有带有 type="password" çš„ input å…ƒç´ |
| :radio | $(":radio") | 所有带有 type="radio" çš„ input å…ƒç´ |
| :checkbox | $(":checkbox") | 所有带有 type="checkbox" çš„ input å…ƒç´ |
| :submit | $(":submit") | 所有带有 type="submit" çš„ input å…ƒç´ |
| :reset | $(":reset") | 所有带有 type="reset" çš„ input å…ƒç´ |
| :button | $(":button") | 所有带有 type="button" çš„ input å…ƒç´ |
| :image | $(":image") | 所有带有 type="image" çš„ input å…ƒç´ |
| :file | $(":file") | 所有带有 type="file" çš„ input å…ƒç´ |
| :enabled | $(":enabled") | 所有å�¯ç”¨çš„å…ƒç´ |
| :disabled | $(":disabled") | 所有ç¦�ç”¨çš„å…ƒç´ |
| :selected | $(":selected") | æ‰€æœ‰é€‰å®šçš„ä¸‹æ‹‰åˆ—è¡¨å…ƒç´ |
| :checked | $(":checked") | 所有选ä¸çš„å¤�选框选项 |
| .selector | $(selector).selector | 在jQuery 1.7ä¸å·²ç»�ä¸�被赞æˆ�ä½¿ç”¨ã€‚è¿”å›žä¼ ç»™jQuery()的原始选择器 |
| :target | $( "p:target" ) | 选择器将选ä¸IDå’ŒURIä¸ä¸€ä¸ªæ ¼å¼�åŒ–çš„æ ‡è¯†ç¬¦ç›¸åŒ¹é…�çš„<p>å…ƒç´ |
斯特
491***076@qq.com
1.基本选择器
$("#id") //ID选择器 $("div") //å…ƒç´ é€‰æ‹©å™¨ $(".classname") //类选择器 $(".classname,.classname1,#id1") //组å�ˆé€‰æ‹©å™¨2.层次选择器
$("#id>.classname ") //å�å…ƒç´ é€‰æ‹©å™¨ $("#id .classname ") //å�Žä»£å…ƒç´ 选择器 $("#id + .classname ") //ç´§é‚»ä¸‹ä¸€ä¸ªå…ƒç´ é€‰æ‹©å™¨ $("#id ~ .classname ") //å…„å¼Ÿå…ƒç´ é€‰æ‹©å™¨3.过滤选择器(é‡�点)
$("li:first") //第一个li $("li:last") //最å�Žä¸€ä¸ªli $("li:even") //æŒ‘é€‰ä¸‹æ ‡ä¸ºå�¶æ•°çš„li $("li:odd") //æŒ‘é€‰ä¸‹æ ‡ä¸ºå¥‡æ•°çš„li $("li:eq(4)") //ä¸‹æ ‡ç‰äºŽ 4 çš„li(第五个 li å…ƒç´ ) $("li:gt(2)") //ä¸‹æ ‡å¤§äºŽ 2 çš„li $("li:lt(2)") //ä¸‹æ ‡å°�于 2 çš„li $("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li3.2内容过滤选择器
$("div:contains('Runob')") // 包å�« Runobæ–‡æœ¬çš„å…ƒç´ $("td:empty") //ä¸�包å�«å�å…ƒç´ æˆ–è€…æ–‡æœ¬çš„ç©ºå…ƒç´ $("div:has(selector)") //å�«æœ‰é€‰æ‹©å™¨æ‰€åŒ¹é…�çš„å…ƒç´ $("td:parent") //å�«æœ‰å�å…ƒç´ æˆ–è€…æ–‡æœ¬çš„å…ƒç´3.3å�¯è§�性过滤选择器
$("li:hidden") //匹é…�所有ä¸�å�¯è§�å…ƒç´ ï¼Œæˆ–type为hiddençš„å…ƒç´ $("li:visible") //匹é…�所有å�¯è§�å…ƒç´3.4属性过滤选择器
$("div[id]") //所有å�«æœ‰ id 属性的 div å…ƒç´ $("div[id='123']") // id属性值为123çš„div å…ƒç´ $("div[id!='123']") // id属性值ä¸�ç‰äºŽ123çš„div å…ƒç´ $("div[id^='qq']") // id属性值以qq开头的div å…ƒç´ $("div[id$='zz']") // id属性值以zz结尾的div å…ƒç´ $("div[id*='bb']") // id属性值包å�«bbçš„div å…ƒç´ $("input[id][name$='man']") //多属性选过滤,å�Œæ—¶æ»¡è¶³ä¸¤ä¸ªå±žæ€§çš„æ�¡ä»¶çš„å…ƒç´3.5状æ€�过滤选择器
$("input:enabled") // 匹é…�å�¯ç”¨çš„ input $("input:disabled") // 匹é…�ä¸�å�¯ç”¨çš„ input $("input:checked") // 匹é…�选ä¸çš„ input $("option:selected") // 匹é…�选ä¸çš„ option4.表å�•选择器
$(":input") //匹é…�所有 input, textarea, select å’Œ button å…ƒç´ $(":text") //所有的å�•行文本框,$(":text") ç‰ä»·äºŽ$("[type=text]"),推è��使用$("input:text")效率更高,下å�Œ $(":password") //所有密ç �框 $(":radio") //所有å�•选按钮 $(":checkbox") //所有å¤�选框 $(":submit") //所有æ��交按钮 $(":reset") //所有é‡�置按钮 $(":button") //所有button按钮 $(":file") //所有文件域斯特
491***076@qq.com