JQuery 选择器

2019-09-09 5 0

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

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

$() factory function

jQuery selector以美元符号和括号开头$()，在选择给定文档中的元素时利用了以下三个构造块:

No.	Selector	描述
1	Tag Name	表示DOM中可用的标签名称。如`$('p')`选择文档中的所有段落`<p>`。
2	Tag ID	表示DOM中具有给定ID的可用标签。如， `$('#some-id')`选择ID为some-id的文档中的单个元素。
3	Tag Class	表示DOM中给定类可用的标签。如， `$('.some-class')`选择文档中所有some-class类别的元素。

注意

$()是 jQuery()函数的同义词。因此，如果您正在使用 $符号与其他符号冲突的其他JavaScript库，则可以将 $符号替换为 jQuery
名称，您可以使用函数 jQuery()代替 $()。

以下是一个使用标签选择器的简单示例。这将选择标签名称为 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>

这将产生以下输出:

This is a paragraph.
This is second paragraph.
This is third paragraph.

使用选择器

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

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

Sr.No.	Selector	描述
1	`Name`	选择与给定元素 Name 匹配的所有元素。
2	`#ID`	选择与给定的 ID 匹配的单个元素。
3	`.Class`	选择与给定的 Class 匹配的所有元素。
4	`Universal(*)`	选择DOM中所有可用的元素。
5	`Multiple Elements E, F, G`	选择所有指定selector E，F 或 G 的组合输出。

选择器示例

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

No.	Selector	描述
1	`$('*')`	匹配所有元素。
2	`$("p > *")`	匹配P元素里所有的子元素。
3	`$("#specialID")`	匹配id等于specialID的元素。
4	`$(".specialClass")`	匹配 class等于specialClass的元素
5	`$("li:not(.myclass)")`	匹配`<li>`中不包含 class 等于 myclass的元素。
6	`$("a#specialID.specialClass")`	匹配后面这个链接`<a id="specialID" class='specialClass'></a>`。
7	`$("p a.specialClass")`	匹配`<p>`元素里面所有包含`class='specialClass'`的a元素。如：`<p><a class='specialClass'></a></p>`
8	`$("ul li:first")`	匹配`<ul>`的第一个`<li>`元素。
9	`$("#container p")`	匹配Id=’container’里面所有`<p>`元素。
10	`$("li>ul")`	匹配`<li>`元素里面的`ul`元素
11	`$("strong + em")`	匹配`<strong>`后面紧跟着`<em>`的元素。
12	`$("p〜ul")`	匹配`<p>`同级元素中包含`<ul>`的元素。
13	`$("code，em，strong")`	匹配`<code>`或`<em>`或`<strong>`元素。
14	`$("p strong.myclass")`	eg:`<p><strong class='myclass'></strong></p>`
15	`$(":empty")`	匹配所有没有子元素的元素。
16	`$("p:empty")`	匹配`<p>`没有子元素的元素。eg:`<p></p>`
17	`$("div[p]")`	匹配`<div>`里面包含`<p>`的元素。eg:`<div><span>A</span><p>B</p></div>`
18	`$("p [.myclass]")`	匹配`<p>`里面包含 class=’myclass’的元素。
19	`$("a [@rel]")`	匹配`<a>`里面包含 ref 属性的元素。
20	`$("input [@name=myname]")`	匹配`<input>`里面包含name=’myname’的元素。
21	`$("input [@name ^=myname]")`	匹配`<input>`里面包含name=’myname’开头的元素。
22	`$("a[@rel $=self]")`	匹配`<a>`里面属性值以self结尾的元素。
23	`$("a [@href *=domain.com]")`	匹配`<a>`属性href值包含domain.com的所有元素。
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")`	匹配input元素
33	`$(":text")`	匹配文本元素(input [type=text])。
34	`$("li:eq(2)")`	匹配第三个`<li>`元素。
35	`$("li:eq(4)")`	匹配第五个`<li>`元素。
36	`$("li:lt(2)")`	匹配第三个元素之前与`<li>`元素匹配的所有元素；
37	`$("p:lt(3)")`	匹配所有在第四个元素之前与`<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")`	匹配最后一个li的子元素
45	`$(":parent")`	匹配作为另一个元素父元素的所有元素，包括文本。
46	`$("li:contains(second)")`	匹配与`<li>`匹配的所有包含second的元素。

JQuery 选择器

$() factory function

使用选择器

选择器示例

0 篇笔记写笔记

加入QQ群

JQuery 选择器

$() factory function

使用选择器

选择器示例

0 篇笔记 写笔记

加入QQ群

0 篇笔记写笔记