WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

jQuery Selectors


jQuery selectors are a standout amongst the most critical parts of the jQuery library.


jQuery Selectors

jQuery selectors enable you to choose and control HTML element(s).

jQuery selectors are utilized to "find" (or select) HTML components dependent on their id, classes, types, properties, estimations of characteristics and considerably more. It depends on the current CSS Selectors, and likewise, it has some claim custom selectors.

All selectors in jQuery begin with the dollar sign and enclosures: $().


The component Selector

The jQuery component selector chooses components dependent on the component name.

You can choose all <p> components on a page like this:

$("p")

Example

When a client taps on a catch, all <p> components will be hidden:

Example

$(document).ready(function(){
    $("button").click(function(){
        $("p").hide();
    });
});

The #id Selector

The jQuery #id selector utilizes the id trait of a HTML tag to locate the particular element.

An id ought to be exceptional inside a page, so you should utilize the #id selector when you need to locate a solitary, one of a kind element.

To discover a component with a particular id, compose a hash character, trailed by the id of the HTML element:

$("#test")

Example

When a client taps on a catch, the component with id="test" will be hidden:

Example

$(document).ready(function(){
    $("button").click(function(){
        $("#test").hide();
    });
});

The .class Selector

The jQuery class selector discovers components with a particular class.

To discover components with a particular class, compose a period character, trailed by the name of the class:

$(".test")

Example

When a client taps on a catch, the components with class="test" will be hidden:

Example

$(document).ready(function(){
    $("button").click(function(){
        $(".test").hide();
    });
});
Try it yourself »

More Instances of jQuery Selectors

Syntax Description
$("*") Selects all elements
$(this) Selects the present HTML element
$("p.intro") Selects all <p> components with class="intro"
$("p:first") Selects the first <p> element
$("ul li:first") Selects the first <li> component of the first <ul>
$("ul li:first-child") Selects the first <li> component of each <ul>
$("[href]") Selects all components with a href attribute
$("a[target='_blank']") Selects all <a> components with an objective credit esteem equivalent to "_blank"
$("a[target!='_blank']") Selects all <a> components with an objective ascribe esteem NOT equivalent to "_blank"
$(":button") Selects all <button> components and <input> components of type="button"
$("tr:even") Selects all even <tr> elements
$("tr:odd") Selects all odd <tr> elements


Functions In a Different File

If your site contains a great deal of pages, and you need your jQuery capacities to be simple to keep up, you can put your jQuery capacities in a different .js file.

When we exhibit jQuery in this instructional exercise, the capacities are included straightforwardly into the <head> area. Notwithstanding, at times it is desirable over spot them in a different record, this way (use the src ascribe to allude to the .js record):

Example

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>