jQuery选择器 jQuery选择器|jQuery

本文概述

$()工厂函数
如何使用选择器
不同的jQuery选择器

jQuery选择器用于选择和操作HTML元素。它们是jQuery库的重要组成部分。
使用jQuery选择器, 你可以根据其ID, 类, 属性, 类型以及DOM中的更多内容来查找或选择HTML元素。
简而言之, 你可以说选择器用于使用jQuery选择一个或多个HTML元素, 并且一旦选择了元素, 就可以对它执行各种操作。
所有jQuery选择器都以美元符号和括号开头, 例如$()。它被称为工厂功能。
$()工厂函数每个jQuery选择器都以$()开头。此标志称为出厂功能。它在选择给定文档中的元素时使用了三个基本构建块。

S.No.	选择器	描述
1)	标签名称：	它表示DOM中可用的标记名称。例如：$（’ p’ ）选择文档中的所有段落’ p’ 。
2)	Tag ID:	它代表DOM中具有特定ID的可用标记。例如：$（’ ＃real-id’ ）在文档中选择ID为real-id的特定元素。
3)	Tag Class:	它表示DOM中特定类可用的标记。例如：$（’ real-class’ ）选择文档中所有具有real-class类的元素。

让我们以一个简单的示例来看一下Tag选择器的用法。这将选择所有带有标签名称的元素
并且背景颜色设置为“粉红色”。
档案：firstjquery.html

< !DOCTYPE html> < html> < head> < title> First jQuery Example< /title> < script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> < /script> < script type="text/javascript" language="javascript"> $(document).ready(function() { $("p").css("background-color", "pink"); }); < /script> < /head> < body> < p> This is first paragraph.< /p> < p> This is second paragraph.< /p> < p> This is third paragraph.< /p> < /body> < /html>

立即测试
输出：
这是第一段。
【jQuery选择器】这是第二段。
这是第三段。
注意：1.上述所有选择器均可单独使用, 也可与其他选择器组合使用。注意：2.如果在任何JavaScript库中使用美元符号$都存在冲突, 则可以使用jQuery()函数代替工厂函数$()。工厂函数$()和jQuery函数是相同的。如何使用选择器jQuery选择器可以单独使用, 也可以与其他选择器结合使用。使用jQuery时, 每个步骤都需要它们。它们用于从HTML文档中选择所需的确切元素。

S.No.	选择器	描述
1)	Name:	它选择与给定元素名称匹配的所有元素。
2)	#ID:	它选择一个与给定id匹配的元素。
3)	。类：	它选择与给定类匹配的所有元素。
4)	Universal(*)	它选择DOM中所有可用的元素。
5)	多个元素A, B, C	它选择所有指定选择器A, B和C的合并结果。

不同的jQuery选择器

选择器	例	描述
*	$(“ *” )	用于选择所有元素。
#id	$(“ #firstname” )	它将选择id =“ firstname”的元素
.class	$（“。primary”）	它将选择所有具有class =“ primary”的元素
类	$（“。primary, .secondary”）	它将选择“ primary”或“ secondary”类的所有元素
element	$(“ p” )	它将选择所有p元素。
el1, el2, el3	$（“ h1, div, p”）	它将选择所有h1, div和p元素。
:first	$(“ p:first” )	这将选择第一个p元素
:last	$(“ p:last” )	这将选择他的最后一个p元素
:even	$(“ tr:even” )	这将选择所有偶数tr元素
:odd	$(“ tr:odd” )	这将选择所有奇数tr元素
: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元素, 这些元素是其类型的唯一子项, 其父项
父母> 孩子	$（“ div> p”）	它将选择所有div元素的直接子元素
parent descendant	$(“ div p” )	它将选择所有div元素的后代元素
元素+下一个	$（“ div + p”）	它选择每个div元素旁边的p元素
元素?兄弟姐妹	$（“ div?p”）	它选择所有div元素的兄弟元素
:eq(index)	$（“ ul li：eq（3）”）	It will select the fourth element in a list (index starts at 0)
:gt(no)	$（“ ul li：gt（3）”）	选择索引大于3的列表元素
:lt(no)	$(“ ul li:lt(3)” )	选择索引小于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)” )	选择所有以“ de”开头的lang属性值的p元素
[attribute]	$(“ [href]” )	选择所有具有href属性的元素
[attribute=value]	$(“ [href=http://www.srcmini.com/’ default.htm’ ]” )	选择所有href属性值等于“ default.htm”的元素
[attribute!=value]	$（“ [href！=’ default.htm’ ]”）	它将选择所有href属性值不等于“ default.htm”的元素
[attribute$=value]	$(“ [href$=’ .jpg’ ]” )	它将选择所有href属性值为“ .jpg”结尾的元素
[attribute\|=value]	$(“ [title\|=’ Tomorrow’ ]” )	选择所有标题属性值等于“ Tomorrow”的元素, 或者以“ Tomorrow”开头且后跟连字符的元素
[attribute^=value]	$(“ [title^=’ Tom’ ]” )	选择所有标题属性值以“ Tom”开头的元素
[attribute~=value]	$(“ [title~=’ hello’ ]” )	选择标题属性值包含特定单词“ hello”的所有元素
[attribute*=value]	$(“ [title*=’ hello’ ]” )	选择标题属性值包含单词“ hello”的所有元素
:input	$(“ :input” )	它将选择所有输入元素
:text	$(“ :text” )	它将选择所有类型为type =“ text”的输入元素
:password	$(“ :password” )	它将选择所有类型为type =“ password”的输入元素
:radio	$(“ :radio” )	它将选择所有类型为“ radio”的输入元素
:checkbox	$(“ :checkbox” )	它将选择所有类型为“复选框”的输入元素
:submit	$(“ :submit” )	它将选择所有类型为“ submit”的输入元素
:reset	$(“ :reset” )	它将选择所有类型为“ reset”的输入元素
:button	$(“ :button” )	它将选择所有类型为“ button”的输入元素
:image	$(“ :image” )	它将选择所有类型为“ image”的输入元素
:file	$(“ :file” )	它将选择type =“ file”的所有输入元素
:enabled	$(“ :enabled” )	选择所有启用的输入元素
:disabled	$(“ :disabled” )	它将选择所有禁用的输入元素
:selected	$(“ :selected” )	它将选择所有选定的输入元素
:checked	$(“ :checked” )	它将选择所有选中的输入元素