jQuery Series 4

Assalamualaykum Wr Br..Welcome to the jQuery Series 4
Lets code the html as shown below:
Now its associated jQuery code can be written as:
Let us traverse the code, line 2 depicts the selector “h1” when clicked calls a function which in turn have a selector “h2” which gets hided as per the action defined. The parameter inside the hide method is the milli seconds which allows to hide the selector with such speed or you can consider the parameter as the speed of the event. The following images shows the output as:
The heading3 is going to take place of heading 2 after clicking the heading 1 i.e., “Click Here”.
Lets explore jQuery beauty a bit deep…The above requirement was that the html page consists of 3 headings and clicking Heading 1 hides heading 2…Right??
Now lets reverse our requirement as on html page there should be 2 headings and clicking heading 1 should show heading 2 and at the ed the page should have 3 headings..
To implement this there is no need to change our html code but jQuery as shown below:
Check it out its output its very interesting….That’s all for the day…Hope enjoyed…

jQuery Series 3

Assalamualaykum wr br…Today we are going to explore the jQuery a bit more…Now lets start with the html code as shown below:
Now associated jQuery file can be written as below:
Now here we observe a keyword ‘this’ which does not need to be in double quotes and refers to the current clicked selection. Execute the code and experience the changes…Hope enjoyed….
Now lets look it in a little bit deep…
I specify the ‘unbind’ method which releases all the actions associated with selectors whose jQuery code is shown as below:
This ‘unbind’ method allows all events to be deactivate on selector ‘h1’.
Now I specify a parameter in unbind(“mouseleave”) which allows mouseleave event to get deactivate for all other events(actions). A sample output is given as shown below:
Thats all for the day…Enjoy….

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:

JQUERY Series 1

Assalamualaykum Wr Br…Lets quick start our journey towards the world of JQUERY which is quite simple to use than JavaScript. JQuery is a library of JavaScript. jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

The prototype of jQuery is as follows:
2.Then modify step 1 as:$(document).ready(function () {//write code here
jQuery always start with symbol ‘$’ and ready keywords specifies that after all html code is loaded on browser then start executing the jQuery code. In other terms, jQuery controls all the execution of markup code and JavaScript. I understand that theory seems so boring…yeah now lets start our practical session.
step 1: Write the HTML code to display 2 headings, when clicked on first heading it shows corresponding paragraph text and on again click hides it. The next heading will be the static heading. The behavior is achieved from the jQuery code as shown below:
$(“p”).hide(); //this code specifies the browser not to display paragraph(

blah blah

$(“h1”).click(function(){});//this piece code of code illustrates on click to heading 1 execute the function whose implementation is coded as:
$(this).next().slideToggle(300);//instructs that on click of heading toggle it to 300pxs..thats all in our jQuery code…save the file as “my_code.js”.
Step 2: Now write the simple html code that is shown as:
Please Note: It is simple html markup code written and in body tag we wrote two script tags, first is for referencing the library of jQuery which is kept in same directory location where all my files associated to this page is present and other script tag specifies the “my_code.js” jQuery file.
It is the protocol that these order of the scripts is must.
If you dont have the jQuery library with you then download it from http://jquery.com/ and reference it in src=”my_code.js” and close the script tag as show above.
When you open your html document using browsers then you would get is as shown:
Now click on Heading 1.
…Thats all for this series 1..we shall meet soon with various tips and tricks of jQuery..till then Enjoy..