ShowPointThe meaning of Technology..

” Write less, Do more  ” , the slogan of the new javascript baby. Of course I am talking about JQuery. So What is JQuery ? and Why JQuery ?. All these Questations will be answered here.

Actually JQuery is a javascript library created in 2006 by John Resig. Like javascript it aims to create simple interactive web scripts , but in more simplified way. You have to Imagine how i it is quickly to access Ajax ablilities.

That’s not all what I need to say, so what is about DOM in JQuery ?. Yeah, I mean Document Object Model. Here will see the shrinked kind of code. The task of manipulating DOM objects is so brief  and you will find your self dropping out many things of  junk code !

JQuery is just a 25 kb .js file and that is all what you need to start working with. By using the traditional method to call javascript file in HTML Header :

 1. <script language=”javascript“ src=”jquery.js“></script>

 Notice that you must have a little background on javascript . All methods on JQuery library called by using the keyword (JQuery) or its alias ($). Plz see the example here:

1. // First method
2. JQuery.trim(str);

3. // Alternative method
4. $.trim(str);

Now let us know how to access the objects in any HTML Document. It is so easy and powerful :

1. // Select all elements with (id = “slide”)
2. $(”#slide“);

3. // Select all (img) tags
4. $(”<img>“);

5. // Select all (li) nested in (ul) which (id=”mylist”)
6. $(”ul#mylist  li“);

Well , this is advanced example provide more clarification about JQuery syntax, CSS manipulation and Events :

1. $(document).ready(function(){

2.          $(”.myButton“).click(function()

3.             { Do What ever here } );

4. });

 Above we have used (.ready) method with the whole HTML document. It is equivalent to (window.load()) in traditional javascript. In line number 2 we have selected the element with (class=”myButton”). Then you can do whatever in the response to click event.

So, you like to do intersting thing. The idea in this example is to hide a (div) with its content by get advantage of  click event and CSS classes. This one considered as JQuery effects example :

1. $(”.divPane  .delete“).click(function()

2. {

3. $(this).parents(”.divPane“).animate({opacity:hide},”slow“);

4. });

What happen in the above code ?. The JQuery engine selects the delete button (class=”delete”) embeded in the object of class divPane. Then again by using (this) which equal to (”.delete”) at that time to reach the parent objects like (divPane) and hide them slowely. This can be applied to a box having a close button. When the user click on that button, the box dissapers.

At this point we have to stop. see you later in next days with another interesting blogs. 

Link: jquery.com, Offical Website of  JQuery.