jQuery basic selector

BeginnerjQuery, in order to learn jQuery better systematically, today I specially summarize my learning experience and post it to share with the beginners. Today I mainly summarize the basic selectors of jQuery. The basic selector of

jQuery is the most commonly used selector in jQuery and is also the simplest selector. It mainly uses the ID# of the element. ##, CLASS, element tag ELEMENT, etc. to find the DOM element in HTML. In a web page, each ID name can only be used once, and class can be used repeatedly. In jQury applications, you can use these basic selectors to complete most of the work. Let's mainly take a look at their specific implementation process. In order to learn better, we first list an HTML tag code here:

<div id="mydiv">
    <div class="mini">我是一个名为mini的div标签</div>
    <div class="mini">我是一个名为mini的div标签</div>
    <div class="mini">我是一个名为mini的div标签</div>
    <p>我是一个段落p标签</p>
    <span>我是一个行内span标签</span>
<div>

1. ID Selector

Selector: #id

Description: Match an element based on the given id

Return: Single element

Example:

<script type="text/javascript">    $(document).ready(function(){
        //id选择器        $("#mydiv").css("background","#f96");
     });</script>

Function:Change the id to mydiv The background color of the element

2. Class selector

Selector:.class

Description:Return elements matching the given class name

Return: Collection elements

Example:

<script type="text/javascript">    $(document).ready(function(){
        //class选择器        $(".mini").css("background","#f96");
     });</script>

Function: Change the background color of all elements with class mini

3. Tag element

Selector: element

Description: Match elements based on the given element name

Return: Collection elements

Example:

<script type="text/javascript">    $(document).ready(function(){
        //element选择器        $("div").css("background","#f96");
     });</script>

Function:Change the background color of all elements whose element name is <div>

4. All elements*

Selector: *

Description: Change all matching html tag elements

Return value: Collection elements

Example:

<script type="text/javascript">    $(document).ready(function(){
        //*选择器        $("*").css("background","#f96");
     });</script>

Function:Change the background color of all html element tags

5. selector1, selector2,....selectorN

selector,selector2,...selectorN

will each The elements matched by the selector are combined and returned together

Collection elements

<script type="text/javascript">    $(document).ready(function(){
        //selector1,selector2,...selectorN选择器        $(".mini,p").css("background","#f96");
     });</script>

Function:Change the background color of the class name mini and paragraph p elements