Home >Web Front-end >Front-end Q&A >Can jquery only use id selector?
Can jquery only use id selector?
- WBOYOriginal
- 2022-04-20 17:44:561555browse
jquery does not only use id selectors. jquery provides a variety of selectors: 1. Class selector, which can find elements by specifying class; 2. Tag selector, which can select elements by HTML tag name; 3. Attribute selector, use XPath expressions to select elements with specified Attribute elements; 4. Group selector, etc.
The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.
Can jquery only use id selectors?
jQuery selectors allow you to operate on groups of HTML elements or individual elements.
jQuery selectors "find" (or select) HTML elements based on the element's id, class, type, attributes, attribute values, etc. It is based on existing CSS selectors, in addition to some custom selectors.
All selectors in jQuery begin with a dollar sign: $().
jQuery Element Selectors
jQuery uses CSS selectors to select HTML elements.
$("p") Selects the
element.
$("p.intro") Selects all
elements with class="intro".
$("p#demo") Selects all
elements with id="demo".
jQuery Attribute Selector
jQuery uses an XPath expression to select elements with a given attribute.
$("[href]") Selects all elements with href attribute.
$("[href='#']") Selects all elements with an href value equal to "#".
$("[href!='#']") Selects all elements with an href value not equal to "#".
$("[href$='.jpg']") Selects all elements whose href value ends with ".jpg".
#id selector
jQuery #id selector selects the specified element through the id attribute of the HTML element.
The id of the element in the page should be unique, so if you want to select the only element in the page, you need to use the #id selector.
The syntax for selecting elements by id is as follows:
$("#test")The example is as follows:
123 <script> $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); }); </script>这是一个标题
这是一个段落
这是另外一个段落
Output result:
.class selector
jQuery class selector can find elements by specifying class.
The syntax is as follows:
$(".test")The example is as follows:
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
这是一个标题
这是一个段落。
这是另外一个段落。
Output result:
Group selection
Group selector is used to perform the same operation on several selectors at the same time.
Syntax:
$("选择器1, 选择器2, ... , 选择器n")The two selectors must be separated by English commas, otherwise the selector will not take effect.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$("h3,div,p,span").css("color","red");
})
</script>
</head>
<body>
<h3>中文网</h3>
<div>中文网</div>
<p>中文网</p>
<span>中文网</span>
</body>
</html> Recommended related video tutorials: jQuery video tutorial
The above is the detailed content of Can jquery only use id selector?. For more information, please follow other related articles on the PHP Chinese website!