I am primarily a Java developer but I accept done a lot of operate alongside Java spider web application including Servlet, JSP, as well as JavaScript on the customer side. It was hard for me to perform customer side validation using JavaScript but ever since I come upwards to know most jQuery, I only dear to practise to a greater extent than validation as well as other materials on the customer side. The jQuery gives you lot immense ability to practise things alongside HTML pages as well as one-half of that ability comes from its CSS-like selector engine, which allows you lot to select whatever chemical constituent or grouping of elements from HTML page as well as thence practise things alongside them e.g. changes their mode or behavior. For example, you lot tin pick out handle of the divs as well as cover them, you lot tin pick out handle of the buttons as well as brand them clickable as well as thence on. In gild to acquire jQuery, you lot quest to acquire its selector engine as well as inwards this tutorial, I am going to portion you lot 10 skillful examples of dissimilar jQuery selectors e.g. ID selector to select unmarried HTML element, the shape selector to select grouping of an chemical constituent as well as * wildcard to select all elements. Since jQuery supports many types of a selector, approximately of them I didn't fifty-fifty know, it's skillful to know every bit much every bit possible most them.
So hither is the listing of 10 jQuery selector I am going to portion alongside you lot guys:
1) id selector
2) shape 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 encounter approximately examples of each of these jQuery selectors as well as when to occupation which jQuery selector
jQuery ID selector Example
Id selector is 1 of the most used jQuery selectors as well as used to select exactly 1 specific chemical constituent from a page. For example, $("#main") volition render the HTML chemical constituent alongside id every bit main. exactly similar CSS, you lot quest to occupation # (hash) to select chemical constituent alongside their IDs. It's too the fastest selector as well as if you lot tin occupation thence e'er prefer ID selector. They are too really pop inwards jQuery interviews as well as you lot volition e'er encounter 1 to a greater extent than 2 questions from ID selector.
examples:
jQuery shape selector Example
The shape selector is approximately other most mutual jQuery selector as well as used to select a grouping of elements from HTML page. If you lot remember, the shape is used to mode elements inwards jQuery but it tin too occupation to grouping related elements together inwards jQuery fifty-fifty if they don't accept whatever style. Just similar inwards CSS, a shape selector is started alongside a . (dot) e.g. $(".active") volition render all elements from page which has class="active".
Here is a duo of examples of jQuery shape selector:
If you lot recollect the $() is a shortcut of jQuery() method as well as if you lot occupation jQuery you lot may acquire the mistake 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, too known every bit element selector selects all the specified chemical constituent from the HTML page. For example, $("p") volition select all paragraphs as well as $("div") volition select all divs. Internally tag selector calls the getElementsByTagName() occupation 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 as well as 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 acquire to a greater extent than most advanced selector inwards jQuery.
jQuery kid selector Example
The kid selector is similar to descendant selector but it alone 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 shape 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. you lot tin occupation :even to select fifty-fifty elements (zero indexed) e.g. fifty-fifty rows inwards tabular array to mode them differently. Similarly, :odd tin live on used to select :odd elements inwards DOM tree as well as :checked tin live on used to discovery banking enterprise check elements e.g. checked radio buttons or banking enterprise check boxes. See jQuery inwards Action to acquire to a greater extent than how pseudo selector plant inwards jQuery.
jQuery multiple selector Example
The multiple selector is zippo but combining to a greater extent than than 1 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, as well as p elements from the DOM. Remember, private selectors are separated past times comma.
jQuery non selector Example
The :not() jQuery selector selects all elements except the specified element. This is to a greater extent than oft than non used together alongside approximately 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 acquire to a greater extent than most how to occupation 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 you lot desire to apply a mode to all elements of HTML page. Btw, exactly live on careful The all, or universal, selector is extremely slow, except when used past times itself.
jQuery has selector Example
The :has() selector selects all elements that accept 1 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 accept <h1> chemical constituent within of them.
That's all most 10 examples of jQuery selectors for spider web developers. I am certain you lot accept learned a duo of novel things today. Though most of them times you lot would discovery yourself using exactly shape as well as id selector, knowing dissimilar types of selector volition assistance you lot to occupation jQuery to a greater extent than effectively. Always recollect to occupation 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 exactly using :radio :checked.
Related jQuery tutorials you lot may like
Further Reading
The Complete jQuery Course: From Beginner To Advanced!
Up as well as Running alongside jQuery
jQuery Fundamentals By Dan Wahlin
So hither is the listing of 10 jQuery selector I am going to portion alongside you lot guys:
1) id selector
2) shape 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 encounter approximately examples of each of these jQuery selectors as well as when to occupation which jQuery selector
jQuery ID selector Example
Id selector is 1 of the most used jQuery selectors as well as used to select exactly 1 specific chemical constituent from a page. For example, $("#main") volition render the HTML chemical constituent alongside id every bit main. exactly similar CSS, you lot quest to occupation # (hash) to select chemical constituent alongside their IDs. It's too the fastest selector as well as if you lot tin occupation thence e'er prefer ID selector. They are too really pop inwards jQuery interviews as well as you lot volition e'er encounter 1 to a greater extent than 2 questions from ID selector.
examples:
// Select HTML chemical constituent alongside id every bit primary e.g. div id="main" $("#main") volition // Select HTML chemical constituent alongside id every bit guess_box e.g. div id="guess_box" $("#guess_box") volition
jQuery shape selector Example
The shape selector is approximately other most mutual jQuery selector as well as used to select a grouping of elements from HTML page. If you lot remember, the shape is used to mode elements inwards jQuery but it tin too occupation to grouping related elements together inwards jQuery fifty-fifty if they don't accept whatever style. Just similar inwards CSS, a shape selector is started alongside a . (dot) e.g. $(".active") volition render all elements from page which has class="active".
Here is a duo of examples of jQuery shape selector:
// select all elements alongside shape every bit active e.g. all divs $(".active") // select all elements alongside shape every bit clickable e.g. all clickable divs $(".clickable")
If you lot recollect the $() is a shortcut of jQuery() method as well as if you lot occupation jQuery you lot may acquire the mistake 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, too known every bit element selector selects all the specified chemical constituent from the HTML page. For example, $("p") volition select all paragraphs as well as $("div") volition select all divs. Internally tag selector calls the getElementsByTagName() occupation 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 as well as 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 acquire to a greater extent than most 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 alone 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 shape 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. you lot tin occupation :even to select fifty-fifty elements (zero indexed) e.g. fifty-fifty rows inwards tabular array to mode them differently. Similarly, :odd tin live on used to select :odd elements inwards DOM tree as well as :checked tin live on used to discovery banking enterprise check elements e.g. checked radio buttons or banking enterprise check boxes. See jQuery inwards Action to acquire to a greater extent than how pseudo selector 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 zippo but combining to a greater extent than than 1 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, as well as p elements from the DOM. Remember, private selectors are separated past times comma.
//select all div as well as span $( "div, bridge )
jQuery non selector Example
The :not() jQuery selector selects all elements except the specified element. This is to a greater extent than oft than non used together alongside approximately 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 acquire to a greater extent than most how to occupation 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 you lot desire to apply a mode to all elements of HTML page. Btw, exactly live on careful The all, or universal, selector is extremely slow, except when used past times itself.
// select all HTML elements $(*)
jQuery has selector Example
The :has() selector selects all elements that accept 1 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 accept <h1> chemical constituent within of them.
// select all p which has bridge nether it $("p:has(span)")
That's all most 10 examples of jQuery selectors for spider web developers. I am certain you lot accept learned a duo of novel things today. Though most of them times you lot would discovery yourself using exactly shape as well as id selector, knowing dissimilar types of selector volition assistance you lot to occupation jQuery to a greater extent than effectively. Always recollect to occupation 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 exactly using :radio :checked.
Related jQuery tutorials you lot may like
- How to acquire electrical flow URL, Parameters as well as Hash using jQuery? (solution)
- How to occupation to a greater extent than than 1 jQuery UI DatePicker inwards JSP page? (example)
- How to practise tab-based UI using jQuery? (example)
- How to redirect a page URL using jQuery as well as JavaScript? (solution)
- How to write HelloWorld inwards jQuery? (solution)
- 5 Books to acquire jQuery for Web developers (books)
- How to charge jQuery inwards a spider web page? (solution)
- Difference betwixt jQuery document.ready() as well as JavaScript window.onload event? (answer)
Further Reading
The Complete jQuery Course: From Beginner To Advanced!
Up as well as Running alongside jQuery
jQuery Fundamentals By Dan Wahlin
No comments:
Post a Comment