Jquery USES a concise tutorial

One, select web elements
The basic design and usage of jQuery is "select a web element and do something with it." This is what distinguishes it from other libraries.
The first step in using jQuery is often to put a selection expression into the constructor jQuery()(short for $) and get the selected element.

The selection expression can be a CSS selector:

$(document)//Select the entire document object
$('#myId')//Select the web element & cake with ID myId;
$('div.myClass')//Select the div element & cake with class as myClass;    
$('input[name=first]')// choose name Attribute is equal to the first the input The element 

It can also be a jquery-specific expression:

$('a:first')//Select the first a element & cake in the page;
$('tr:odd')//Select the odd row & NBSP; of the form;
$('#myForm :input')//Select the input element & NBSP; in the form;
$('div:visible') //Select the visible div element & cake;
$('div:gt(2)')//Select all divs except the first three & NBSP;
$('div:animated')// Select the current animated state div The element   

Change the result set
If multiple elements are selected, jQuery provides filters to shrink the result set:

$('div').has('p'); //Select the div element & NBSP; that contains the p element;
$('div').not('.myClass'); //Choose the div element & NBSP; that class does not equal myClass;
$('div').filter('.myClass'); //Choose the div element & NBSP; that class is equal to myClass;
$('div').first(); //Select the first div element & NBSP;
$('div').eq(5); // Select the first 6 a div The element 

There are times when we need to move from the result set to the relevant elements nearby. JQuery also provides a way to move around the DOM tree:

$('div').next('p'); //Select the first p element after the div element & NBSP;
$('div').parent(); //Select the parent element of the div element & NBSP;
$('div').closest('form'); //Select the form parent element closest to the div & cake;
$('div').children(); //Select all child elements of div & NBSP;
$('div').siblings(); // choose div Sibling elements  

Chain operation
When a web element is selected, you can do something with it.
JQuery allows all operations to be linked together and written in a chain, such as:

$('div').find('h3').eq(2).html('Hello');

We can unpack it like this, as follows:

$('div')//Find the div element & cake;
.find('h3')//Choose the h3 element & NBSP;
.eq(2)//Choose the third h3 element & NBSP;
.html('Hello'); // Change its content to Hello  

This is the most commendable and convenient feature of jQuery. The idea is that each jQuery operation returns a jQuery object, so the different operations can be linked together.

JQuery also provides the.end () method, which allows the result set to take a step back:

$('div')  
.find('h3')  
.eq(2)  
.html('Hello')  
.end()//Step back to selecting all h3 elements & NBSP;
.eq(0)//Select the first h3 element & cake;
.html('World'); // Change its content to World  

Four, the operation of elements: value and assignment
The most common requirement for manipulating web elements is to get their values or to assign them.
JQuery USES the same function to perform both the getter and the setter. Whether to evaluate or assign depends on the parameters of the function.
$(' h1). The HTML (); // HTML () has no parameters, which means the value $('h1').html('Hello') to fetch h1; // HTML () has the parameter Hello, which means to assign value & PI to h1;
The common value and assignment functions are as follows:

.html()  Take out or set html content 
.text()  Take out or set text content   
.attr()  Fetch or set the value of a property   
.width()  Retrieves or sets the width of an element   
.height()  Retrieves or sets the height of an element   
.val()  Fetch the value of a form element 

Note that if the result set contains more than one element, all of them will be assigned values. When evaluated, it takes out the value of only the first element (.text(), which takes out the text contents of all elements).
Five, element operation: move
There are two ways to move the selected element: one is to move the element directly, and the other is to move the other element so that the target element is where we want it to be.

Suppose we select a div element, and we need to move it behind the p element.

The first is to use.insertafter (), which moves the div element after the p element:

$('div').insertAfter('p');

The second way is to use.after() and put the p element before the div element:

$('p').after('div');

On the surface, the effects of the two methods are the same, the only difference seems to be the perspective of the operation. But in fact, they have one important difference, and that is that they return different elements. The first method returns the div element, and the second method returns the p element. You can choose which method you want to use.

There are four pairs of operations using this pattern

.insertAfter() and .after() : on the outside of an existing element, insert the element from behind   
.insertBefore() and .before() : on the outside of an existing element, insert the element from the front   
.appendTo() and .append() : inside an existing element, insert the element from behind   
.prependTo() and .prepend() : inside an existing element, insert the element from the front 

Six, the operation of elements: copy, delete and create

Duplicate elements using.clone().
Remove elements using.remove() and.detach(). The difference between the two is that the former does not retain the event of the deleted element, while the latter does, facilitating the use of the reinserted document.

Empty the element content (but not delete it) using.empty().

Creating a new element is as simple as passing the new element directly into jQuery's constructor:

$('
Hello
');  
$('
new list item
');  
$('ul').append('
list item
');

Seven, tools and methods
In addition to working with selected elements, jQuery provides utility methods that can be used without selecting an element.
If you understand the inheritance principle of Javascript language, then you can understand the essence of tool method. It is a method defined on the jQuery constructor, jquery.method (), so it can be used directly. The methods that manipulate the elements are the methods defined on the constructor's prototype object, namely jQuery. Prototype.method (), so you must generate an instance (that is, select the element) and use it. If you don't understand this distinction, it's not too much of a problem, just think of the tool method as something you can use directly, like a javascript native function.

If you only want the event to run once, use the.one() method.

$("p").one("click" .  function(){  
alert("Hello"); //Runs only once, and subsequent clicks do not run & NBSP;
});

.unbind() is used to unbind events.

$('p').unbind('click');

All event handlers can accept an event object as an argument, such as e in the following example:

$("p").click(function(e){  
alert(e.type); //"click"  
});

This event object has some useful properties and methods:

event.pageX  When the event occurs, the mouse is horizontal from the top left corner of the page 
event.pageY  When the event occurs, the mouse is perpendicular to the top left corner of the page 
event.type  Type of event ( Such as click)
event.which  Which key was pressed 
event.data  Bind the data on the event object and pass in the event handler 
event.target  The page element for which the event is directed 
event.preventDefault()  The default behavior for blocking events ( For example, clicking on a link will automatically open a new page )
event.stopPropagation()  The stop event bubbles to the upper element 

In the event handler, you can use this keyword to return the DOM element for which the event is directed:

$('a').click(function(){  
if ($(this).attr('href').match('evil')){//If confirmed as a harmful link & NBSP;
e.preventDefault(); //Prevent opening & NBSP;
$(this).addClass('evil'); //Plus the noxious class&cake;
}  
});

There are two ways to automatically trigger an event. One is to use the event function directly, and the other is to use.trigger() or.triggerhandler ().

$('a').click();
$('a').trigger('click');

Special effects
JQuery allows objects to render certain special effects.

$(' h1). The show (); // displays an h1 heading
The usual special effects are as follows:

.fadeIn()  Fade in 
.fadeOut()  Fade out 
.fadeTo()  Adjust transparency 
.hide()  Hidden elements 
.show()  Display elements 
.slideDown()  Down on 
.slideUp()  Roll up 
.slideToggle()  Unfold or curl an element in turn 
.toggle()  Show or hide an element in turn 

All other effects except.show() and.hide() have a default execution time of 400ms(ms), but you can change this setting.

$('h1').fadeIn(300); //Fade in within 300 milliseconds & NBSP;
$('h1').fadeOut('slow'); // Slowly fade out  

After the effect is over, you can specify that a function be executed.

$('p').fadeOut(300, function(){$(this).remove(); });

For more complex effects, use.animate() to customize.

$('div').animate(  
{  
left : "+=50" . //Keep moving right & NBSP;
opacity : 0.2//Specifying transparency & NBSP;
},
300,//Duration & NBSP;
function(){ alert('done!'); }//Callback function & NBSP;
);

.stop() and.delay() are used to stop or delay the execution of a special effect.
If set to true, turn off all web effects.