jQuery Basic Selector Examples

jQuery selector is the foundation of jQuery framework. You must first use selector to choose a web element or a set of web elements then you can process event, dom modification, css control, ajax communication and animation etc on it. This article will introduce how to use jQuery selectors.

Please Note: What ever selector you use, the returned object is a jQuery object, you can not set html dom attributes or call dom methods on it, you can only invoke jQuery object methods. If you want to know how to make DOM to jQuery objects transition, you can read article Difference Between Native Dom And jQuery Object

1. ID Selector.

Usage : $(“#web_element_id”) :  $(“#button_one”)

Return : jQuery object by specified id. Use two slash to escape special character.

2. Html Tag Name Selector.

Usage : $(“web_element_tag_name”) : $(“div”)

Return : jQuery object by specified html tag name.

3. Class Name Selector.

Usage : $(“.class_name”) : $(“.red”)

Return : jQuery object by specified class name.

4. Wildcard Selector.

Usage : $(“[#id | tag_name | .class_name]  *“) : $(“body *“)

Return : All child web elements of html body tag.

5. Group Selector.

Usage : $(“#id, tag_name, .class_name”) : $(“#button_id, #button_tag, .class_red”)

Return : A group of web element specified by each selector.

6. Basic Selector Example.

jquery basic selector example

 

There are one div and five buttons in this example.

  1. Click the first button will get the div object by id selector and change it’s color.
  2. Click the second button will get the div object by tag name selector and change it’s size.
  3. Click the third button will use wildcard selector to get all web elements and change their color.
  4. Click the fourth button will use group selector to get only div and fourth button and reverse change their color.
  5. Click the fifth button will get the div by it’s css class name and hidden it.
READ :   Ajax XMLHttpRequest Get Post Example

selector-basic.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Selector Basic</title>
    <script src="./lib/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">

        // This is jQuery entrance function like java main method.
        $(function () {

            // Get change div color button object by it's id. dot is escape character so use \\ before it.
            $("#button\\.id").click(function () {

                // Get the div by id and change the div color.
                $("#example_div").css({ color:"yellow", background:"blue"});
            });

            // Get change div size button by id.
            $("#button\\.tag").on('click', function () {

                // Get the div by html tag name and change the text size.
                $("div").css({ fontSize:"100px"});
            });

            // Get change all web element color button by id.
            $("#button_wildcard").click(function () {

                // Get all body tag child web elements by wildcard and set new css style.
                $("body *").css({color:'yellow', background:'green'});
            });

            // Get change div and this button color button by id.
            $("#button_group").click(function () {

                // Get web objects by a selector group.
                $("#button_group, #example_div").css({color:'green', background:'yellow'});
            });

            // Get hidden div button by id.
            $("#button_class").on('click', function () {

                // Get the div by css class name and hidden it.
                $(".red").css({ display:"none"});
            });
        })



    </script>
</head>
<body>

<div id="example_div" class="red">This is example div</div>
<button id="button.id">Change Div Color</button>
<button id="button.tag">Change Div Size</button>
<button id="button_wildcard">Change All Web Element Color</button>
<button id="button_group">Change Div And This Button Color</button>
<button id="button_class">Hidden Div</button>
</body>
</html>
(Visited 119 times, 1 visits today)

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.