jQuery Series 2

Assalamualaykum Wr Br..Today we deal with Selector of jQuery..
What is Selectors in jQuery?
Selectors can be attribute or entity which selects entire content(s) it belongs and perform the required action.
The syntax of selectors in jQuery is as follows:
Now lets us start with an example whose html code can be coded as shown below:
and its associated jQuery code is shown as:
Lets traverse the code of jquery which is shown above:
The first line is the entry point of jquery execution as stated in Series1 post..
The next line is Selector which selects the id of control followed by “#”, here please refer the html code where button has id as followed by “#”. Continuing after selector action is specified here is click then again 3 line starts with Selector which selects all “div” tagged lines and then followed action to change its background color change to red. The next lines are specifies the syntax of closing.When you execute such code the output can as shown after clicking Test buttonoutputseries2.
Now we observe that only first two lines which are under div tag gets background color change on button test click…Here we add some more selectors to our jquery file as shown below:
$(“div,#testbutton,p”).css(“background-color”,”red”);//which results change in background color of button,all tagged entites..
$(“strong”).css(“background-color”,”red”);//changes background color for strong tagged entities
$(“div > p:first-child”).css(“background-color”,”red”);//changes background color for first div tagged entity.similarly $(“div > p:last-child”).css(“background-color”,”red”);
Now selecting Descending elements as: $(“div strong”).css(“background-color”,”red”);//here single space after div specifies that the descend strong tagged in parent div tagged entities.Now the selector for selecting even and odd tagged elements can be shown as “$(“p:even”).css(“background-color”,”red”);” note that the line index starts with 0.

Some more interesting stuff…. to the html page for third <p> tag, I gonna edit it as <p id=”third”>………save it and to the jquery file change the selector field as:


I hope you are enjoying…Now awesome feature of jQuery is here..Selecting based on “id” of an element is represented by “#” and for classes it is represented by “.”(dot symbol)..lets look our selector statement would be:


here multiple is the class name which we specify in html page as shown:


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s