Introduction to jQuery selector and classification analysis-JS Tutorial-php.cn

Introduction to jQuery selector and classification analysis

PHPz

Release： 2024-02-28 12:06:04

Original

660 people have browsed it

Introduction to jQuery selector and classification analysis

jQuery selector introduction and classification analysis

jQuery is an extremely popular JavaScript library that is widely used in web development. Among them, selectors are a very important part of jQuery, which allow developers to select elements from HTML documents and operate on them through concise syntax. This article will briefly introduce the basic concepts of jQuery selectors, analyze their classification in detail, and provide specific code examples to help readers better understand.

1. Introduction to jQuery selectors

When using jQuery, selectors are used to specify the HTML elements that need to be operated, and their syntax is similar to CSS selectors. Through selectors, you can select a single element, a group of elements, or all elements in the entire page to easily operate on them, modify styles, or bind events.

2. jQuery selector classification analysis

1. Basic selector

Basic selector is used to select a single element or a group of elements in an HTML document. Commonly used basic selectors include:

Element selector: Select elements by their tag names, the syntax is $("element"). For example, to select all  elements: $("p").
ID selector: Select elements through their id attribute, the syntax is $("#id"). For example, select the element with the id "demo": $("#demo").
Class selector: Select elements through their class attributes, the syntax is $(".class"). For example, select the element with class "info": $(".info").
Attribute selector: Select elements by their attributes, the syntax is $("[attribute='value']"). For example, select the element whose attribute data-id has the value "123": $("[data-id='123']").

2. Hierarchical selector

The hierarchical selector is used to select the hierarchical relationship of elements. Commonly used hierarchical selectors include:

Descendants Selector : Selects the descendant elements of the specified element, the syntax is $("parent descendant"). For example, to select all  elements inside <div>: <code>$("div p").
Child element selector: Select the child elements of the specified element, the syntax is $("parent > child"). For example, to select all  elements directly under <div>: <code>$("div > span").
Adjacent sibling selector: Select the adjacent sibling elements of the specified element, the syntax is $("prev next"). For example, select a  element immediately after the  element: $("p span").

3. Filter selector

Filter selector is used to select elements that meet specified conditions. Commonly used filter selectors include:

## :first: Selects the first element matching the selector.
:last: Selects the last element matching the selector.
:even: Selects elements matching the even positions of the selector.
:odd: Selects elements matching the odd position of the selector.
:eq(index): Selects elements matching the index position specified in the selector.

<!DOCTYPE html>
<html>
<head>
  <title>jQuery选择器示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div>
    <p>Hello, jQuery!</p>
  </div>
  <div id="example">
    <p class="info">This is a paragraph.</p>
    <p>This is another paragraph.</p>
  </div>

  <script>
    // 基础选择器示例
    $("p").css("color", "blue"); // 改变所有<p>元素的颜色为蓝色
    $("#example .info").html("Updated content"); // 修改id为example内class为info的元素的内容

    // 层级选择器示例
    $("div > p").css("font-weight", "bold"); // 选取div下的直接子元素p并设置字体加粗

    // 过滤选择器示例
    $("p:first").css("background-color", "yellow"); // 选取第一个<p>元素并设置背景色为黄色
  </script>
</body>
</html>

Copy after login