Use of jquery

About jquery:

jquery is a fast, concise JavaScript framework, an excellent JavaScript code base ( or JavaScript framework ). The purpose of jquery design is "write Less,doMore", which advocates writing less code and doing more things.

The advantages of jquery:

　Lightweight, powerful selectors, excellent DOM operation encapsulation, reliable event handling, complete Ajax, excellent browser compatibility, chained programming, implicit iterations, rich plug-in support

　　

Use of jquery: 1, import jquery file 2, jquery common:

　(1) Ready () event

Equivalent to the Window.onload () event, when the page label is loaded and triggered (window.onload is triggered when the page is fully loaded)

$ (Document.ready () (function () {alert ()};));      // Complete Wording         $ (function// simple notation // general all JavaScript code needs to be written in this event, $ And jquery is no different, with $ more convenient

　

(2) Array traversal

$.each (Arry,functionreturnfalse;       // Jump out of the loop

(3) Use of the Map object (returns a new array):

    var arrnew=$.map (Arry,function(elemet,index)) {            return  elemet;        }

(4) Set CSS

$ (' #div '). CSS (' backgroundcolor ', ' Red ');         $ (' #div '). css ({' BackgroundColor ': ' Red ', ' border ': ' 1px solid Green '}); // set multiple          //$ (' #div ') with key-value pairs to get the element with the ID div

(5) Val method

$ (' #p1 '). Val (' Set value ');         // parameter is not passed, then the value is obtained, the pass parameter is the value set to

(6) Text and HTML

Text () similar to the DOM in innertext HTML is similar to InnerHTML in the DOM

　　

3. jquery objects and Dom objects are converted to each other

(1) Dom transforms jquery objects

　　var $divObj =$ (Divdom);

(2) jquery to DOM object

var domdiv= $divObj [0]; Or: Var domdiv= $divObj. Get (0);

4. jquery Selector

(1) ID selector:

$ (' #id ')

　　(2) Tag Selector:

$ (' P ')

　(3) Class style selector: (a class style is applied):

$ ('. Clas ')

(4) Combo Selector (separated by commas):

$ (' #id, P,.clas ')

　　(5) Hierarchy Selector

$ (' #id p ')//Select all p tags under id$(' Body > P ')//Select child elements under body--child element selection
//adjacent element selection://Select the next$ (' #id + P ')//Select the ID followed by the P tag, if not, then select//equivalent to: $ (' #id '). Next (' P ')

//Select the next element (same level)$ (' #id ~ P ')//do not pass the parameter, indicating all//equivalent to: $ (' #id '). Nextall (' P ')//Select previous element ( same as)$ (' P '). Prev (' span ')//Previous (no parameter indicates previous)$ (' P '). Prevall (' span ')//equal to all of the span//non-reference, indicating that all 

　　(6) Attribute selector:

$ (' td[isclicked=isclicked] ')         // Select with isclicked attribute

　(7) Tag + class selector (what class is applied in the tag)

$ (' P.clas ')

　

　　

5, Jqurey operation class style

(1) Determine if an element exists on the page:

$ (' #id '). Length>0              // Even if the selector is not selected to any element, the return will not be null or undefined, but a collection object of length 0

(2) Append a new class style:

$ (' #id '). addclass (' Clss ');         // the previous style is not overwritten, and the style name is not added.

　　

　　(3) Determine if a tag has a class style applied

$ (' #id '). Hasclass (' class ');         // return Boolean type

　(4) To remove the class style:

$ (' #id '). Removeclass (' class ');

　　

(5) Application and removal of switching class styles

    $ (' #id '). Toggleclass (' class ');       // judgment: If there is a removal, no application

6. jquery Filter Elements

(1) Select the first: $ (' P:first ')

(2) Select Last: $ (' p:last ')

(3) Select by index: $ (' P:eq (index) ')

(4) Select an odd index: $ (' p:odd ')

(5) Select an even number of indexes: $ (' P:even ')

(6) The selected index is greater than a certain value:$ (' P:gt (2) ')

(7) The selected index is less than a certain value:$ (' P:lt (2) ')

(8) not use: $ (' P:not (. Class) ') //Select not to use class style

(9) Set all H tags on the page: $ (': Header ')

(10) Parameter 2: Indicates a range: $ (' P ', this)

7. jquery Attribute filtering:

(1) Select by attributes:

$ (' [NAME=TEXT1] ')//Select an element with name Text1 on the page        $(' Input[name=text1] ')//Select the NAME=TEXT1 element in the input tag    $(' Input[name] ')//Select all input with the Name property        $(' *[name] ')//Select all elements with the name attribute$(' [Name^a] ')//Select the element with the name attribute, and the Name property starts with a        $(' [Name$=a] ')//Select the element with the Name property, and the Name property ends with a        $(' Name*=a ')//Select the element with the name attribute, and the Name property contains a        $(' Body *[name!=text1] ')//Select the page Name property is not equal to Text1 element, written under body, otherwise the body will be affected        $(' Body *[name][id][type] ')//choose to have multiple properties at the same time

(2) Select Disabled or available:

$ (' #from1:d isabled ')                         // Select the disabled element in From1, available as enabled        $ (' #from1:d isabled ')                          // Select Disabled from1, no spaces         $ (' input:disabled ')                           // Select the element for which input is disabled, no spaces

(3) Select filter

$ (': Checked ')                                 // Select All selected checked or radio, drop-down with selected        $ (' #id: Not (: checked) ')                       // Select an element that is not selected

8. Create elements dynamically

(1) Creating elements

var alink = $ (' <a href= ' http://wwww.baidu.com ' > Baidu </a> '); $ (' body '). Append (ALink);             // add to Body tag

(2) Add

// tags in $ (' <a href= "http://wwww.baidu.com" > Baidu </a> '). AppendTo (' #div1 ');       // add directly (append)          $ (' <a href= ' http://wwww.baidu.com > Baidu </a> '). Prependto (' #div1 ');      // Add to Front // outside         the label $ (' <a href= ' http://wwww.baidu.com > Baidu </a> '). InsertAfter (' #div1 ');    // add to tag after           $ (' <a href= ' http://wwww.baidu.com > Baidu </a> '). InsertBefore (' #div1 ');   // add to front of label

(3) Create a table

var tblobj=  $ (' <table></table> '). AppendTo (' #div1 ');                  // Create a table       $ (' <tr><td>1</td><td>2</td></tr> '). AppendTo (tblobj);                 // add row, cell to table

(4) Removing and emptying

$ (' #id '). empty ();               // empty the contents of the ID        $ (' #id '). Remove ();              // Delete ID and content in

9. Replacement and wrapping of elements

(1) Replacement

$ (' <a href= ' https://wwww.baidu.com > Baidu </a> '). ReplaceAll (' hr ');       // replaces an existing element with the created element         $ (' P '). ReplaceWith (' <div></div> ');                                    // Replace the created element with the existing element

(2) Parcel

$ (' P '). Wrap ();                      // outer package, each P element $ (' P '). Wrapinner ();                 // Wrap around inside, wrap with P         $ (' P '). Wrapall ();                  // All packages, extract all P (several p contexts have other tags)

10. Registration and binding of events

(1) Registration of events:

function (){});                  // register a click event for ID  application: Not determined using events, passing events

(2) Unbind the event

$ (' #id '). Unbind (' mouseover ');                         // does not pass the parameter, cancels all

(3) mouse hover and leave a joint event

$ (' #id '). Hover (function() {},function() {});

11. Use event objects in jquery

$ (' #id '). Click (function (evt) {alert (' evt is the object of the event ')});

-Mouse click:. MouseDown (function (evt) {alert (Evt.whitch)});. KeyDown (get keyboard code) the same

--Cancel Event bubbling: evt.stoppropagation//equivalent to Window.event.cancelbubble=true

12. jquery Animation

(1) Display, disappear

$ (' #div '). Show (+);                       // Displays $ (' #div '). Hide (+);                       // Vanishing   parameter is the time of execution
$ (' #div '). Toggle (+);       //Click Show, click again to disappear Interchange

(2) Slide

$ (' #div '). Slidedown (+);                   // swipe to show $ (' #div '). Slideup (+);                      // Slide disappears $ (' #div '). Slidetoggle (+);              // Interchange notation

(3) Fade in and fade out

$ (' #div '). FadeIn (+);                       // fade in $ (' #div '). FadeOut (+);                       // fade Out $ (' #div '). Fadetoggle (+);                 // swap the wording $ (' #div '). FadeTo (1000,0.5);                    // Execution Time       transparency

(4) Animate animation: ▲

$ (' #div '). Animate ({width: ' 20px ', Height: ' 20px '},3000);     // the style that becomes, execution time (can write animation queue continuously)

(5) Animate animation stops

$ (': Animated '). Stop ();                           // stops the current animation and resumes execution of the animation in subsequent animation queues $ (': Animated '). Stop (true);                       // stops the current animation and clears the animation in subsequent animation queues (animated static)$ (': Animated '). Stop (true,true);                  // stops the current animation and sets the animation to where the current animation has finished executing

13. Cookie Plugin

Role: Record some user's information (such as login name, password) to the local hard drive such as: How many days to visit the same website without logging in

Use: First load the jquery file, then load the cookie file, because the cookie file references the jquery file

(1) Add a cookie

$.cookie (' UserName ', value);   // session cookie, does not specify a cookie's validity time, the cookie is created by default until the user closes the browser, and the page refresh still exists

// expire: Valid (days)   path: directory, default root (entire page accessible)    secure: If set to true, the transfer of this cookie requires a security protocol such as HTTPS;       $. Cookie (' UserName ', value,{expires:7, secure:false, path: '/'});

(2) Read cookies

$.cookie (' UserName ');            // cookies are stored as key-value pairs, and values are read by key

(3) Delete cookies

$.cookie (' UserName ',null);      // set the value to NULL to delete

14, the method of writing plug-ins:

;(function($) {                $.fn.extend ({            // Method Name: Method            function () {                // in this function, this is the object representing the current function, for example, using a table, where this represents the Table object                $ (',this ). Click (function()});})    (jQuery);

Summarize:

The use of jquery is relatively convenient and fast. jquery has a lot of rich plug-ins, simple code can implement complex functions, the key is in and how to apply.

Use of jquery