In this section, we will learn about the jQuery
in 0616578cce4d35. The selector is one of the most important parts of the jQuery
jQuery selector
jQuery
selector allows us to select and operate HTML
elements, which according to HTML
name of the element, ID
to locate, class, type, attributes and their values, etc. HTML
elements. In addition to based on the existing CSS
selector, it also has some of its own custom selectors.
Pay attention to jQuery
all selectors are beginning with a dollar sign and parentheses, such as $()
.
Element selector
jQuery
element selector is to match the corresponding element according to the element name. In other words, it is selected based on the tag name of the element, and it points to the tag name DOM
Example:
For example, there is the following piece of HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
</head>
<body>
<h2>你好,欢迎来到侠课岛!</h2>
<div>
<p>侠课岛的学习课程:</p>
<ul>
<li class="course">Python</li>
<li class="course">前端</li>
<li class="course">Java</li>
<li class="course">PHP</li>
</ul>
<div>
<button>点击按钮</button>
</div>
</div>
</body>
</html>
If we want to write the jQuery
code in this page, we first need to import the jQuery
file, the format is as follows:
<script src="jquery-3.5.1.min.js"></script>
This means that the jquery-3.5.1.min.js
and index.html
files we imported are located in the same directory.
Next, we have to write the jQuery
<script>
tag. Note that you must write another <script>
, which cannot be written in the <script>
tag of the imported file.
For example, to achieve the effect of clicking the button on the page to hide all <li>
tags:
<script>
$(function(){
$("button").click(function(){
$("li").hide();
});
});
</script>
The above code, the beginning is a jQuery
load function $(function(){})
, which we talked about earlier one had. Then click()
click event is bound to the button
label selector, which means that when the element is clicked, the click event will be triggered. Then it will run the function in the click event. The $("li").hide()
this function means to select all the <li>
tags on the page and then hide them. hide()
is a method of hiding elements.
Demonstration effect in the browser:
class selector
jQuery
class selector can find elements class
There is a little difference between the syntax and the label selector, that is, you need to add a dot number .
before the name of the class selector.
Example:
For example, the following code is actually similar to the example in the above element selector. The difference is that this means to hide class="course"
<script>
$(function(){
$("button").click(function(){
$(".course").hide();
});
});
</script>
Although the browser presentation effects of these two examples in this section of the tutorial are the same, there are still big differences. For the previous example, as long as the elements with the <li>
For this example, only class="course"
will be hidden.
ID selector
jQuery
in ID
selected by the HTML element id
to find the specified element property. An ID should be unique in a page, so when we want to select a unique element, we should use the ID
selector.
Example:
For example, get the element text content id
as xkd
in the page, and display it in the browser alert()
alert($("#xkd").text());
When we use the ID
selector, we need to add a hash sign #
front of the selector. text()
method can be used to return the text content of the selected element.
Demonstration effect in the browser:
Other selectors in JQuery
In addition to tag selectors, class selectors, and ID selectors, there are also some custom JQuery
grammar | describe |
---|---|
$("*") | Select all elements |
$(this) | Select the current HTML element |
$("p.xkd") | Select all class="xkd" of <p> elements |
$("p:first") | Select the first <p> element |
$("ul li:first") | Select the first <ul> element under the first <li> element |
$("ul li:first-child") | Select the first <ul> <li> element |
$("[href]") | Select all elements href |
$(a[target='_blank']) | Select all the target attribute value is equal to _blank of <a> element |
$(a[target!='_blank']) | Select all the target attribute value is not equal to _blank of <a> element |
$("div#xkd .good") | Select id="xkd" of <div> all elements class="good" elements |
$("tr:even") | Select all elements <tr> |
$("tr:odd") | Select all elements <tr> |
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。