Jquery Study Notes 1

Document directory

• 2.5.1.: Odd and: Even
• 2.5.2. form-based Selector
• 2.6.1. Filter
• 2.6.2. Search
• 2.6.3. Series

1. jquery entry 1.1. Advantages

• Solve the compatibility problem of browsers.
• Extension is supported and extensions are implemented through plug-ins to avoid feature creep.
• The implicit iteration technique is used to make method operations oriented to a set. For example, ". Hide ()"
• Use method link programming to make multiple operations on one row.
• Powerful selector.
• Reliable event processing mechanism.
• Perfect Ajax.
• Separation of behavior layer and structural layer.
• There are many users and the documentation is quite complete.
• Open source.

1.2. Disadvantages

• Backward compatibility is not supported. This is determined by the release feature of jquery.

2. Selection character 2.1. Dom

The Document Object Model (DOM) is a standard programming interface recommended by W3C for processing Extensible slogans.

Reference URL:

Http://zh.wikipedia.org/wiki/document Object Model

Http://www.w3.org/DOM/

2.2. Factory functions $ ()

• # ID: matches an element based on the given ID.

For example, find the element whose ID is "mydiv.

$ ("# Myid ");

• Element, matching all elements according to the given element name.

For example, find the DIV element.

$ ("Div ");

• . Class, matching elements based on the given class.

For example, find all elements whose classes are "myclass.

$ (". Myclass ");

 

The HTML code is as follows:

<Div id = "notme" class = "notme"> Div class = "notme" </div>

<Div id = "myid" class = "myclass"> Div class = "myclass" </div>

2.3. CSS Selector

• Addclass (class) to add the specified class name for each matching element.

For example, add the 'selected' class to the matched element.

$ ("P"). addclass ("selected ");

• Removeclass ([Class]): deletes all or specified classes from all matching elements.

For example, remove the 'selected' class from a matched element.

$ ("P"). removeclass ("selected ");

 

The HTML code is as follows:

<P class = "first"> Hello </P>

2.4. Attribute Selector

• [Attribute], matching the elements that contain the given attribute.

For example, search for all input elements containing the name attribute.

$ ("Input [name]");

• [Attribute = value], matching a given attribute is an element of a specific value.

For example, find all input elements whose name attribute is newsletter.

$ ("Input [name = 'newsletter ']");

• [Attribute ^ = value]. matching a given attribute is an element starting with some values.

For example, find all input elements whose name attribute is newsletter.

$ ("Input [name = 'News']");

• [Attribute! = Value], matches all attributes that do not contain the specified value.

For example, find all input elements whose name attribute is not newsletter.

$ ("Input [name! = 'Newsletter'] ");

• [Attribute $ = value]: matches the elements whose given attributes end with some values.

For example, find all input elements whose name attribute ends with a letter.

$ ("Input [name $ = 'Letter ']");

• [Attribute * = value]. matching a given attribute is an element that contains certain values.

For example, find that all name attributes contain the input elements of news.

$ ("Input [name * = 'News']");

 

The HTML code is as follows:

<Input type = "checkbox" name = "newsletter" value = "Hot fuzz"/>

<Input type = "checkbox" name = "newsboy" value = "cold fusion"/>

<Input type = "checkbox" name = "accept" value = "edevil plans"/>

2.5. Custom selector 2.5.1.: Odd and: Even

• : Even. It matches all the elements with an even index value and starts counting from 0.

For example, search for rows 2, 4, and 6 of a table.
$ ("TR: odd ");

• : Odd. It matches all elements with an odd index value and starts counting from 0.

For example, search for rows 1, 3, and 5 of a table.

$ ("TR: Even ");

The HTML code is as follows:

<Table>

<Tr> <TD> header 1 </TD> </tr>

<Tr> <TD> value 1 </TD> </tr>

<Tr> <TD> value 2 </TD> </tr>

</Table>

 

2.5.2. form-based Selector

Mainly include: input,: Text,: Password,: radio,: checkbox,: Submit,: image,: reset,: button,: file,: hidden and other elements and: enabled,: Disabled,: checked,: selected, and other element attributes.

For example, you can find all input elements.

$ (": Input ");

2.6. Dom Traversal method 2.6.1. Filter

• Filter (expr) to filter the set of elements that match the specified expression.

For example, keep the elements with the Select class

$ ("P"). Filter (". Selected ");

2.6.2. Search

• Next ([Expr]) To obtain an element set that contains the peer element next to each element in the matched element set.

Nextall ([Expr]), Prev ([Expr]), Prevall ([Expr]), Parent ([Expr]), Children ([Expr])

For example, find the peer element next to each paragraph.

$ ("P"). Next ();

2.6.3. Series

• Andself () to add the previously selected elements to the current element.

For example, select all Div and internal P and add the border class.

$ ("Div"). Find ("p"). andself (). addclass ("border ");

• End (), back to the latest "destructive" operation.

For example, select all P elements, find and select span sub-elements, and then return to select P elements.

$ ("P"). Find ("span"). End ();

2.7. Access DOM elements

• Get (INDEX) to obtain a matching element.

$ (This). Get (0) is equivalent to $ (this) [0.

For example, you can obtain the elements in the 1st positions of all IMG elements.

$ ("IMG"). Get (0 );

3. Event 3.1. Execute the task after loading the page.

Differences from window. onload,

• Window. onload is triggered after all elements are downloaded, and $ (document). Ready () is triggered after all elements are accessible.
• Window. onload can only store references to one function at a time.
• Can be simplified to $ ()

 

3.2. Simple events

You can use the bind method to specify any JavaScript event and add an action for the event. Sample Code:

$ (Function (){

$ ('# Btnadd'). BIND ('click', function (){

Alert ('click add ');

});

})

The preceding code can also be abbreviated as the following code:

$ (Function (){

$ ('# Btnadd'). Click (function (){

Alert ('click add ');

});

})

3.3. Compound events

• Hover (over, out), a method that imitates a hover event (move the mouse over an object and remove it from it.

For example, adding a specific class to a table with a mouse over

$ ("TD"). Hover (

Function (){

$ (This). addclass ("hover ");

},

Function (){

$ (This). removeclass ("hover ");

}

);

• Toggle (FN, FN2,[Fn3, FN4,...]), Call the function after each click.

For example, switch a table class.

$ ("TD"). Toggle (

Function (){

$ (This). addclass ("selected ");

},

Function (){

$ (This). removeclass ("selected ");

}

);

3.4. Event journey

Event Capture: the event is first handed over to the outermost layer, and then to the specific element.

Event bubbling: the event is first sent to the most specific element, and then bubbles up to a more general element.

 

3.5. Change the event's journey through the event object 3.6. Remove the event handler

• Unbind ([Type],[Data]) Bind () reverse operation to delete the bound events from each matching element.

If no parameter exists, all bound events are deleted.

You can unbind the custom event you registered with BIND.

If the event type is provided as a parameter, only binding events of this type are deleted.

If the handler passed during binding is used as the second parameter, only this specific event handler will be deleted.

 

For example, unbind the Click Event of a paragraph

$ ("P"). Unbind ("click ")

3.7. Imitating user operations

• Keydown (FN) is bound to a processing function in each keydown event that matches the element.
• Keypress (FN) is bound to a processing function in each keypress event that matches the element.
• Keyup (FN) is bound to a processing function in each keyup event that matches the element.

 

For example, you can use the following code to respond to keyboard buttons on the page:

$ (Window). keydown (function (event ){

Switch (event. keycode ){

//...

// Different buttons can be used for different tasks

// Different browsers have different keycodes.

// More details: http://unixpapa.com/js/key.html

//...

}

});

 

4. effect 4.1. Modify inline CSS

• CSS (name, value), set the value of a style attribute among all matching elements.

For example, set the font of all paragraphs to red.

$ ("P" ).css ("color", "Red ");

4.2. Basic hiding and display

• Show () and hide () show and hide matching elements.

Example: show all paragraphs

$ ("P"). Show ()

4.3. effect and speed

• Show (speed,[Callback]) And hide (speed,[Callback]) Show and hide all matching elements in an elegant animation.

For example, a slow animation is used to display hidden paragraphs in 600 milliseconds.

$ ("P"). Show ("slow ")

• Fadein (speed,[Callback]) And fadeout (speed,[Callback]) Changes in opacity to fade in and out all matching elements.

For example, you can use 600 ms to fade a paragraph slowly.

$ ("P"). fadein ("slow ");

4.4. Create a Custom Animation

• Animate (Params, [duration], [easing], [callback]), used to create a UDF for Custom Animation.

For example, move the specified Element left or right

$ ("# Right"). Click (function (){

$ (". Block"). animate ({left: '+ 50px'}, "slow ");

});

 

$ ("# Left"). Click (function (){

$ (". Block"). animate ({left: '-50px'}, "slow ");

});

5. Dom operation 5.1. Operation attributes

• ATTR (Key, value), which sets an attribute value for all matching elements.
• Removeattr (name), which deletes an attribute from each matching element.
• Insertbefore (content) inserts all matching elements in front of another specified Element Set.
• Insertafter (content) inserts all matching elements to the end of another specified Element Set.
• Wrap (HTML) wraps all matching elements with structured tags of other elements.

5.2. Insert new elements 5.3. Package Elements

For example, wrap all the paragraphs in a newly created Div.
$ ("P"). Wrap ("<Div class = 'wrapp'> </div> ");

5.4. Copying Elements

• Clone () clone the matched DOM elements and select the cloned copies.

For example, clone all B elements (and select the cloned copies) and then forward them to all sections.

$ ("B"). Clone (). prependto ("p ");