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

grammardescribe
$("*")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>

知否
221 声望177 粉丝

Skrike while the iron is hot.


« 上一篇
jQuery语法
下一篇 »
jQuery 事件

引用和评论

0 条评论