Skip Navigation LinksHome > Categories > Code from a Category

jQuery for Beginners: delve into the implementation of

User Name: serfcompany
Name: Serf
Contact Me:
Home Page:
php,mysql,javascript,html,css. Preferable working with Zend Framework. Good know javascript. I worked with various, javascript frameworks such as(jquery, YUI3, extjs, sencha touch). [More]
Viewed Times: 2178
Add Date: 02/12/2012
Hi all, who wants to learn this wonderful JavaScript framework. In this article we will delve a little bit to the implementation of jQuery. Learn how to place these or other events, as implemented in jQuery. Next it will be interesting. What happens when we call the 'jQuery'?

Understanding jQuery

jQuery function on its own is very simple

What we have inside? jQuery function (declared as a "wrapper") returns the initialized jQuery object - an instance of 'jQuery.fn.init' designer.

Good to know that when we call the 'jQuery', we actually create a completely unique facility with a certain set of properties. jQuery in this regard is very clever, because gives us an object which can be viewed as an array.Each of the elements (all together they are called "collections") is caused by a numerical index, just as well as an array. And jQuery ¬ęcasteth" to the subject property 'length', as one would expect from an array.This gives us endless possibilities. For example, this means that we can use some functionality 'Array.prototype'.

The method of jQuery 'slice' a good example:

Native method of jQuery 'slice' does not care about what 'this' points to a real array of - this is getting 'length' (length), as [0] [1], etc.

Another interesting property of the object jQuery - it '. Selector' and '. Context', which reflect the arguments that we pass, causing a 'jQuery (...)'.

One thing that is important not to lose sight of, jQuery returns us to some new object manipulation jQuery. If we run the method that alters in any way the collection, such as '. Parents ()', it will not change the jQuery object, it simply returns a new instance.

All the methods that are in any way alter the collection returns a new jQuery object, you can also refer to an old object by calling '. End ()' or the more advanced '. PrevObject'.

Easily create elements

Main opportunity to document object model, or simply DOM jQuery - is the creation of the elements. Version 1.4 has changed the method of their creation, making it much simpler and more concise.

To find out more about the methods according to jQuery, write to the console 'jQuery.attrFn'.


jQuery provides methods for serializing input-field one or more forms. This is useful when data is sent by means of XMLHttpRequest object (AJAX).Serialization has been realized for a long time and very few developers use it.Now, the administration of the entire form through AJAX, using jQuery, simply could not be easier. Take a look at an example.

Make the move anything on your page

The method of jQuery 'animate', probably the most flexible available. It can be used to animate anything, not only by manipulating the CSS properties and DOM elements not only. Now, how we can use.

When you specify a property which should animate (eg, 'left'), jQuery will check whether this property is the property of the style (''), then checks whether it is a sub-property 'style', - if not, just jQuery updates the 'left'. A small example to make it secure.

'top' - it is really a property CSS, so jQuery update '', a property of 'hello' to say this is impossible, so jQuery will simply update the property 'element.hello'.

We can easily take advantage of it. Say, for example, that we want to animate the square on the canvas (canvas). First we declare a constructor and a simple method of 'draw', which will be called at each step of the animation.

Here we create our 'Square' designer and one of its methods. Create a canvas (canvas) and the subsequent animation is also absolutely clear and simple.

This is a very simple effect, which clearly demonstrates the possibilities.


AJAX techniques jQuery ('. Ajax', '. Post', '. Get') return 'XMLHttpRequest' object that can be used to perform the corresponding operations in queries. For example:

Here we send a request by clicking on the button '. doRequest', an active interrupt request by pressing '. cancelRequest.

Another potential way to use - synchronous requests:

A few words about queues

jQuery has a built-in mechanism for working with queues, which is used all the methods of animation. We now look at a simple example:

Quick links bypassing the whole group, and when you move it to any nominated, which is very well suited for the organization of simple menus.

Method 'queue' is very similar to the call to 'each'. We pass it a function that will eventually be called for each item in the collection.

Post a Comment

Name: (Optional)
Email: (Optional, you can get an email if somebody replys your comments)*
Email me if somebody respons my comment below:
Enter Text
as Below:
(case insensitive, if hard to read, click the "get a new one" button)
* Your email address will not be shared with any third parties for any reason.
** Maximum 1000 charactors.