CodesJava

Easy learning with example program codes

jQuery Selectors

A jQuery Selector is a function which is used to select and manipulate one or more HTML elements based on their id, classes, attributes, types etc.

The jQuery selectors can be easily identified by a dollar sign and a parentheses e.g. $() in the starting of the selector.

Some of the jQuery selectors are listed below:

SELECTORSSYNTAXDESCRIPTION
*$(“*”)Selects all elements
#id$(“#firstname”)Select the element with id=”firstname”
.class$(“.primary”)Select all elements with class=”primary”
element$(this)Selects the current HTML element
:first$(“p:first”)Selects the first <p> element
:first$(“ul li:first”)Selects the first <li> element of the first <ul>
:first-child$(“ul li:first-child”)Selects the first <li> element of every <ul>
[attribute]$(“[href]”)Selects all elements with an href attribute
[attribute=value]$(“a[target=’_blank’]”)Selects all <a> elements with a target attribute value equal to “_blank”
[attribute!=value]$(“a[target!=’_blank’]”)Selects all <a> elements with a target attribute value NOT equal to “_blank”
:button$(“:button”)Selects all <button> elements and <input> elements of type=”button”
:even$(“tr:even”)Selects all even <tr> elements
:odd$(“tr:odd”)Selects all odd <tr> elements

 

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").hide();
    });
});
</script>
</head>
<body>
 
<h2>Example of jQuery Selectors</h2>
 
<p>The do while loop repeatedly executes a block of statements until a particular condition is true. It first executes a block of statements and then check the condition.</p>
 
<button>Click me to hide paragraphs</button>
 
</body>
</html>

Try it

JS Bin on jsbin.com

Please follow and like us:
error








Copyright © 2019 CodesJava DMCA.com Protection Status