jQuery 选择器
jQuery 选择器
jQuery 选择器用于选取和操作 HTML 元素。它们是 jQuery 库的非常重要的部分。
使用 jQuery 选择器，您可以通过元素的 id、类、属性、类型等在 DOM 中找到或选择 HTML 元素。
简单来说，可以说选择器用于使用 jQuery 选择一个或多个 HTML 元素，一旦选择了元素，您就可以对其执行各种操作。
所有的 jQuery 选择器都以一个美元符号和括号开头，例如 $()。它被称为工厂函数。
$()工厂函数
每个 jQuery 选择器都以 $() 这个符号开头。这个符号被称为工厂函数。它在选择给定文档中的元素时使用三个基本构建块。
| 编号 | 选择器 | 描述 |
|---|---|---|
| 1) | 标签名: | 表示DOM中可用的标签名。 例如：$(‘p’)选择文档中所有的段落’p’. |
| 2) | 标签ID: | 表示在DOM中具有特定ID的标签。 例如：$(‘#real-id’)选择文档中具有ID为real-id的特定元素。 |
| 3) | 标签类: | 表示DOM中具有特定类的标签。 例如：$(‘real-class’)选择文档中具有real-class类的所有元素。 |
让我们通过一个简单的例子来看一下标签选择器的使用。这会选择所有标签名称是
且背景颜色设置为 “粉色” 的元素。
文件: firstjquery.html
<!DOCTYPE html>
<html>
<head>
<title>First jQuery Example</title>
<script type="text/javascript" src="/statichttp://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", "pink");
});
</script>
</head>
<body>
<p>This is first paragraph.</p>
<p>This is second paragraph.</p>
<p>This is third paragraph.</p>
</body>
</html>
输出：
注意：1.上述讨论的所有选择器都可以单独使用或与其他选择器结合使用。
注意：2.如果您对JavaScript库中使用美元符号出现冲突，可以使用jQuery()函数代替工厂函数()。工厂函数$()和jQuery函数是相同的。
如何使用选择器
jQuery选择器可以单独使用或与其他选择器结合使用。在使用jQuery时，它们在每个步骤都是必需的。它们用于从HTML文档中选择您想要的确切元素。
| 序号 | 选择器 | 描述 |
|---|---|---|
| 1) | Name: | 它选择与给定元素名称匹配的所有元素。 |
| 2) | #ID: | 它选择与给定ID匹配的单个元素。 |
| 3) | .Class: | 它选择所有与给定类匹配的元素。 |
| 4) | Universal(*) | 它选择DOM中的所有元素。 |
| 5) | Multiple Elements A,B,C | 它选择所有指定选择器A，B和C的组合结果。 |
不同的jQuery选择器
| Selector | Example | Description |
|---|---|---|
* |
$("*") |
它用于选择所有元素。 |
# id |
$("#firstname") |
它将选择id为”firstname”的元素 |
.class |
$(".primary") |
它将选择所有class为”primary”的元素 |
class,.class |
$(".primary,.secondary") |
它将选择所有class为”primary”或”class”为”secondary”的元素 |
element |
$("p") |
它将选择所有p元素 |
el1,el2,el3 |
$("h1,div,p") |
它将选择所有h1、div和p元素 |
:first |
$("p:first") |
这将选择第一个p元素 |
:last |
$("p:last") |
这将选择最后一个 p 元素 |
:even |
$("tr:even") |
这将选择所有偶数位置的 tr 元素 |
:odd |
$("tr:odd") |
这将选择所有奇数位置的 tr 元素 |
:first-child |
$("p:first-child") |
它将选择所有 p 元素，它们是其父元素的第一个子元素 |
:first-of-type |
$("p:first-of-type") |
它将选择所有 p 元素，它们是其父元素中第一个 p 元素 |
:last-child |
$("p:last-child") |
它将选择所有 p 元素，它们是其父元素的最后一个子元素 |
:last-of-type |
$("p:last-of-type") |
它将选择所有是其父元素最后一个p元素的p元素 |
:nth-child(n) |
$("p:nth-child(2)") |
这将选择所有是其父元素的第二个子元素的p元素 |
:nth-last-child(n) |
$("p:nth-last-child(2)") |
这将选择所有是其父元素的倒数第二个子元素的p元素 |
:nth-of-type(n) |
$("p:nth-of-type(2)") |
它将选择所有是其父元素的第二个p元素的p元素 |
:nth-last-of-type(n) |
$(“p:nth-last-of-type(2)”) | 这将选择所有的p元素，它们是其父元素的第二个p元素，从最后一个子元素开始计数 |
:only-child |
$("p:only-child") |
它将选择所有的p元素，它们是其父元素的唯一子元素 |
:only-of-type |
$("p:only-of-type") |
它将选择所有的p元素，它们是其父元素的唯一类型的子元素 |
parent > child |
$("div > p") |
它将选择所有的p元素，它们是div元素的直接子元素 |
parent descendant |
$("div p") |
它将选择所有的p元素，它们是div元素的后代元素 |
element + next |
$("div + p") |
选择紧接着每个div元素的p元素 |
element ~ siblings |
$("div ~ p") |
选择所有div元素的兄弟p元素 |
:eq(index) |
$("ul li:eq(3)") |
选择列表中的第四个元素（索引从0开始） |
:gt(no) |
$("ul li:gt(3)") |
选择索引大于3的列表元素 |
:lt(no) |
$("ul li:lt(3)") |
选择索引小于3的列表元素 |
:not(selector) |
$("input:not(:empty)") |
选择所有非空的输入元素 |
:header |
$(":header") |
选择所有标题元素h1，h2 … |
:animated |
$(":animated") |
选择所有正在动画的元素 |
:focus |
$(":focus") |
选择当前具有焦点的元素 |
:contains(text) |
$(":contains('Hello')") |
选择包含文本“Hello”的所有元素 |
:has(selector) |
$("div:has(p)") |
选择拥有p元素的所有div元素 |
:empty |
$(":empty") |
选择所有空的元素 |
:parent |
$(":parent") |
选取所有是其他元素的父元素的元素 |
:hidden |
$("p:hidden") |
选取所有隐藏的 p 元素 |
:visible |
$("table:visible") |
选取所有可见的 table 元素 |
:root |
$(":root") |
选取文档的根元素 |
:lang(language) |
$("p:lang(de)") |
选取所有具有以 “de” 开头的 lang 属性值的 p 元素 |
[attribute] |
$("[href]") |
选取所有具有 href 属性的元素 |
[attribute^=value] |
$("[href^='https://']") |
它将选择所有href属性值以“https://”开头的元素。 |
[attribute*=value] |
$("[href*='example']") |
它将选择所有href属性值包含子字符串”example”的元素。 |
[attribute~=value] |
$("[class~='active']") |
它将选择class属性值包含单词”active”的所有元素。 |
[attribute] |
$("[target]") |
它将选择具有target属性的所有元素 |
$(":password") |
$(":password") |
它将选择所有type=”password”的输入元素 |
:radio |
$(":radio") |
它将选择所有type=”radio”的输入元素 |
:checkbox |
$(":checkbox") |
它将选择所有type=”checkbox”的输入元素 |
:submit |
$(":submit") |
它将选择所有type=”submit”的输入元素 |
:reset |
$(":reset") |
它将选择所有type=”reset”的输入元素 |
:button |
$(":button") |
它将选择所有type=”button”的输入元素 |
:image |
$(":image") |
它将选择所有具有 type=”image” 的输入元素 |
:file |
$(":file") |
它将选择所有具有 type=”file” 的输入元素 |
:enabled |
$(":enabled") |
选择所有已启用的输入元素 |
:disabled |
$(":disabled") |
它将选择所有已禁用的输入元素 |
:selected |
$(":selected") |
它将选择所有已选中的输入元素 |
:checked |
$(":checked") |
它将选择所有已选中的输入元素 |
本文链接：http://so.lmcjl.com/news/17775/
展开阅读全文
上一篇：python中执行sql查询语句怎么写
下一篇：租房合同个人范本五篇
相关内容