jquery using a concise tutorial

The

 jquery is currently the most widely used JavaScript library of functions. According to statistics, the world's top 1 million websites, 46% use jquery, far more than other libraries. Microsoft even took jquery as their official repository. It is necessary for web developers to learn jquery. Because it gives you an idea of the industry's most versatile technology, lays the groundwork for future learning of more advanced libraries, and it does make a lot of complex effects easy to do

The basic design and main usage of the page element 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 often to put a select expression into the constructor jquery () (abbreviated $) and get the selected element.   Select an expression can be a CSS selector:     code is as follows: $ (document)//Select entire Document Object $ (' #myId ')//Select page element   $ (' Div.myclass ') with ID myId Select the div element for MyClass     $ (' input[name=first] ')//Select the Name property equal to the input element of the ' one ' or jquery-specific expression: The code is as follows: $ (' A: First ')//Select Page A element   $ (' tr:odd ')//Select the odd row 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   Two, change the result set if multiple elements are selected , jquery provides a filter to narrow the result set:   code as follows: $ (' div '). has (' P '); Select the DIV element   $ (' div ') that contains the P element. Not ('. MyClass '); Select class is not equal to MyClass div element   $ (' div '). Filter ('. MyClass '); Select class equals MyClass div element   $ (' div '). Select the 1th div element   $ (' div '). EQ (5); Select the 6th div element There are times when we need to move from the result set to the relevant elements nearby, and jquery also provides a way to move through the DOM tree:   Code as follows: $ (' div '). Next (' P '); Select the first P element   $ (' div ') after the DIV element. Parent (); Select the parent element of a DIV element &nbSp $ (' div '). Closest (' form '); Select the form parent element   $ (' div ') closest to the Div. Children (); Select all the child elements   $ (' div ') of the Div. siblings (); Select the sibling element of the Div   Three, chain operations when you select a page element, you can do something about it. jquery allows all operations to be connected together and written in chains, such as:   Code as follows: $ (' div '). Find (' H3 '). EQ (2). html (' Hello '); We can open it like this: The   code is as follows: $ (' div ')//find DIV element  . Finding (' H3 ')/select H3 element   EQ (2)//Select the 3rd H3 element  . HTML (' Hello '); Change its content to Hello   This is the most admirable and convenient feature of jquery. It is the principle of each step of the jquery operation, the return is a jquery object, so different operations can be linked together.   jquery also provides a. End () method that allows the result set to step back:     code is as follows: $ (' div ')  . Find (' H3 ')  . EQ (2)  . HTML (' Hello ')   End ()//return to the step of selecting all H3 elements   EQ (0)//Select the first H3 element  . HTML (' World '); Change its content to the world   four elements: values and assignments manipulate page elements, and the most common requirement is to get their values or 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. $ (' H1 '). html (); HTML () has no parameters, indicating the value $ (' H1 ') to fetch the H1. HTML (' Hello '); The HTML () has the parameter Hello, representing the H1 assignment   common values and assignment functions as follows:. HTML () takes out or sets HTML content. text () Remove or set text content  . attr () to remove or set the value of a property   WIdth () to remove or set the width of an element  . Height () to remove or set the height of an element  . val () to remove the value of a FORM element   Note that if the result set contains more than one element, then when the value is assigned, All of the elements will be assigned a value, and when taken, the value of the first element (. Text (), which takes out the text content of all elements), is removed. Action of the element: move if you want to move a selected element, there are two ways to move it: one that moves the element directly, the other moves the other elements so that the target element reaches the position we want.   Assume that we have a DIV element selected and need to move it back to the P element.   The first method is to use. InsertAfter () to move the DIV element behind the P element:     Code as follows: $ (' div '). InsertAfter (' P '); The second method is to use. After (), add the P element to the front of the DIV element:     Code as follows: $ (' P '). After (' div '); On the surface, the effects of the two methods are the same, and the only difference seems to be a different view of the operation. But in fact, they have a significant difference, that is, the returned elements are not the same. The first method returns the DIV element, and the second method returns the P element. You can choose which method to use according to your needs.   Using this mode of operation, a total of four pairs of code are as follows:. InsertAfter () and. After (): Outside of an existing element, insert elements  . InsertBefore () and. Before (): Outside of an existing element, Insert elements from the front  . Appendto () and. Append (): Within an existing element, insert elements  . Prependto () and. Prepend (): Inside an existing element, insert elements from the front   six, element: Copy, delete, and create   copy elements using. Clone (). Delete elements use. Remove () and. Detach (). The difference is that the former does not retain the event of the deleted element, which is reserved for use when the document is reinserted.   Empty the element content (but not delete the element) using. Empty ().   The way to create new elements is very simple, just pass the new elements directly into the jquery constructor: The   code is as follows: $ (' Hello   ');   $(' new list item ');   $ (' ul '). Append (' list item ');   VII Tool methods in addition to manipulating selected elements, JQuery provides tool methods (utility) that can be used directly without having to select elements. If you understand the principles of JavaScript language inheritance, you can understand the essence of the tool approach. It is the method defined on the JQuery constructor, that is, Jquery.method (), so it can be used directly. And those that manipulate the elements are the methods that define the prototype object on the constructor, that is, JQuery.prototype.method (), so you must generate the instance (that is, the selected element) to use. If you do not understand this distinction, the problem is not the case, as long as the tool method is understood as a JavaScript native function, you can use the method directly.   tools commonly used in the following:     code as follows: $.trim () to remove the space at both ends of the string.   $.each () traverses an array or object.   $.inarray () returns the index position of a value in the array. Returns-1 if the value is not in the array.   $.grep () returns elements in an array that conform to a certain standard.    $.extend () merges multiple objects into the first object.    $.makearray () converts an object to an array.   $.type () determines the class of objects (Function objects, date objects, array objects, regular objects, and so on).   $.isarray () determines whether an argument 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 an argument is an object established with "{}" or "New object".   $.support () determines whether the browser supports an attribute. Viii. event Operations jquery can bind events to page elements. Run the corresponding function according to the different events.   Code as follows: $ (' P '). Click (function () {      alert (' Hello ');  }); Currently, jquery primarily supportsThe following event:   code is as follows:. blur () The form element loses focus.   Change () The value of the form element changes   Click () mouse clicks  . DblClick () mouse double-click  . focus () Form element to get focused  . Focusin () Sub element gets the focal The point  . Focusout () child element loses focus  . Hover () specifies the handler function for the MouseEnter and MouseLeave events  . KeyDown () Press the keyboard (long time button, return only one event) & nbsp.. keypress () Press the keyboard (long time key, will return multiple events)  . KeyUp () Release the keyboard  . Load () Element loaded   MouseDown () press mouse  . mouseent ER () mouse enters (does not trigger with child elements)  . MouseLeave () mouse left (leaving child element does not trigger)  . MouseMove () mouse moves within elements  . Mouseout () mouse left (leave child element also trigger) & nbsp.. mouseover () mouse enter (also trigger to child element)  . MouseUp () release mouse  . Ready () Dom load complete  . Resize () browser window size changes  . scr The position of the Oll () scroll bar changes   Select () the user selects the contents of the text box   submit () the user submits the form  . Toggle () To run multiple functions  . Unload () based on the number of mouse clicks.   Users to leave the page above these events within jquery are a convenient way of. Bind (). Use. Bind () to control events more flexibly, such as binding the same function for multiple events: The   code is as follows: $ (' input '). Bind (' Click Change ',//Bind click and change events     & nbsp function () {          alert (' Hello '); &nbsP    }  );   If you only want the event to run once, you can use the. One () method. The code is as follows: $ ("P"). One ("click", Function () {  Alert ("Hello");//Only run once, subsequent clicks will not run  });. Unbind () is used to unbind the event.   Code as follows: $ (' P '). Unbind (' click '); All event-handling functions can accept an event object as an argument, such as the E: code in the following example: $ ("P"). Click (function (e) {  alert (e.type);//"click" & nbsp }); This event object has some useful properties and methods: The code is as follows: When the Event.pagex event occurs, the mouse distance from the upper-left corner of the page Event.pagey event occurs, the mouse distance from the top left corner of the page Event.type event type (such as click) Event.which Press which key event.data bind the data to the event object, and then pass in the event handler function event.target the page element for the event Event.preventdefault () to block the default behavior of the event (for example, click the link, Automatically opens a new page) Event.stoppropagation () Stop event bubbles to the upper element   in the event handler function, you can use the This keyword to return the DOM element for the event:     Code as follows: $ (' a '). Click (function () {  if ($ (this). attr (' href '). Match (' evil ')) {//if confirmed as harmful link   e.preventdefault ();//Block Open   $ (this). addclass (' evil '); Add harmful class  }  }); There are two ways to automatically trigger an event. One is to use the event function directly, and the other is to use the. trigger () or. Triggerhandler (). The code is as follows: $ (' a '). Click (); $ (' a '). Trigger (' click '); Ix. Special effects jquery allows objects to render aSome special effects.   $ (' H1 '). Show (); Show a H1 title   Common special effects are as follows:     code is as follows:. FadeIn () Fade in. fadeout () Fade out. Fadeto () Adjust transparency. Hide () hides elements. Show () displays elements. Down () expands. Slideup () rolls up. Slidetoggle () expands or rolls up an element in turn. Toggle () shows or hides an element in turn   except. Show () and. Hide (), the default execution time for all other effects is 40 0ms (milliseconds), but you can change this setting. Copy code code as follows: $ (' H1 '). FadeIn (300); 300 milliseconds to fade in   $ (' H1 '). fadeout (' slow '); Slowly fade out     After the effect is complete, you can specify that a function be executed. The     code is as follows: $ (' P '). fadeout (+, function () {$ (this). Remove ();});   More complex effects, can be customized with. Animate ().     Code is as follows: $ (' div '). Animate (  {  Left: "+=50",//constantly right)   opacity:0.2//specify transparency  }, 300,//duration Between   function () {alert (' done! ');} callback function  );   Stop () and. Delay () are used to stop or delay the execution of special effects. $.fx.off if set to True, all web effects are turned off.