目录
  1. WIKI教程
  2. 学习jQuery
  3. jQuery - 选择器( Selectors)

jQuery - 选择器( Selectors)

jQuery库利用层叠样式表（CSS）选择器的强大功能，让我们可以快速轻松地访问文档对象模型（DOM）中的元素或元素组。

jQuery Selector是一个函数，它使用表达式根据给定的条件从DOM中找出匹配的元素。 简单地说，选择器用于使用jQuery选择一个或多个HTML元素。 一旦选择了元素，我们就可以对所选元素执行各种操作。

The $() factory function

jQuery选择器以美元符号和括号 - $()开头。 工厂函数$()在选择给定文档中的元素时使用以下三个构建块 -

Sr.No. 选择器和描述
1

Tag Name

表示DOM中可用的标记名称。 例如， $('p')选择文档中的所有段落“p”。

2

Tag ID

表示DOM中给定ID可用的标记。 例如$('#some-id')选择文档中具有some-id ID的单个元素。

3

Tag Class

表示DOM中给定类可用的标记。 例如$('.some-class')选择文档中具有某类类的所有元素。

以上所有项目可以单独使用，也可以与其他选择器结合使用。 除了一些调整之外，所有jQuery选择器都基于相同的原理。

NOTE - 工厂函数$()是jQuery()函数的同义词。 因此，如果你使用任何其他JavaScript库，其中$ sign与其他东西冲突，那么你可以用jQuery名称替换$ sign，你可以使用函数jQuery()而不是$() 。

例子 (Example)

以下是一个使用标签选择器的简单示例。 这将选择标签名为p所有元素。 

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://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", "yellow");
         });
      </script>
   </head>
   <body>
      <div>
         <p class = "myclass">This is a paragraph.</p>
         <p id = "myid">This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>
</html>

这将产生以下结果 -

新页面打开

如何使用选择器？

选择器非常有用，在使用jQuery时每一步都需要它们。 他们从HTML文档中获取您想要的确切元素。

下表列出了几个基本选择器，并用示例解释它们。

Sr.No. 选择器和描述
1 Name

选择与给定元素Name匹配的所有元素。

2 #ID

选择与给定ID匹配的单个元素。

3 .Class

选择与给定Class匹配的所有元素。

4 通用（*）

选择DOM中可用的所有元素。

5 多个元素E，F，G

选择所有指定选择器E, F或G的组合结果。

选择器示例

与上面的语法和示例类似，以下示例将为您提供使用不同类型的其他有用选择器的理解 -

匹配的所有具有奇数索引值的元素。
Sr.No. 选择器和描述
1

$('*')

此选择器选择文档中的所有元素。

2

$("p 》 *")

此选择器选择作为段落元素的子元素的所有元素。

3

$("#specialID")

此选择器函数获取id =“specialID”的元素。

4

$(".specialClass")

此选择器获取具有specialClass类的所有元素。

5

$("li:not(.myclass)")

选择 li 匹配的所有没有class =“myclass”的元素。

6

$("a#specialID.specialClass")

此选择器匹配id为specialID和specialClass类的specialClass 。

7

$("p a.specialClass")

此选择器将链接与“p”元素中声明的specialClass类匹配。

8

$("ul li:first")

此选择器仅获取ul的第一个li元素。

9

$("#container p")

选择与p匹配的所有元素，这些元素是id为container的元素的后代。

10

$("li 》 ul")

选择ul匹配的所有元素，它们是li匹配的元素的子元素

11

$("strong + em")

选择匹配的所有元素，这些元素紧跟在与匹配的同级元素之后。

12

$("p ~ ul")

选择跟随p匹配的同级元素的ul匹配的所有元素。

13

$("code, em, strong")

选择与code或em或strong匹配的所有元素。

14

$("p strong, .myclass")

选择匹配的所有元素，它们是

匹配的元素的后代，以及具有myclass类的所有元素。

15

$(":empty")

选择所有没有子元素的元素。

16

$("p:empty")

选择p匹配的所有没有子项的元素。

17

$("div[p]")

选择div匹配的所有元素，其中包含与p匹配的元素。

18

$("p[.myclass]")

选择与p匹配的所有元素，其中包含具有myclass类的元素。

19

$("a[@rel]")

选择具有rel属性的匹配的所有元素。

20

$("input[@name = myname]")

选择《input》匹配的所有元素，其名称值完全等于myname.

21

$("input[@name^=myname]")

选择《input》匹配的所有元素，其名称值以myname开头。

22

$("a[@rel$=self]")

选择由匹配的所有元素，其rel属性值以self结尾。

23

$("a[@href*=domain.com]")

选择与匹配的所有元素，这些元素具有包含domain.com的href值。

24

$("li:even")

选择li匹配的所有具有偶数索引值的元素。

25

$("tr:odd")

选择tr匹配的所有索引值为奇数的元素。

26

$("li:first")

选择第一个li元素。

27

$("li:last")

选择最后一个li元素。

28

$("li:visible")

选择li匹配的所有可见元素。

29

$("li:hidden")

选择隐藏的li匹配的所有元素。

30

$(":radio")

选择表单中的所有单选按钮。

31

$(":checked")

选择表单中的所有复选框。

32

$(":input")

仅选择表单元素（输入，选择，文本区域，按钮）。

33

$(":text")

仅选择文本元素（输入[type = text]）。

34

$("li:eq(2)")

选择第三个li元素。

35

$("li:eq(4)")

选择第五个li元素。

36

$("li:lt(2)")

在第三个元素之前选择li元素匹配的所有元素; 换句话说，前两个li元素。

37

$("p:lt(3)")

在第四个元素之前选择由p元素匹配的所有元素; 换句话说，前三个p元素。

38

$("li:gt(1)")

在第二个之后选择li匹配的所有元素。

39

$("p:gt(2)")

在第三个之后选择与p匹配的所有元素。

40

$("div/p")

选择p匹配的所有元素，它们是div匹配的元素的子元素。

41

$("div//code")

选择code匹配的所有元素，它们是div匹配的元素的后代。

42

$("//p//a")

选择与a匹配的所有元素，它们是p匹配的元素的后代

43

$("li:first-child")

选择li匹配的所有元素，这些元素是其父元素的第一个子元素。

44

$("li:last-child")

选择p匹配的所有元素，这些元素是其父级的最后一个子级。

45

$(":parent")

选择作为另一个元素的父元素的所有元素，包括文本。

46

$("li:contains(second)")

选择li匹配的所有包含文本秒的元素。

您可以以通用方式将所有上述选择器与任何HTML/XML元素一起使用。 例如，如果selector $("li:first")适用于“li”元素，那么$("p:first")也适用于“p”元素。

<上一篇.jQuery - 基础知识( Basics)
jQuery - 属性( Attributes).下一篇>
↑回到顶部↑
WIKI教程 @2018