I am primarily a Java developer but I convey done a lot of run amongst Java spider web application including Servlet, JSP, in addition to JavaScript on the customer side. It was hard for me to perform customer side validation using JavaScript but ever since I come upwardly to know almost jQuery, I only dear to practise to a greater extent than validation in addition to other materials on the customer side. The jQuery gives yous immense ability to practise things amongst HTML pages in addition to one-half of that ability comes from its CSS-like selector engine, which allows yous to select whatever chemical constituent or grouping of elements from HTML page in addition to thus practise things amongst them e.g. changes their manner or behavior. For example, yous tin select grip of the divs in addition to enshroud them, yous tin select grip of the buttons in addition to brand them clickable in addition to thus on. In lodge to larn jQuery, yous need to larn its selector engine in addition to inwards this tutorial, I am going to portion yous 10 proficient examples of dissimilar jQuery selectors e.g. ID selector to select unmarried HTML element, the degree selector to select grouping of an chemical constituent in addition to * wildcard to select all elements. Since jQuery supports many types of a selector, precisely about of them I didn't fifty-fifty know, it's proficient to know equally much equally possible almost them.
So hither is the listing of 10 jQuery selector I am going to portion amongst yous guys:
1) id selector
2) degree selector
3) tag selector
4) descendant selector
5) kid selector
6) pseudo-class selector
7) multiple selectors
8) non selector
9) all selector
10) has selector
Now, let's meet precisely about examples of each of these jQuery selectors in addition to when to role which jQuery selector
jQuery ID selector Example
Id selector is ane of the most used jQuery selectors in addition to used to select precisely ane specific chemical constituent from a page. For example, $("#main") volition render the HTML chemical constituent amongst id equally main. precisely similar CSS, yous need to role # (hash) to select chemical constituent amongst their IDs. It's likewise the fastest selector in addition to if yous tin role thus e'er prefer ID selector. They are likewise really pop inwards jQuery interviews in addition to yous volition e'er meet ane to a greater extent than 2 questions from ID selector.
examples:
jQuery degree selector Example
The degree selector is precisely about other most mutual jQuery selector in addition to used to select a grouping of elements from HTML page. If yous remember, the degree is used to manner elements inwards jQuery but it tin likewise role to grouping related elements together inwards jQuery fifty-fifty if they don't convey whatever style. Just similar inwards CSS, a degree selector is started amongst a . (dot) e.g. $(".active") volition render all elements from page which has class="active".
Here is a yoke of examples of jQuery degree selector:
If yous yell back the $() is a shortcut of jQuery() method in addition to if yous role jQuery yous may acquire the fault similar "Uncaught ReferenceError: $ is non defined" if the browser is non able to charge the jQuery properly.
jQuery tag selector Example
The jQuery tag selector, likewise known equally element selector selects all the specified chemical constituent from the HTML page. For example, $("p") volition select all paragraphs in addition to $("div") volition select all divs. Internally tag selector calls the getElementsByTagName() portion to render the appropriate elements from DOM.
jQuery descendant selector Example
The descendant selector selects all elements that are descendants of a given ancestor. The format of this selector is $(ancestor descendant) where ancestor is whatever valid selector in addition to descendant is a valid selector to filter descendant elements. For example, $( "form input" ) volition render whatever input which are descendant of shape chemical constituent i.e. they are within whatever form. See Head First jQuery to larn to a greater extent than almost advanced selector inwards jQuery.
jQuery kid selector Example
The kid selector is similar to descendant selector but it entirely render the straight child. It has format of $(parent > child) , for example $("div > span") volition render all bridge which are straight kid of div elements.
jQuery pseudo degree selector Example
The :even, :odd, :checked are examples of pseudo selectors, they are non portion of CSS specification but extension of jQuery to supply convenience e.g. yous tin role :even to select fifty-fifty elements (zero indexed) e.g. fifty-fifty rows inwards tabular array to manner them differently. Similarly, :odd tin live on used to select :odd elements inwards DOM tree in addition to :checked tin live on used to abide by cheque elements e.g. checked radio buttons or cheque boxes. See jQuery inwards Action to larn to a greater extent than how pseudo selector industrial plant inwards jQuery.
jQuery multiple selector Example
The multiple selector is nada but combining to a greater extent than than ane selector inwards unmarried search e.g. $(selector1, selector2, selector3) is a multiple selector which selects the combined results of all the specified selectors. For example, $( "div, span, p" ) volition select all div, span, in addition to p elements from the DOM. Remember, private selectors are separated yesteryear comma.
jQuery non selector Example
The :not() jQuery selector selects all elements except the specified element. This is by in addition to large used together amongst precisely about other selector to select everything except the specified chemical constituent inwards a grouping e.g. select all checkboxes which are unchecked, or select the input types which are empty. See jQuery:Novice to Ninja to larn to a greater extent than almost how to role non selector inwards JavaScript
jQuery all selector Example
The all or universal selector is used to select all elements e.g. $(*) volition select all elements from HTML page. This is useful when yous desire to apply a manner to all elements of HTML page. Btw, precisely live on careful The all, or universal, selector is extremely slow, except when used yesteryear itself.
jQuery has selector Example
The :has() selector selects all elements that convey ane or to a greater extent than elements within of them, that matches the specified selector. For example $("b:has(h1)") will select all <b> elements than convey <h1> chemical constituent within of them.
That's all almost 10 examples of jQuery selectors for spider web developers. I am certain yous convey learned a yoke of novel things today. Though most of them times yous would abide by yourself using precisely degree in addition to id selector, knowing dissimilar types of selector volition help yous to role jQuery to a greater extent than effectively. Always yell back to role the most specific selector to gain the best functioning from jQuery. For example, using input[type=radio]:checked is to a greater extent than specific than precisely using :radio :checked.
Related jQuery tutorials yous may like
Reference
https://api.jquery.com/category/selectors/
So hither is the listing of 10 jQuery selector I am going to portion amongst yous guys:
1) id selector
2) degree selector
3) tag selector
4) descendant selector
5) kid selector
6) pseudo-class selector
7) multiple selectors
8) non selector
9) all selector
10) has selector
Now, let's meet precisely about examples of each of these jQuery selectors in addition to when to role which jQuery selector
jQuery ID selector Example
Id selector is ane of the most used jQuery selectors in addition to used to select precisely ane specific chemical constituent from a page. For example, $("#main") volition render the HTML chemical constituent amongst id equally main. precisely similar CSS, yous need to role # (hash) to select chemical constituent amongst their IDs. It's likewise the fastest selector in addition to if yous tin role thus e'er prefer ID selector. They are likewise really pop inwards jQuery interviews in addition to yous volition e'er meet ane to a greater extent than 2 questions from ID selector.
examples:
// Select HTML chemical constituent amongst id equally mind e.g. div id="main" $("#main") volition // Select HTML chemical constituent amongst id equally guess_box e.g. div id="guess_box" $("#guess_box") volition
jQuery degree selector Example
The degree selector is precisely about other most mutual jQuery selector in addition to used to select a grouping of elements from HTML page. If yous remember, the degree is used to manner elements inwards jQuery but it tin likewise role to grouping related elements together inwards jQuery fifty-fifty if they don't convey whatever style. Just similar inwards CSS, a degree selector is started amongst a . (dot) e.g. $(".active") volition render all elements from page which has class="active".
Here is a yoke of examples of jQuery degree selector:
// select all elements amongst degree equally active e.g. all divs $(".active") // select all elements amongst degree equally clickable e.g. all clickable divs $(".clickable")
If yous yell back the $() is a shortcut of jQuery() method in addition to if yous role jQuery yous may acquire the fault similar "Uncaught ReferenceError: $ is non defined" if the browser is non able to charge the jQuery properly.
jQuery tag selector Example
The jQuery tag selector, likewise known equally element selector selects all the specified chemical constituent from the HTML page. For example, $("p") volition select all paragraphs in addition to $("div") volition select all divs. Internally tag selector calls the getElementsByTagName() portion to render the appropriate elements from DOM.
// select all bridge elements $("span");
jQuery descendant selector Example
The descendant selector selects all elements that are descendants of a given ancestor. The format of this selector is $(ancestor descendant) where ancestor is whatever valid selector in addition to descendant is a valid selector to filter descendant elements. For example, $( "form input" ) volition render whatever input which are descendant of shape chemical constituent i.e. they are within whatever form. See Head First jQuery to larn to a greater extent than almost advanced selector inwards jQuery.
// select all bridge elements which are descendant of divs $("div span")
jQuery kid selector Example
The kid selector is similar to descendant selector but it entirely render the straight child. It has format of $(parent > child) , for example $("div > span") volition render all bridge which are straight kid of div elements.
// select all <b> elements which are straight kid of <p> $("p > b")
jQuery pseudo degree selector Example
The :even, :odd, :checked are examples of pseudo selectors, they are non portion of CSS specification but extension of jQuery to supply convenience e.g. yous tin role :even to select fifty-fifty elements (zero indexed) e.g. fifty-fifty rows inwards tabular array to manner them differently. Similarly, :odd tin live on used to select :odd elements inwards DOM tree in addition to :checked tin live on used to abide by cheque elements e.g. checked radio buttons or cheque boxes. See jQuery inwards Action to larn to a greater extent than how pseudo selector industrial plant inwards jQuery.
// alter the background color of fifty-fifty rows $( "tr:even" ).css( "background-color", "#bbf" ); // alter the background color of strange rows $( "tr:odd" ).css( "background-color", "#bb0" );
jQuery multiple selector Example
The multiple selector is nada but combining to a greater extent than than ane selector inwards unmarried search e.g. $(selector1, selector2, selector3) is a multiple selector which selects the combined results of all the specified selectors. For example, $( "div, span, p" ) volition select all div, span, in addition to p elements from the DOM. Remember, private selectors are separated yesteryear comma.
//select all div in addition to span $( "div, bridge )
jQuery non selector Example
The :not() jQuery selector selects all elements except the specified element. This is by in addition to large used together amongst precisely about other selector to select everything except the specified chemical constituent inwards a grouping e.g. select all checkboxes which are unchecked, or select the input types which are empty. See jQuery:Novice to Ninja to larn to a greater extent than almost how to role non selector inwards JavaScript
// select all checkboxes which non checked $(input[type=checkbox]:not(:checked))
jQuery all selector Example
The all or universal selector is used to select all elements e.g. $(*) volition select all elements from HTML page. This is useful when yous desire to apply a manner to all elements of HTML page. Btw, precisely live on careful The all, or universal, selector is extremely slow, except when used yesteryear itself.
// select all HTML elements $(*)
jQuery has selector Example
The :has() selector selects all elements that convey ane or to a greater extent than elements within of them, that matches the specified selector. For example $("b:has(h1)") will select all <b> elements than convey <h1> chemical constituent within of them.
// select all p which has bridge nether it $("p:has(span)")
That's all almost 10 examples of jQuery selectors for spider web developers. I am certain yous convey learned a yoke of novel things today. Though most of them times yous would abide by yourself using precisely degree in addition to id selector, knowing dissimilar types of selector volition help yous to role jQuery to a greater extent than effectively. Always yell back to role the most specific selector to gain the best functioning from jQuery. For example, using input[type=radio]:checked is to a greater extent than specific than precisely using :radio :checked.
Related jQuery tutorials yous may like
- How to acquire electrical current URL, Parameters in addition to Hash using jQuery? (solution)
- How to role to a greater extent than than ane jQuery UI DatePicker inwards JSP page? (example)
- How to practise tab-based UI using jQuery? (example)
- How to redirect a page URL using jQuery in addition to JavaScript? (solution)
- How to write HelloWorld inwards jQuery? (solution)
- 5 Books to larn jQuery for Web developers (books)
- How to charge jQuery inwards a spider web page? (solution)
- Difference betwixt jQuery document.ready() in addition to JavaScript window.onload event? (answer)
Reference
https://api.jquery.com/category/selectors/
0 Response to "10 Example of jQuery Selectors for Web Developers"
Posting Komentar