Selector is the most basic things in jQuery. Their use is very simple and straight and correct use ofselectors can enhance the efficiency of writing jQuery code. I have put together some of the common selectors which are pretty common.
ID Selector
Class Selector
Element Selector
Selector (loop through all elements)
Select Multiple Elements
The parent > child (immediate child element)
:first and :last (take the first element or the last element)
:even and :odd (Select elements with an even index or odd index elements. The index starts from 0.)
:eq(x) (Selects element with the specified index)
:contains(text) (Select element which contains specified text)
:hidden (Selects hidden elements)
:visible (Selects visible elements)
ID Selector
1 | $(document).ready( function () { |
2 | $( '#dvDummy' ).css( 'background' , '#000000' ); |
3 | }); |
1 | $(document).ready( function () { |
2 | $( '.class1' ).css( 'background' , '#000000' ); |
3 | }); |
1 | $(document).ready( function () { |
2 | $( 'p' ).css( 'font-size' , '14px' ); |
3 | }); |
1 | $(document).ready( function () { |
2 | $( 'form *' ).css( 'color' , '#FFFF00' ); |
3 | }); |
1 | $(document).ready( function () { |
2 | $( 'p, div' ).css( 'margin' , '0' ); |
3 | }); |
1 | $(document).ready( function () { |
2 | $( 'div > span' ).css( 'color' , '#FF0000' ); |
3 | }); |
1 | $(document).ready( function () { |
2 | $( 'span:first' ).css( 'color' , '#FFFF00' ); |
3 | $( 'span:last' ).css( 'color' , '#FFFF00' ); |
4 | }); |
1 | $(document).ready( function () { |
2 | $( 'tr:even' ).css( 'color' , '#00FF00' ); |
3 | $( 'tr:odd' ).css( 'color' , '#0000FF' ); |
4 | }); |
1 | $(document).ready( function () { |
2 | $( 'tr:eq(2)' ).css( 'background' , '#FFFF00' ); |
3 | }); |
1 | $(document).ready( function () { |
2 | $( 'div:contains("jQuery")' ).css( 'color' , '#FFFF00' ); |
3 | }); |
1 | $(document).ready( function () { |
2 | $( 'div:hidden' ).show(500); |
3 | }); |
1 | $(document).ready( function () { |
2 | $( 'div:visible' ).css( 'color' , '#FFFF00' ); |
3 | }); |
No comments:
Post a Comment