“JQuery 选择器”的版本间差异

本页内容
上一节: JQuery_实例 下一节: JQuery_事件方法
（创建页面，内容为“{{DISPLAYTITLE:jQuery 选择器}}5 = jQuery 选择器 = jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 == jQuery 选择器 == jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一…”）
 
Neo（讨论 | 贡献）
无编辑摘要
 
第1行： 第1行：
{{DISPLAYTITLE:jQuery 选择器}}[[Category:jQuery 教程|5]]
{{DISPLAYTITLE:jQuery 选择器}}[[Category:jQuery 教程|32]]
= jQuery 选择器 =
= jQuery 选择器 =
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。


== jQuery 选择器 ==
== jQuery 选择器 ==


jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
请使用我们的 [[trysel.php|jQuery 选择器检测器]] 来演示不同的选择器。
 
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 [[css selectors|CSS 选择器]]，除此之外，它还有一些自定义的选择器。
 
jQuery 中所有选择器都以美元符号开头：$()。
 
== 元素选择器 ==
 
jQuery 元素选择器基于元素名选取元素。
 
在页面中选取所有 <p> 元素:
 
$("p")
 
'''实例'''
 
用户点击按钮后，所有 <p> 元素都隐藏：
 
<sample title="" desc="" lang="html" hererun="1">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</sample>
<run name=""> <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小白教程(xiaobai.wang)</title>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>
 
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html> </run>
 
== #id 选择器 ==
 
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
 
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
 
通过 id 选取元素语法如下：
 
$(&quot;#test&quot;)
 
'''实例'''
 
当用户点击按钮后，有 id=&quot;test&quot; 属性的元素将被隐藏：
 
<sample title="" desc="" lang="html" hererun="1">
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</sample>
<run name=""> <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小白教程(xiaobai.wang)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>
</head>
 
<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落</p>
<button>点我</button>
</body>
 
</html> </run>
 
== .class 选择器 ==
 
jQuery 类选择器可以通过指定的 class 查找元素。
 
语法如下：
 
$(&quot;.test&quot;)
 
'''实例'''
 
用户点击按钮后所有带有 class=&quot;test&quot; 属性的元素都隐藏：
 
<sample title="" desc="" lang="html" hererun="1">
$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});
</sample>
<run name=""> <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小白教程(xiaobai.wang)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});
</script>
</head>
<body>
 
<h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>
</body>
</html> </run>
== 更多实例 ==


{| class="table table-striped table-hover"
{| class="table table-striped table-hover"
! 语法
! 选择器
! 描述
! 实例
! 实例
! 选取
|-
|-
| [[jq sel all|*]]
| $(&quot;*&quot;)
| $(&quot;*&quot;)
| 选取所有元素
| 所有元素
| [[try.php?filename=tryjquery_sel_all2|在线实例]]
|-
| [[jq sel id|#id]]
| $(&quot;#lastname&quot;)
| id=&quot;lastname&quot; 的元素
|-
| [[jq sel class|.class]]
| $(&quot;.intro&quot;)
| class=&quot;intro&quot; 的所有元素
|-
| [[sel multiple classes|.class,.class]]
| $(&quot;.intro,.demo&quot;)
| class 为 &quot;intro&quot; 或 &quot;demo&quot; 的所有元素
|-
| [[jq sel element|element]]
| $(&quot;p&quot;)
| 所有 &lt;p&gt; 元素
|-
|-
| $(this)
| [[sel multiple elements|el1,el2,el3]]
| 选取当前 HTML 元素
| $(&quot;h1,div,p&quot;)
| [[try.php?filename=tryjquery_sel_this|在线实例]]
| 所有 &lt;h1&gt;、&lt;div&gt; 和 &lt;p&gt; 元素
|-
|-
| $(&quot;p.intro&quot;)
|
| 选取 class 为 intro 的 &lt;p&gt; 元素
|
| [[try.php?filename=tryjquery_sel_pclass|在线实例]]
|
|-
|-
| [[sel first|:first]]
| $(&quot;p:first&quot;)
| $(&quot;p:first&quot;)
| 选取第一个 &lt;p&gt; 元素
| 第一个 &lt;p&gt; 元素
| [[try.php?filename=tryjquery_sel_pfirst|在线实例]]
|-
| [[sel last|:last]]
| $(&quot;p:last&quot;)
| 最后一个 &lt;p&gt; 元素
|-
| [[sel even|:even]]
| $(&quot;tr:even&quot;)
| 所有偶数 &lt;tr&gt; 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。
|-
| [[sel odd|:odd]]
| $(&quot;tr:odd&quot;)
| 所有奇数 &lt;tr&gt; 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。
|-
|
|
|
|-
| [[jq sel firstchild|:first-child]]
| $(&quot;p:first-child&quot;)
| 属于其父元素的第一个子元素的所有 &lt;p&gt; 元素
|-
| [[sel firstoftype|:first-of-type]]
| $(&quot;p:first-of-type&quot;)
| 属于其父元素的第一个 &lt;p&gt; 元素的所有 &lt;p&gt; 元素
|-
| [[sel lastchild|:last-child]]
| $(&quot;p:last-child&quot;)
| 属于其父元素的最后一个子元素的所有 &lt;p&gt; 元素
|-
| [[sel lastoftype|:last-of-type]]
| $(&quot;p:last-of-type&quot;)
| 属于其父元素的最后一个 &lt;p&gt; 元素的所有 &lt;p&gt; 元素
|-
| [[sel nthchild|:nth-child(n)]]
| $(&quot;p:nth-child(2)&quot;)
| 属于其父元素的第二个子元素的所有 &lt;p&gt; 元素
|-
| [[sel nthlastchild|:nth-last-child(n)]]
| $(&quot;p:nth-last-child(2)&quot;)
| 属于其父元素的第二个子元素的所有 &lt;p&gt; 元素，从最后一个子元素开始计数
|-
| [[sel nthoftype|:nth-of-type(n)]]
| $(&quot;p:nth-of-type(2)&quot;)
| 属于其父元素的第二个 &lt;p&gt; 元素的所有 &lt;p&gt; 元素
|-
| [[sel nthlastoftype|:nth-last-of-type(n)]]
| $(&quot;p:nth-last-of-type(2)&quot;)
| 属于其父元素的第二个 &lt;p&gt; 元素的所有 &lt;p&gt; 元素，从最后一个子元素开始计数
|-
| [[sel onlychild|:only-child]]
| $(&quot;p:only-child&quot;)
| 属于其父元素的唯一子元素的所有 &lt;p&gt; 元素
|-
| [[sel onlyoftype|:only-of-type]]
| $(&quot;p:only-of-type&quot;)
| 属于其父元素的特定类型的唯一子元素的所有 &lt;p&gt; 元素
|-
|
|
|
|-
| [[sel parent child|parent &gt; child]]
| $(&quot;div &gt; p&quot;)
| &lt;div&gt; 元素的直接子元素的所有 &lt;p&gt; 元素
|-
| [[sel parent descendant|parent descendant]]
| $(&quot;div p&quot;)
| &lt;div&gt; 元素的后代的所有 &lt;p&gt; 元素
|-
| [[sel previous next|element + next]]
| $(&quot;div + p&quot;)
| 每个 &lt;div&gt; 元素相邻的下一个 &lt;p&gt; 元素
|-
| [[sel previous siblings|element ~ siblings]]
| $(&quot;div ~ p&quot;)
| &lt;div&gt; 元素同级的所有 &lt;p&gt; 元素
|-
|
|
|
|-
| [[sel eq|:eq(index)]]
| $(&quot;ul li:eq(3)&quot;)
| 列表中的第四个元素（index 值从 0 开始）
|-
| [[sel gt|:gt(no)]]
| $(&quot;ul li:gt(3)&quot;)
| 列举 index 大于 3 的元素
|-
| [[sel lt|:lt(no)]]
| $(&quot;ul li:lt(3)&quot;)
| 列举 index 小于 3 的元素
|-
| [[jq sel not|:not(selector)]]
| $(&quot;input:not(:empty)&quot;)
| 所有不为空的输入元素
|-
|
|
|
|-
| [[sel header|:header]]
| $(&quot;:header&quot;)
| 所有标题元素 &lt;h1&gt;, &lt;h2&gt; ...
|-
| [[sel animated|:animated]]
| $(&quot;:animated&quot;)
| 所有动画元素
|-
| [[jq sel focus|:focus]]
| $(&quot;:focus&quot;)
| 当前具有焦点的元素
|-
| [[sel contains|:contains(text)]]
| $(&quot;:contains('Hello')&quot;)
| 所有包含文本 &quot;Hello&quot; 的元素
|-
| [[sel has|:has(selector)]]
| $(&quot;div:has(p)&quot;)
| 所有包含有 &lt;p&gt; 元素在其内的 &lt;div&gt; 元素
|-
| [[jq sel empty|:empty]]
| $(&quot;:empty&quot;)
| 所有空元素
|-
| [[sel parent|:parent]]
| $(&quot;:parent&quot;)
| 匹配所有含有子元素或者文本的父元素。
|-
| [[sel hidden|:hidden]]
| $(&quot;p:hidden&quot;)
| 所有隐藏的 &lt;p&gt; 元素
|-
| [[sel visible|:visible]]
| $(&quot;table:visible&quot;)
| 所有可见的表格
|-
| [[jq sel root|:root]]
| $(&quot;:root&quot;)
| 文档的根元素
|-
|-
| $(&quot;ul li:first&quot;)
| [[jq sel lang|:lang(language)]]
| 选取第一个 &lt;ul&gt; 元素的第一个 &lt;li&gt; 元素
| $(&quot;p:lang(de)&quot;)
| [[try.php?filename=tryjquery_sel_ullifirst|在线实例]]
| 所有 lang 属性值为 &quot;de&quot; 的 &lt;p&gt; 元素
|-
|-
| $(&quot;ul li:first-child&quot;)
|
| 选取每个 &lt;ul&gt; 元素的第一个 &lt;li&gt; 元素
|
| [[try.php?filename=tryjquery_sel_ullifirstchild|在线实例]]
|
|-
|-
| [[jq sel attribute|[attribute]]]
| $(&quot;[href]&quot;)
| $(&quot;[href]&quot;)
| 选取带有 href 属性的元素
| 所有带有 href 属性的元素
| [[try.php?filename=tryjquery_sel_hrefattr|在线实例]]
|-
| [[sel attribute equal value|[attribute=value]]]
| $(&quot;[href='default.htm']&quot;)
| 所有带有 href 属性且值等于 &quot;default.htm&quot; 的元素
|-
| [[sel attribute notequal value|[attribute!=value]]]
| $(&quot;[href!='default.htm']&quot;)
| 所有带有 href 属性且值不等于 &quot;default.htm&quot; 的元素
|-
| [[sel attribute end value|[attribute$=value]]]
| $(&quot;[href$='.jpg']&quot;)
| 所有带有 href 属性且值以 &quot;.jpg&quot; 结尾的元素
|-
| [[sel attribute prefix value|[attribute|=value]]]
| $(&quot;[title|='Tomorrow']&quot;)
| 所有带有 title 属性且值等于 'Tomorrow' 或者以 'Tomorrow' 后跟连接符作为开头的字符串
|-
| [[sel attribute beginning value|[attribute^=value]]]
| $(&quot;[title^='Tom']&quot;)
| 所有带有 title 属性且值以 &quot;Tom&quot; 开头的元素
|-
| [[sel attribute contains value|[attribute~=value]]]
| $(&quot;[title~='hello']&quot;)
| 所有带有 title 属性且值包含单词 &quot;hello&quot; 的元素
|-
| [[sel attribute contains string value|[attribute*=value]]]
| $(&quot;[title*='hello']&quot;)
| 所有带有 title 属性且值包含字符串 &quot;hello&quot; 的元素
|-
| [[sel multipleattribute equal value|[name=value][name2=value2]]]
| $( &quot;input[id][name$='man']&quot; )
| 带有 id 属性，并且 name 属性以 man 结尾的输入框
|-
| 
| 
| 
|-
| [[sel input|:input]]
| $(&quot;:input&quot;)
| 所有 input 元素
|-
| [[sel input text|:text]]
| $(&quot;:text&quot;)
| 所有带有 type=&quot;text&quot; 的 input 元素
|-
| [[sel input password|:password]]
| $(&quot;:password&quot;)
| 所有带有 type=&quot;password&quot; 的 input 元素
|-
| [[sel input radio|:radio]]
| $(&quot;:radio&quot;)
| 所有带有 type=&quot;radio&quot; 的 input 元素
|-
| [[sel input checkbox|:checkbox]]
| $(&quot;:checkbox&quot;)
| 所有带有 type=&quot;checkbox&quot; 的 input 元素
|-
|-
| $(&quot;a[target='_blank']&quot;)
| [[sel input submit|:submit]]
| 选取所有 target 属性值等于 &quot;_blank&quot; 的 &lt;a&gt; 元素
| $(&quot;:submit&quot;)
| [[try.php?filename=tryjquery_sel_hrefattrblank|在线实例]]
| 所有带有 type=&quot;submit&quot; 的 input 元素
|-
|-
| $(&quot;a[target!='_blank']&quot;)
| [[sel input reset|:reset]]
| 选取所有 target 属性值不等于 &quot;_blank&quot; 的 &lt;a&gt; 元素
| $(&quot;:reset&quot;)
| [[try.php?filename=tryjquery_sel_hrefattrnotblank|在线实例]]
| 所有带有 type=&quot;reset&quot; 的 input 元素
|-
|-
| [[sel input button|:button]]
| $(&quot;:button&quot;)
| $(&quot;:button&quot;)
| 选取所有 type=&quot;button&quot; 的 &lt;input&gt; 元素 和 &lt;button&gt; 元素
| 所有带有 type=&quot;button&quot; 的 input 元素
| [[try.php?filename=tryjquery_sel_button2|在线实例]]
|-
| [[sel input image|:image]]
| $(&quot;:image&quot;)
| 所有带有 type=&quot;image&quot; 的 input 元素
|-
| [[sel input file|:file]]
| $(&quot;:file&quot;)
| 所有带有 type=&quot;file&quot; 的 input 元素
|-
| [[sel input enabled|:enabled]]
| $(&quot;:enabled&quot;)
| 所有启用的元素
|-
| [[sel input disabled|:disabled]]
| $(&quot;:disabled&quot;)
| 所有禁用的元素
|-
| [[sel input selected|:selected]]
| $(&quot;:selected&quot;)
| 所有选定的下拉列表元素
|-
| [[sel input checked|:checked]]
| $(&quot;:checked&quot;)
| 所有选中的复选框选项
|-
|-
| $(&quot;tr:even&quot;)
| .selector
| 选取偶数位置的 &lt;tr&gt; 元素
| $(selector).selector
| [[try.php?filename=tryjquery_sel_even|在线实例]]
| 在jQuery 1.7中已经不被赞成使用。返回传给jQuery()的原始选择器
|-
|-
| $(&quot;tr:odd&quot;)
| [[jq sel target|:target]]
| 选取奇数位置的 &lt;tr&gt; 元素
| $( &quot;p:target&quot; )
| [[try.php?filename=tryjquery_sel_odd|在线实例]]
| 选择器将选中ID和URI中一个格式化的标识符相匹配的&lt;p&gt;元素
|}
|}
== 独立文件中使用 jQuery 函数 ==
如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。
当我们在教程中演示 jQuery 时，会将函数直接添加到 &lt;head&gt; 部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过 src 属性来引用文件）：
<sample title="" desc="" lang="html" hererun="1">
<head>
<script src="http://cdn.static.xiaobai.wang/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>
</sample>

2022年8月19日 (五) 11:37的最新版本

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] ='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>元素
取自“https://www.xiaobai.wang/index.php?title=JQuery_选择器&oldid=5260”
上一节: JQuery_实例 下一节: JQuery_事件方法
此页面最后编辑于2022年8月19日 (星期五) 11:37。