Про jquery

перепощу тут статью по Jquery пока на англ. , со временем переведу

objects and methods:

Хорошая цитата

Objects work so well because they act just like real life objects- objects have properties and methods. So if we were talking about a lamp, a property of it may be its height or width, say 12cm. A method of it may be to
shine (an action). And when it’s shining, its brightness property would be of a greater value than when it wasn’t.
– by Tim Scarfe

By being able to tie, essentially, ’sub-variables’ to variables you don’t have to worry if that variable is already used. A method is a function that is specific to an object. For example, the jQuery method ‘height’ (written as ‘.height()’) is a method of the jQuery object.
Use the following code as an example:

var testText = $('div#test').text();

This sets the value of the variable testText with the text of the div with the id of test;

The jQuery function, ‘$’, returns an object that contains all the elements that match the given CSS selector(s) (in this case ‘div#test’). This object has access to all of the methods mentioned in the jQuery documentation. ‘text’ is a method that returns ‘[the] combined text contents of all matched elements.’

Chainability:

JavaScript is ‘chainable’. ‘Chainable’ means you can have multiple methods joined together. For example this jQuery:

var testText = $('div#test').parent().text();

…and this HTML:

<div id="test">This is the content!</div>

That code would return the text of the parent of the div with the id of ‘test’. The parent method returned a new jQuery object containing the element’s parent.
Not all things are chainable. For example the text method doesn’t return a jQuery object, it returns a string. You use the parent method on a string, because that doesn’t make any sense at all. However, because it returns a string you can use all the methods that you can use with a string. These methods are documented very well here. For example, it is perfectly fine to use the split method on the text method, as demonstrated here:

var testText = $('div#test').parent().text().split(' ');

Now the variable testText would be set as an array that contains ‘This’,'is’,'the’, and ‘content!’ as items in the array.

jQuery can Behave Somewhat like an Array:

In JavaScript you access the first item in an array like this: ‘arrayVariable[0]‘. You find how many items are in an array using ‘arrayVariable.length’. You can do the same with jQuery. Each object that matches the specified selectors is an item in the array. Look at this:

/*
Assume the HTML looks like this:
<div id="wrapper">
 <div class="box">Content #1!</div>
 <div class="box">Content #2!</div>
 <div class="box">Content #3!</div>
 <div class="box">Content #4!</div>
</div>
<div id="wrapper2">
 <div class="box">Content2 #1!</div>
</div>
*/
 
// returns 4
$('#wrapper .box').length;
 
// num is equal to 4
var num = $('#wrapper .box');
num = num.length;
 
// text is equal to 'Content #2!'
var text = $("#wrapper .box")[1];
 
// text is equal to 'Content #1'
var text = $("#wrapper .box")[0];
 
// text is equal to 'Content2 #1'
var text = $("#wrapper2 .box")[0];

jQuery in a Variable:

You can store the results from a jQuery selection in a variable, and still access all the same methods. It is good practice to prepend the variable with ‘$’ to remember that you are, indeed, working with a jQuery object. Example:

var $testBox = $('#test');
// the variable testHTML is equal to the content's of '#test'
var testHTML = $testBox.html()

Keep Animations from Building Up:

The problem is if someone hovers back-and-forth between two links really fast, the animations build up and it slides back and forth without you doing anything. 

1. We want to keep the animation from building up.
2. If an animation is in progress we want to stop it immediately.
3. We then need to move it in the other direction.

Details here 

What Does ‘callback’ Mean:

A callback is a function, or the name of a function that is run on the completion of the function you called. This is very, very useful on actions that take time to complete (for example: the SlideUp method). When I didn’t know how to use
a callback, I would use a timeout like this:

$('#test').slideUp(400);
setTimeout(function () {
 alert('ran after the slideup!');
}, 400);

Although this works fine, what if you don’t know the length of the delay, like in an AJAX request? Sometimes the code would work, sometimes, not.
The solution is to use the callback function. You have two options:

1. You can create a function and then pass it as a string ‘functionName’
2. You can use what is known as an anonymous function. This is a function that has no name is typically used only once.

You can use the variable this in the callbacks. this is the HTML DOM object of the element, that in this case is being slid up. Like before, to manipulate it with jQuery you must use ‘$(“this”)’. I usually prefer the anonymous method, but I will show you both:

function makeAlert () {
 $(this).html('Ran this function!');
}
// both lines do the same thing
$('#test').slideUp(400, makeAlert);
$('#test').slideUp(400, function () {
 $(this).html('Ran the anonymous function!');
});

Doing Something when any AJAX Starts and Ends:

I used to manually show an animated GIF during an AJAX request to show that something was happening, and then manually hide it afterwards. jQuery provides us with some built-in methods that allow us to run functions when any AJAX request starts and when any request completes. This makes life much easier overall. For this example, I am going to assume that you already have some sort of loading symbol (a div that says loading, an image, anything) with an id of ‘loader’. Here is the code:

$('#loader').ajaxStart(function () {
 $(this).fadeIn();
});
$('#loader').ajaxStop(function () {
 $(this).fadeOut();
});

Doing Something Once the Images are Loaded:

Usually you don’t need to wait until the images are loaded to run you jQuery, but if you are manipulating images, then you need to wait until the images load, otherwise jQuery will (correctly) think that the width and height of the image is 0px by 0px. This is useful when you want to have jQuery automatically limit the size of image to fit the content. Fortunately this very easy:

$(window).load(function () {
 // code to run once images load
});

Don’t shift all of your $(document).ready() JavaScript into $(window).load() because then none of your JavaScript will run until the images have been loaded, which is not what you want! The load method also works on any specific image. For example:

$(document).ready(function () {
 $('#logo-image').load(function () {
  alert('finished loading the logo!');
 });
});

This time, I wrapped it in $(document).ready() because once the HTML is done loading, we know that there is supposed to be an image there and we can then make something happen once the image finally loads.