📌  相关文章
📜  jQuery-选择器

📅  最后修改于: 2020-10-23 08:14:58             🧑  作者: Mango

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

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

$（）工厂函数

jQuery选择器以美元符号和括号- $（）开头。工厂函数$（）在选择给定文档中的元素时利用了以下三个构造块-

Sr.No. Selector & Description
1

Tag Name

Represents a tag name available in the DOM. For example $(‘p’) selects all paragraphs

in the document.
2

Tag ID

Represents a tag available with the given ID in the DOM. For example $(‘#some-id’) selects the single element in the document that has an ID of some-id.
3

Tag Class

Represents a tag available with the given class in the DOM. For example $(‘.some-class’) selects all elements in the document that have a class of some-class.

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

注：工厂函数$（）是jQuery（）函数的同义词。因此，如果您正在使用其他任何JavaScript库，其中$符号与其他事物冲突，则可以用jQuery名称替换$符号，并且可以使用函数jQuery（）代替$（） 。

例

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

现场演示

The jQuery Example
      

      
   
    
   
      

         
This is a paragraph.

         
This is second paragraph.

         
This is third paragraph.

这将产生以下结果-

如何使用选择器？

选择器非常有用，在使用jQuery的每一步都将需要使用选择器。它们从HTML文档中获得所需的确切元素。

下表列出了一些基本的选择器，并通过示例进行了说明。

Sr.No. Selector & Description
1 Name

Selects all elements which match with the given element Name.
2 #ID

Selects a single element which matches with the given ID.
3 .Class

Selects all elements which match with the given Class.
4 Universal (*)

Selects all elements available in a DOM.
5 Multiple Elements E, F, G

Selects the combined results of all the specified selectors E, F or G.

选择器示例

与上述语法和示例类似，以下示例将使您了解如何使用其他类型的其他有用的选择器-

that have an odd index value.

Sr.No. Selector & Description
1

$(‘*’)

This selector selects all elements in the document.
2

$(“p > *”)

This selector selects all elements that are children of a paragraph element.
3

$(“#specialID”)

This selector function gets the element with id=”specialID”.
4

$(“.specialClass”)

This selector gets all the elements that have the class of specialClass.
5

$(“li:not(.myclass)”)

Selects all elements matched by

  • that do not have class = “myclass”.

    		•
    6

    $(“a#specialID.specialClass”)

    This selector matches links with an id of specialID and a class of specialClass.
    7

    $(“p a.specialClass”)

    This selector matches links with a class of specialClass declared within

    elements.
    8

    $(“ul li:first”)

    This selector gets only the first

  • element of the
      .

    		•
    9

    $(“#container p”)

    Selects all elements matched by

    that are descendants of an element that has an id of container.
    10

    $(“li > ul”)

    Selects all elements matched by

      that are children of an element matched by

    11

    $(“strong + em”)

    Selects all elements matched by that immediately follow a sibling element matched by .
    12

    $(“p ~ ul”)

    Selects all elements matched by

      that follow a sibling element matched by

      .
    13

    $(“code, em, strong”)

    Selects all elements matched by or or .
    14

    $(“p strong, .myclass”)

    Selects all elements matched by that are descendants of an element matched by

    as well as all elements that have a class of myclass.
    15

    $(“:empty”)

    Selects all elements that have no children.
    16

    $(“p:empty”)

    Selects all elements matched by

    that have no children.
    17

    $(“div[p]”)

    Selects all elements matched by

    that contain an element matched by

    .
    18

    $(“p[.myclass]”)

    Selects all elements matched by

    that contain an element with a class of myclass.
    19

    $(“a[@rel]”)

    Selects all elements matched by that have a rel attribute.
    20

    $(“input[@name = myname]”)

    Selects all elements matched by that have a name value exactly equal to myname.
    21

    $(“input[@name^=myname]”)

    Selects all elements matched by that have a name value beginning with myname.
    22

    $(“a[@rel$=self]”)

    Selects all elements matched by that have rel attribute value ending with self.
    23

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

    Selects all elements matched by that have an href value containing domain.com.
    24

    $(“li:even”)

    Selects all elements matched by

  • that have an even index value.

    		•
    25

    $(“tr:odd”)

    Selects all elements matched by

    26

    $(“li:first”)

    Selects the first

  • element.

    		•
    27

    $(“li:last”)

    Selects the last

  • element.

    		•
    28

    $(“li:visible”)

    Selects all elements matched by

  • that are visible.

    		•
    29

    $(“li:hidden”)

    Selects all elements matched by

  • that are hidden.

    		•
    30

    $(“:radio”)

    Selects all radio buttons in the form.
    31

    $(“:checked”)

    Selects all checked box in the form.
    32

    $(“:input”)

    Selects only form elements (input, select, textarea, button).
    33

    $(“:text”)

    Selects only text elements (input[type = text]).
    34

    $(“li:eq(2)”)

    Selects the third

  • element.

    		•
    35

    $(“li:eq(4)”)

    Selects the fifth

  • element.

    		•
    36

    $(“li:lt(2)”)

    Selects all elements matched by

  • element before the third one; in other words, the first two
  • elements.

    		•
    37

    $(“p:lt(3)”)

    selects all elements matched by

    elements before the fourth one; in other words the first three

    elements.
    38

    $(“li:gt(1)”)

    Selects all elements matched by

  • after the second one.

    		•
    39

    $(“p:gt(2)”)

    Selects all elements matched by

    after the third one.
    40

    $(“div/p”)

    Selects all elements matched by

    that are children of an element matched by

    .
    41

    $(“div//code”)

    Selects all elements matched by that are descendants of an element matched by

    .
    42

    $(“//p//a”)

    Selects all elements matched by that are descendants of an element matched by

    43

    $(“li:first-child”)

    Selects all elements matched by

  • that are the first child of their parent.

    		•
    44

    $(“li:last-child”)

    Selects all elements matched by

  • that are the last child of their parent.

    		•
    45

    $(“:parent”)

    Selects all elements that are the parent of another element, including text.
    46

    $(“li:contains(second)”)

    Selects all elements matched by

  • that contain the text second.

    		•

    您可以以通用方式将上述所有选择器与任何HTML / XML元素一起使用。例如，如果选择器$（“ li：first”）适用于

  • 元素，则$（“ p：first”）也适用于

    元素。