Nanyi: jquery official Basic Tutorial Notes

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.

Although jquery is easy to get started with, it's easier to learn than other libraries, but it's not easy to master it all. Because it involves all aspects of web development, there are thousands of different approaches and internal changes available. Beginners often feel that getting started is easy and difficult to improve.

At present, the best jquery primer on the internet is Rebecca Murphey's "Basic jquery Tutorial" (jquery Fundamentals). Search for "jquery training" in Google, the book is ranked first. The official jquery team has agreed to use the book as the basis for the official tutorial.

Although the book is an introductory textbook, it is full of more than 100 pages. I made a detailed note of it, trying to figure out the design ideas of jquery and find out the context of learning. My goal is to fully master jquery, when encountering problems, the bottom of my heart, basically know which function to use it, and then quickly from the manual to find the specific wording.

Here is my note, which should be one of the few jquery Chinese tutorials available online. You just need a little bit of JavaScript to understand it, and in the shortest time, master all the main aspects of jquery (except Ajax and plugin development).

===========================================

　　 jquery Design Ideas

Original URL: http://jqfundamentals.com/book/
　　
Nanyi Translation Finishing

Directory

First, select the page element

Second, change the result set

Three, chain-operated

Iv. operation of elements: value and Assignment

V. Manipulation of elements: moving

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

Vii. Tools and methods

Eight, event operation

IX. Special Effects

Body

　　 First, select the page element

The basic design and main usage of jquery is"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:

　

Code:

  $ (document)//Select the entire Document object $ (' #myId ')//Select the page element with ID myId $ (' div.myclass ')//Select the DIV element class for MyClass $ (' input[name=first] ')/ /select the INPUT element with the name attribute equal to first

　　
It can also be a jquery-specific expression:

Code:

$ (' A:first ')//Select the first element of the page in  $ (' tr:odd ')//Select the odd line of the table $ (' #myForm: Input ')//Select the INPUT element in the form $ (' div:visible ')// Select the visible div element $ (' Div:gt (2) ')//Select all DIV elements except the first three $ (' div:animated ')//Select the currently animated DIV element

　

　　Second, change the result set

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

Code:

$ (' div '). has (' P '); Select the div element containing the P element $ (' div '). Not ('. MyClass '); Select Class Not equal to MyClass div element $ (' div '). Filter ('. MyClass '); Select the div element with class equal to MyClass $ (' div '). First (); Select a 1th div element $ (' div '). EQ (5); Select a 6th div element

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

Code:

$ (' div '). Next (' P '); Select the first P element (' div ') after the DIV element. Parent (); Select the parent element of the DIV element $ (' div '). Closest (' form '); Select the form parent that is closest to the div (' div '). Children (); Select all child elements of Div $ (' 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:

　　

Code:

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

Break it down, that's the following:

Code:

$ (' div ')//find DIV element. Find (' H3 ')//Select the H3 element in it. EQ (2)//select 3rd H3 element. 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:

Code:

$ (' div ').  find (' H3 '). EQ (2). html (' Hello '). End ()//return to the step of selecting all the H3 elements. EQ (0)//Select the first H3 element. 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.

　　

Code:

$ (' H1 '). html (); The HTML () has no parameters, which means to remove the value of H1 $ (' H1 '). html (' Hello '); HTML () has parameter Hello, which means to assign a value to the H1

　
　
The common values and assignment functions are as follows:

　　

Code:

. html () to  Remove or set HTML content. Text () to remove or set  the text content. attr ()  Remove or set the value of a property. Width ()  to remove or set the width of an element. Height ()  out or sets the height of an element. Val () takes  out 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:

　　

Code:

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

　　

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

　　

Code:

$ (' 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.

There are four pairs of operations that use this mode:

　　

Code:

. InsertAfter () and. After (): Inserts elements from behind, outside of existing elements. InsertBefore () and. Before (): Inserts an element from the front, outside the existing element. AppendTo () and. Append () : Inserts an element from behind in the interior of an existing element. Prependto () and. Prepend (): Inserts an element from the front, inside an existing element

　　

　　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:

　

Code:

$ (' Hello '); $ ('

• New list item '); $ (' ul '). Append (' list item ');

　　

• 　　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:
  Code:

  $.trim () removes spaces at both ends of the string.

• $.each () iterates over an array or an object.
• $.inarray () returns the index position of a value in the array. Returns 1 if the value is not in the array.
• $.grep () returns an element in the array that conforms to a standard.
• $.extend () merges multiple objects into the first object.
• $.makearray () Converts the object to an array.
• $.type () determines the category of the object (function object, Date object, array object, regular object, and so on).
• $.isarray () Determines whether a parameter is an array.
• $.isemptyobject () Determines whether an object is empty (does not contain any attributes).
• $.isfunction () Determines whether a parameter is a function.
• $.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.
  　　
  Code:

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

  　　
• Currently, jquery supports the following events mainly:
• 
  Code:

  The. blur () Form element loses focus.

• The value of the. Change () Form element changes
• The. Click () mouse click
• . DblClick () mouse double-click
• . focus () Form elements get focus
• . Focusin () child elements get focus
• . Focusout () child element loses focus
• . Hover () specifying handler functions for both MouseEnter and MouseLeave events
• . KeyDown () Press the keyboard (long time keys, return only one event)
• . KeyPress () Press the keyboard (long-time keys will return multiple events)
• . KeyUp () Release the keyboard
• The. 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 triggered)
• . MouseUp () Release the mouse
• . Ready () Dom loading complete
• The size of the. Resize () browser window has changed
• The position of the. Scroll () scroll bar is changed
• The. 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:
  
  Code:

  $ (' input '). Bind (

• ' Click Change ',//bind both click and change events
• function () {
• Alert (' Hello ');
• } 　　);
• 　　
• Sometimes you just want the event to run once, so you can use the. One () method.
  
  Code:

  $ ("P"). One ("click", Function () {

• Alert ("Hello"); Run only once, and subsequent clicks will not run
• });
• . Unbind () is used to unbind events.
  
  Code:

  $ (' P '). Unbind (' click ');

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

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

  　　
• This event object has some useful properties and methods:
  
  Code:

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

• Event.pagey the vertical distance of the mouse from the upper-left corner of the page when the event occurs
• The type of the Event.type event (for example, click)
• Event.which which key was pressed
• Event.data bind the data to the event object, and then pass in the event handler function
• Page elements targeted by 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:
  
  Code:

  $ (' a '). Click (function () {

• if ($ (this). attr (' href '). Match (' evil ')} {//If it is identified as a harmful link
• E.preventdefault (); Block Open
• $ (this). addclass (' evil '); Plus a bad class}});
• 　　
• 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 ().
  
  Code:

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

  　　
• 　　
• 　　IX. Special Effects
  jquery allows objects to render some special effects.
  
  Code:

  $ (' H1 '). Show (); Show a H1 title

  The usual special effects are as follows:
  
  Code:

  . FadeIn () Fade in

• . FadeOut () Fade out
• . FadeTo () Adjust transparency
• . Hide () hidden elements
• . Show () display elements
• . Slidedown () expand Down
• . 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.
  
  Code:

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

• $ (' H1 '). FadeOut (' slow '); Slowly fade out
• After the effect finishes, you can specify that a function be executed.
• $ (' P '). FadeOut, Function () {$ (this). Remove ();});
• More complex effects can be customized with. Animate ().
  
  Code:

  $ (' div '). Animate (

• {
• Left: "+=50",//Keep moving right
• opacity:0.25//Specify Transparency
• },
• 300,//Duration
• function () {alert (' done! ');} callback function
• );
• 
  Stop () [/url] 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.

Finish

Nanyi: jquery official Basic Tutorial Notes