当前位置: 首页 > 文档资料 > jQuery 入门教程 >

选择器(Selectors)

优质
小牛编辑
132浏览
2023-12-01

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.选择器和描述
1Name

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

2#ID

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

3.Class

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

4通用(*)

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

5多个元素E,F,G

选择所有指定选择器E, FG的组合结果。

选择器示例

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

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

$('*')

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

2

$("p 》 *")

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

3

$("#specialID")

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

4

$(".specialClass")

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

5

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

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

6

$("a#specialID.specialClass")

此选择器匹配id为specialIDspecialClass类的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”元素。