JQuery 选择器

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的元素。
取消
感谢您的支持,我会继续努力的!
扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by bytekits.com,汇天下文字,成非凡梦想!!!