极客教程如何在jQuery中通过属性选择元素
jQuery是一个轻量级的JavaScript库。在普通的JavaScript语言中，getElementById方法被用来选择一个元素。然而，jQuery为同样的目的提供了一个更轻的替代方法。jQuery选择器 “允许用户操作HTML元素和其中的数据（DOM操作）。
语法
$("[attribute=value]")
这里，属性和值是强制性的。
一些最常用的jQuery选择器
| 语法 | Example | 选择 |
|---|---|---|
* |
$(“*”) |
网页上的所有元素 |
#id |
$(“#geeks” |
Elements with id=”geeks” |
.class |
$(“.geeks”) |
所有带有class=”geeks “的元素 |
:first |
$(“p:first”) |
网页的第一个’p’元素 |
:header |
$(“:header”) |
所有标题元素，如h1、h2、h3、h4等 |
:empty |
$(“:empty”) |
所有空元素 |
:input |
$(“:input”) |
所有的输入元素，如文本、密码等 |
:text |
$(“:text”) |
类型为 “text “的输入元素 |
:last-child |
$(“p:last-child”) |
这些’p’元素是其父母的最后一个孩子 |
:animated |
$(“:animated”) |
网页上的所有动画元素 |
#id选择器：#id选择器为要选择的元素指定一个id。它不应该以数字开头，而且id属性在一个文档中必须是唯一的，这意味着它只能被使用一次。
语法:
$("#example")
只有当用户想找到一个唯一的元素时，才必须使用id选择器。
示例:
<!DOCTYPE html>
<html>
<head>
<title>
How to select elements from
attribute in jQuery ?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
(document).ready(function() {
("button").click(function() {
$("#para").hide();
});
});
</script>
</head>
<body>
<h2>GeeksforGeeks</h2>
<p>This is a constant paragraph.</p>
<p id="para">
This paragraph will get hidden once
the button is clicked.
</p>
<button>Click me
</body>
</html>
输出:
- 在点击按钮之前。
- 点击按钮后。
.class选择器：.class选择器指定要选择的元素的类别。它不应该以数字开头。它为几个HTML元素提供样式。
$(".example")
示例:
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
(document).ready(function() {
("button").click(function() {
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="heading">GeeksForGeeks</h2>
<p class="test">This is a paragraph.</p>
<p class="test">This is another paragraph.</p>
<button>Click me
</body>
</html>
输出:
- 在点击按钮之前。
- 点击按钮后。
:first Selector : 它是一个jQuery选择器，用于选择指定类型的第一个元素。
语法:
$(":first")
示例:
<!DOCTYPE html>
<html>
<head>
<title>jQuery :first selector</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
(document).ready(function() {
("p:first").css(
"background-color", "green");
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>jQuery</p>
<p>JavaScript</p>
<p>PHP</p>
</body>
</html>
输出:
