jQuery selector is the foundation of the jQuery framework. You must first use a selector to choose a web element or a set of web elements then you can process events, dom modification, CSS control, ajax communication and animation, etc on it. This article will introduce how to use jQuery selectors.
Please Note: Whatever 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 the 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 slashes to escape a 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 elements specified by each selector.
6. Basic Selector Example.
If you can not watch the above video, you can see it on the youtube URL https://youtu.be/KnLpUBIJ8Hs
- There is one div and five buttons in this example.
- Click the first button will get the div object by id selector and change it’s color.
- Click the second button will get the div object by tag name selector and change it’s size.
- Click the third button will use wildcard selector to get all web elements and change their color.
- Click the fourth button will use the group selector to get only div and fourth button and reverse change their color.
- Click the fifth button will get the div by it’s CSS class name and hide it.
- Below is the example Html file source code. 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>
