Jquery Selectors
jQuery Selectors
jQuery selectors are 1 of the almost of import parts of the jQuery library.
jQuery Selectors
jQuery selectors let y'all to pick out too manipulate HTML element(s).jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes too much more. It's based on the existing CSS Selectors, too inwards addition, it has around ain custom selectors.
All selectors inwards jQuery start amongst the dollar sign too parentheses: $().
The chemical component Selector
The jQuery chemical component selector selects elements based on the chemical component name.You tin pick out all <p> elements on a page similar this:
$("p") ExampleWhen a user clicks on a button, all <p> elements volition hold upwards hidden:
Example
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
}); The #id Selector
The jQuery #id selector uses the id attribute of an HTML tag to uncovering the specific element.An id should hold upwards unique inside a page, too therefore y'all should usage the #id selector when y'all desire to uncovering a single, unique element.
To uncovering an chemical component amongst a specific id, write a hash character, followed past times the id of the HTML element:
$("#test") ExampleWhen a user clicks on a button, the chemical component amongst id="test" volition hold upwards hidden:
Example
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
}); The .class Selector
The jQuery degree selector finds elements amongst a specific class.To uncovering elements amongst a specific class, write a menstruation character, followed past times the advert of the class:
$(".test") ExampleWhen a user clicks on a button, the elements amongst class="test" volition hold upwards hidden:
Example
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
}); More Examples of jQuery Selectors
| Syntax | Description | Example |
|---|---|---|
| $("*") | Selects all elements |
| $(this) | Selects the electrical current HTML element | |
| $("p.intro") | Selects all <p> elements amongst class="intro" | |
| $("p:first") | Selects the kickoff <p> element | |
| $("ul li:first") | Selects the kickoff <li> chemical component of the kickoff <ul> | |
| $("ul li:first-child") | Selects the kickoff <li> chemical component of every <ul> | |
| $("[href]") | Selects all elements amongst an href attribute | |
| $("a[target='_blank']") | Selects all <a> elements amongst a target attribute value equal to "_blank" | |
| $("a[target!='_blank']") | Selects all <a> elements amongst a target attribute value NOT equal to "_blank" | |
| $(":button") | Selects all <button> elements too <input> elements of type="button" | |
| $("tr:even") | Selects all fifty-fifty <tr> elements | |
| $("tr:odd") | Selects all strange <tr> elements |
For a consummate reference of all the jQuery selectors, delight become to our jQuery Selectors Reference.
Functions In a Separate File
If your website contains a lot of pages, too y'all desire your jQuery functions to hold upwards tardily to maintain, y'all tin pose your jQuery functions inwards a split upwards .js file.When nosotros demonstrate jQuery inwards this tutorial, the functions are added lead into the <head> section. However, sometimes it is preferable to house them inwards a split upwards file, similar this (use the src attribute to refer to the .js file):
Example
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head> 
Comments
Post a Comment