JQuery guide for beginner’s part 2 – Selecting Elements

HI, in previous lesson we seen about the jquery introduction and how we start the jquery syntax, today we are going to learn about the jquery selectors. The jquery library allows you to select html elements by using them in $(‘’) here we can use single or double quotations, selectors are not a new concept in jquery we already worked with selectors in css. lets see the few examples

CSS Selector Example:

The bellow css example change the all paragraphs to white color here the P is a selector.

 p {color:#fff} // this applies to all paragraph tags
 .p {color:#fff} // this applies to those tags only assigned a P as a class name 
 #p {color:#fff} // this applies to those tags only assigned a P as a ID name

JQery Selector Example: 

The bellow code give’s the same output as we seen from css code.

 $(document).ready(function(){ 

 $(‘p’).css(‘color’ ‘#fff’); //this apply to all P elements 
 $(‘.p’).css(‘color’ ‘#fff’); //this apply to element by Class name 
 $(‘#p’).css(‘color’ ‘#fff’); //this apply to element by ID 

 }); 

We can also select child elements using direct descendant combinator (>). If we want select anchor elements which is child to li element we could use the selector like this $(‘li > a’) this would select the all anchor elements which is children of list item

 $(‘li > a’); // this selected the all anchor elements inside the li tag.

We can also select the html elements by index order means first and last, if we want select first element we could use htmlElement:first method and htmlElement:last for to select last element. 

To select first and last element

$(‘li:first’) // selects the first element of li tag 

$(‘li:last’) // selects the last element of li tag