How to use jquery

jquery is currently the most widely used JavaScript library of functions. According to statistics, the world's top 1 million sites, 46% use jquery, far more than other libraries. Microsoft even took jquery as their official repository. For web developers, it is necessary to learn jquery. Because it allows you to understand the industry's most common technologies, laying the groundwork for learning more advanced libraries in the future, and it's really easy to make many complex effects.

First, select the Web Element jquery's basic design and main usage is to "select a page element and then do something about it." This is the fundamental feature that distinguishes it from other library functions.

The first step in using jquery is to put a selection expression into the constructor jquery () ($), and then get the selected element.

The selection expression can be a CSS selector:

1 $ (document)//Select Entire Documents Object
2 $ (' #myId ')//Select a page element with ID myId  
3 $ (' div.myclass ')//select div element with class MyClass    
4 $ (' input[name=first] ')//Select the name attribute equals first INPUT element

It can also be a jquery-specific expression:

1 $ (' a:first ')//Select the first a element in the Web page  
2 $ (' tr:odd ')//select odd rows of the table  
3 $ (' #myForm: Input ')//Select the INPUT element in the form  
4 $ (' div:visible ')//select the visible div element  
5 $ (' Div:gt (2) ')//Select all DIV elements except for the first three  
6 $ (' div:animated ')//Select a DIV element that is currently in the animated state  

Second, change the result set

If multiple elements are selected, jquery provides filters to narrow the result set:

1 $ (' div '). has (' P '); Select the div element that contains the P element  
2 $ (' div '). Not ('. MyClass '); Select a DIV element that is not equal to the MyClass class  
3 $ (' div '). Filter ('. MyClass '); Select a DIV element with class equal to MyClass  
4 $ (' div '). First (); Select a 1th div element  
5 $ (' div '). EQ (5); Select a 6th div element  

There are times when we need to move from the result set to nearby related elements, and jquery also provides a way to move around the DOM tree:

1 $ (' div '). Next (' P '); Select the first P element after a DIV element  
2 $ (' div '). parent (); Select the parent element of the DIV element  
3 $ (' div '). Closest (' form '); Select the form parent element closest to Div  
4 $ (' div '). Children (); Select all child elements of Div  
5 $ (' div '). siblings (); Select sibling elements of Div  

Three, chain-operated

When you select a page element, you can do something about it.

jquery allows all operations to be linked together and written in the form of chains, such as:

1 $ (' div '). Find (' H3 '). EQ (2). html (' Hello ');  

We can unpack it like this:

1 $ (' div ')//Find DIV element  
2. Find (' H3 ')//Select one of the H3 elements  
3. EQ (2)//Select a 3rd h3 element  
4. HTML (' Hello '); Change its contents to Hello  

This is the most admirable and convenient feature of jquery. Its principle is that each step of the jquery operation, the return is a jquery object, so the different operations can be linked together.

jquery also provides the. End () method, which allows the result set to step back:

1 $ (' div ')  
2. Find (' H3 ')  
3. EQ (2)  
4. HTML (' Hello ')  
5. End ()//return to the step of selecting all the H3 elements  
6. EQ (0)//Select the first H3 element  
7. HTML (' World '); Change its contents to the world  

Iv. operation of elements: value and Assignment

The most common requirement for manipulating page elements is to get their values or to assign them.

jquery uses the same function to complete the value (getter) and assignment (setter). Whether it is a value or an assignment is determined by the parameters of the function.

View Code

Remove or set HTML content to take the value of a FORM element

It is important to note that if the result set contains more than one element, all of the elements will be assigned a value, and when the value is taken, it is only the value of the first element (. Text () exception, which takes out the text content of all elements).

V. Manipulation of elements: moving

If you want to move the selected element, there are two methods: one is to move the element directly, and the other is to move the other elements so that the target element reaches the position we want.

Suppose we select a DIV element and we need to move it behind the P element.

The first method is to use the. InsertAfter () to move the DIV element behind the P element:

$ (' div '). InsertAfter (' P ');

The second method is to use. After () to add the P element to the front of the DIV element:

$ (' P '). After (' div ');

On the surface, the effect of the two approaches is the same, and the only difference seems to be the difference in operating perspective. But in fact, they have a big difference, that is, the elements returned are different. The first method returns the DIV element, and the second method returns the P element. You can choose which method to use, depending on your needs.

Using this mode of operation, a total of four pairs

1. InsertAfter () and. After (): Inserts an element from behind an existing element  
2. InsertBefore () and. Before (): Outside the existing element, insert the element from the front  
3. AppendTo () and. Append (): Inside the existing element, insert the element from behind  
4. Prependto () and. Prepend ()   
5: Inside the existing element, insert the element from the front

Vi. operations of elements: copying, deleting, and creating

The copy element uses. Clone ().

The delete element uses. Remove () and. Detach (). The difference between the two is that the former does not retain the event of the deleted element, which is reserved for use when re-inserting the document.

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

The way to create a new element is as simple as passing the new element directly into the jquery constructor:

1 $ (' <p>Hello</p> ');  
2 $ (' <li class= ' new ' >new list item</li> ');  
3 $ (' ul '). Append (' <li>list item</li> ');  

Vii. Tools and methods

In addition to manipulating the selected elements, jquery provides some tool methods (utility) that you can use directly without having to select the elements.

If you understand the principles of how JavaScript is inherited, you can understand the nature of tool methods. It is a method defined on the jquery constructor, i.e. Jquery.method (), so it can be used directly. The methods that manipulate elements are those that define the prototype object on the constructor, that is, JQuery.prototype.method (), so you must generate an instance (that is, select the element) to use. If you do not understand this difference, the problem is not very small, as long as the tool method is understood as a JavaScript native function, you can directly use the method is OK.

Common tool methods are as follows:

1 $.trim () removes spaces at both ends of the string.  
2 $.each () iterates over an array or object.  
3 $.inarray () returns the index position of a value in the array. Returns 1 if the value is not in the array.  
4 $.grep () returns an element in the array that conforms to a standard.   
5 $.extend () merges multiple objects into the first object.   
6 $.makearray () converts an object to an array.  
7 $.type () determines the category of the object (function object, Date object, array object, regular object, and so on).  
8 $.isarray () determines whether a parameter is an array.  
9 $.isemptyobject () determines whether an object is empty (does not contain any attributes).  
Ten $.isfunction () determines whether a parameter is a function.  
One $.isplainobject () determines whether a parameter is an object created with "{}" or "New object".  
$.support () Determines whether a feature is supported by the browser.  

Eight, event operation

jquery can bind events to page elements. Depending on the event, run the appropriate function.

1 $ (' P '). Click (function () {  
2 alert (' Hello ');  

Currently, jquery supports the following events mainly:

1. blur () The form element loses focus.  
2. Change () The value of the form element is changed  
3. Click () mouse clicks  
4. DblClick () mouse double-click  
5. focus () Form elements get focused  
6. Focusin () child elements get focus  
7. Focusout () child element loses focus  
8. Hover () specify handler functions for both MouseEnter and MouseLeave events  
9. KeyDown () Press the keyboard (long time key, return only one event)  
KeyPress () Press the keyboard (long-time keys will return multiple events)  
KeyUp () Release the keyboard  
Load () element is finished loading  
MouseDown () Press the mouse  
MouseEnter () mouse entry (Enter child element does not trigger)  
MouseLeave () Mouse away (leave child element not triggered)  
MouseMove () mouse moves inside an element  
Mouseout () Mouse away (leave child element also triggered)  
MouseOver () mouse entry (Enter child element also trigger)  
MouseUp () Release mouse  
Ready () Dom loading complete  
Resize () the size of the browser window has changed  
Scroll () The position of the scroll bar has changed  
Select () user selects the contents of the text box  
Submit () User Submission Form  
Toggle () Run multiple functions in sequence based on the number of mouse clicks  
Unload ()  user left page  

These events are a handy way of. Bind () inside jquery. Using. Bind () gives you more flexibility in controlling events, such as binding the same function for multiple events:

1 $ (' input '). Bind (  
2 ' Click Change ',//bind both click and change events  
3 function () {  
4 alert (' Hello ');  
3;  
6);  

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

1 $ ("P"). One ("click", Function () {  
2 Alert ("Hello"); Run only once, and subsequent clicks will not run  
3});  

. Unbind () is used to unbind events.

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

1 $ ("P"). Click (function (e) {  
2 alert (E.type); "Click"  

This event object has some useful properties and methods:

1 Event.pagex The horizontal distance of the mouse from the upper-left corner of the page when the event occurs

3 Event.pagey The vertical distance of the mouse from the upper left corner of the page when the event occurs

5 Types of Event.type events (such as Click)

7 Event.which which key was pressed

9 Event.data bind the data to the event object, and then pass in the event handler function

Page elements for the Event.target event

Event.preventdefault () The default behavior of blocking events (such as clicking on a link that automatically opens a new page)

Event.stoppropagation () Stop event bubbles to the upper element

In the event handler, you can use the This keyword to return the DOM element that the event targets:

1 $ (' a '). Click (function () {  
2 if ($ (this). attr (' href '). Match (' evil ')} {//If it is identified as a harmful link  
3 E.preventdefault (); Block Open  
4 $ (this). addclass (' evil '); Plus the class that represents the harmful  
3;  
6});  

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 ().

1 $ (' a '). Click ();
2 $ (' a '). Trigger (' click ');

IX. Special Effects

jquery allows objects to render some special effects.

The usual special effects are as follows:

2 Common special effects are as follows:
3. FadeIn () Fade in
4. FadeOut () Fade out
5. FadeTo () Adjust transparency
6. Hide () hidden elements
7. Show () display element
8. Slidedown () expand Down
9. Slideup () Roll up
Slidetoggle () Expand or roll up an element in turn
Toggle () Show or hide an element in turn

Except for. Show () and. Hide (), the default execution time for all other effects is 400ms (milliseconds), but you can change this setting.

1 $ (' H1 '). FadeIn (300); Fade in 300 milliseconds  

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

More complex effects can be customized with. Animate ().

1 $ (' div '). Animate (  
2 {  
3 Left: "+=50",//Keep moving right  
4 opacity:0.25//Specify Transparency  
5},
6 300,//Duration  
7 function () {alert (' done! ');} callback function  

. Stop () and. Delay () are used to stop or delay the execution of the effect.

$.fx.off if set to true, all page effects are turned off.

How to use jquery