Web Development (beginner)-JQuery

JQuery is a lightweight, fast and concise javaScript Library.

Reference: http://www.php100.com/manual/jquery/

Looking for elements

Form Selector

$ (": input")//Match all input, textarea, select and button elements $ (": Text")///All single-line text box $ (":p assword")//All Password box $ (": Radio") All radio buttons $ (": checkbox")//All check boxes $ (": Submit")//All Submit buttons $ (": RESET")//All reset Buttons $ (": Button")//All button buttons $ (": FI Le ")//All file Domains $ (" input:checked ")///All selected elements of $ (" select Option:selected ")//select in all selected option elements

find

$ ("div"). Children ()       //div each child element in the first layer $ ("div"). Find ("span")      //div contains all of the span elements, descendants of $ ("P"). Next ()        //A sibling element after the P element $ ("P"). Nextall ()          //p element after all of the sibling elements $ ("#test"). Nextuntil ("#test2")     //id is the "#test" element, and Qiatouquwei $ ("P") for all sibling elements between the ID of ' #test2 '. Prev ()              //a sibling element that precedes the P element $ ("P"). Prevall ()           //p element before all of the sibling elements $ ("#test"). Prevuntil ("#test2")     //id to "#test" element before to ID ' # Test2 ' All of the sibling elements, Qiatouquwei $ ("P"). The parent ()           //of each P element is $ ("p "). Parents ()          //all ancestor elements of each P element, body,html$ (" #test "). Parentsuntil ("#test2")     //id the "#test" element to all the parent elements between the id ' #test2 ', Qiatouquwei $ ("div"). Siblings ()       //all the sibling elements, not including themselves 

Property Operations Basic Property operations

$ ("img"). attr ("src");    Returns the SRC attribute value $ ("img") for all images in the document. attr ("src", "test.jpg");    　　　Set SRC attribute $ ("img") for all images. Removeattr ("src");   Delete the src attribute of the image in the document by $ ("input[type= ' checkbox ']"). Prop ("checked", true);    　　 Select the check box $ ("Input[type= ' checkbox ']"). Prop ("checked", false); $ ("img"). Removeprop ("src"); Remove the SRC attribute of img

CSS Classes

$ ("P"). AddClass ("selected");    Add the ' Selected ' Class $ ("P") to the P element. Removeclass ("selected");    Remove the ' Selected ' Class $ ("P") from the P element. Toggleclass ("selected"); Delete if it exists, or add it

HTML code/text/value

$ (' P '). html ();  Returns the HTML content of the P element $ ("P"). html ("Hello <b>nick</b>!");    　　　　　　　　Sets the HTML content of the P element $ (' P '). text ();    　　　　　Returns the text content of the P element $ ("P"). Text ("Nick");    　　　　　　　Sets the text content of the P element $ ("input"). Val ();     　　　Gets the value of the text box in $ ("input"). Val ("Nick"); Set the contents of a text box

CSS Action style

$ ("P"). CSS ("color");    Access to view the Color property of the P element $ ("P"). CSS ("Color", "red");    Set the Color property of the P element to red$ ("P"). css ({"Color": "Red", "background": "Yellow"}); Set the color of the P element to the Red,background property to yellow (set multiple properties to use the {} dictionary form)

Position

$ (' P '). Offset ()//The relative offset of the element at the current viewport, Object {top:122, left:260}$ (' P '). Offset (). top$ (' P '). Offset (). left$ ("P"). Position () The offset of the element relative to the parent element, valid for the visible element, Object {top:117, left:250} $ (window). scrolltop ()//Get the height of roller skating $ (window). ScrollLeft ()//Get Roller skating width $ (window). scrolltop (' 100 ')//Set the roller skating height to 100

Size

$ ("P"). Height ();     Gets the height of the P element $ ("P"). width (); Gets the width of the P element $ ("P:first"). Innerheight ()//Gets the first matching element within the inner zone height (including padding, excluding borders) $ ("P:first"). Innerwidth ()//Gets the first matching element interior area width ( Includes padding, excluding borders) $ ("P:first"). Outerheight ()//Match element external height (default includes padding and border) $ ("P:first"). Outerwidth ()//Match element external width (default includes padding and border) $ ("P: First "). Outerheight (True)//true when including margins

Document processing Internal Inserts

$ ("P"). Append ("<b>nick</b>");    　　Append the contents of $ ("P") after each P element. AppendTo ("div");  The P element is appended to the DIV within $ ("P"). Prepend ("<b>Hello</b>");    　Each P element is preceded by a $ ("P") appended to the content. Prependto ("div"); The P element is appended to the DIV in front

External insert

$ ("P"). After ("<b>nick</b>");    Inserts the contents $ ("P") after each P element sibling. Before ("<b>nick</b>");     Insert the contents $ ("P") before each P-element sibling. InsertAfter ("#test");    All P elements are inserted into the ID of the test element after $ ("P"). InsertBefore ("#test"); All P elements are inserted in front of the ID test element

Replace

$ ("P"). ReplaceWith ("<b>paragraph.  </b> "); Replaces all matching elements with the specified HTML or DOM element $ ("<b>paragraph".   </b> "). ReplaceAll (" P "); Replace all selector matched elements with matching elements

Delete

$ ("P"). empty ();  Deletes all child nodes in the matching element collection, excluding the $ ("P") itself. Remove ();  Removes all matching elements, including itself $ ("P"). Detach (); Delete all matching elements (and remove () different: All bound events, attached data will be preserved)

Copy

$ ("P"). Clone ()//Clone the element and select the cloned copy $ ("P"). Clone (True)//Boolean refers to whether the event handler will be copied

Events Page Loading

function events that run when the page loads successfully

$ (document). Ready (function () {do something ...}); Shorthand $ (function ($) {do something ...});

Page processing

Bind the event handler for each matching element, binding multiple with {}. $ ("P"). Bind ("click", Function () {alert (this). text ());});     $ (MENUF). Bind ({"MouseOver": Function () {$ (MenuS). Parent (). Removeclass ("Hide");          }, "Mouseout": Function () {$ (MenuS). Parent (). addclass ("Hide");});    $ ("P"). One ("click", Fun ...) One binds a disposable event handler $ ("P"). Unbind ("click")//Unbind an event

delegate binding, dynamic binding (deferred binding)

Unlike bind, a temporary binding occurs when there is a time between. $ ("P"). Delegate ("Click", Function () {do something ...});    　　　$ ("P"). Undelegate (); The P element deletes all events added by the delegate () method ("P"). Undelegate ("click")//Remove all click events added by the delegate () method from the P element

Event

$ ("P"). Click ();    //clicking Event $ ("P"). DblClick ();     //double-click event $ ("Input[type= Text] "). The focus ()   //element is triggered  focus  event $ (" Input[type=text] "). Blur ()    // Triggers the  blur event $ ("button") when the element loses focus. MouseDown ()//When the mouse is pressed, the event $ ("button") is triggered. Event $ ("P") when the mouse button is relaxed on the MouseUp ()   //element "). MouseMove ()      //event $ (" P ") is triggered when the mouse pointer moves through the specified element. MouseOver ()       //Event $ ("P") is triggered when the mouse pointer is over an element. Mouseout ()     //Triggers Event $ (window) when the mouse pointer moves away from the element. KeyDown ()      //Event $ (window) is triggered when the keyboard or button is pressed. KeyPress ()    //triggers an event when the keyboard or button is pressed, and every input character is triggered once for $ ("input" ). KeyUp ()      //trigger event $ (window) When the button is released. Scroll ()      // Event $ (window) is triggered when the user scrolls. Resize ()      //event $ ("Input[type= ' text '") is triggered when resizing the browser window. Change ()     //Event $ ("input") is triggered when the value of the element changes. Select ()     //when input  The event $ ("form") is triggered when the text in the element is selected. Submit ()      //Event $ (window) is triggered when the form is submitted. Unload ()      //when the user leaves the page 

(Event object) object

All event functions can be passed into the event parameter for easy handling of events

$ ("P"). Click (Function (event) {alert (event.type);//"click"}); (Evnet Object) Property method: Event.pagex//event occurs when the mouse is a horizontal distance from the upper-left corner of the Web page Event.pagey//event occurs, the mouse distance from the upper left corner of the page vertical distance event.type// The type of event Event.which//The key is pressed Event.data//bind the data in the event object, and then pass in the event handler function Event.target//event-oriented page element 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

Basic effect

$ ("P"). Show ()//Show hidden matching elements $ ("P"). Show ("slow");   　　 The parameter represents the speed, ("slow", "normal", "fast"), and can also be 900 milliseconds $ ("P"). Hide ()//hides the displayed element $ ("P"). Toggle (); Toggle Show/Hide

Sliding

$ ("P"). Slidedown ("900");    　Slide the paragraph down by $ ("P") for 900 milliseconds. Slideup ("900");  Slide the paragraph on $ ("P") for 900 milliseconds. Slidetoggle ("900"); Slide the paragraph up and down in 900 milliseconds

Fade in and fade

$ ("P"). FadeIn ("900");    　　 Use 900 milliseconds to fade the paragraph into $ ("P"). FadeOut ("900");    　Fades the paragraph by 900 milliseconds ("P"). Fadetoggle ("900");    Fades the paragraph in 900 milliseconds, fading out $ ("P"). FadeTo ("slow", 0.6); Adjust the transparency of the paragraph to 0.6 in 900 milliseconds

Object access

$.trim ()//remove spaces at both ends of the string $.each ()//traverse an array or object, for loop $.inarray ()//return a value in the array at index position, no return-1 $.grep ()//Returns an element in the array that conforms to a certain standard $.exte nd ()//Combine multiple objects into the first object $.makearray ()//Convert the object to an array $.type ()//To determine the category of the object (function object, Date object, array object, regular object, and so on $.isarray ()//Determine if 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 "{}" or "New object" Established object $.support ()//Determine if the browser supports an attribute

Plug-in expansion mechanism

Mode one jQuery.fn.extend ({check:function () {return This.each (function () {this.checked = true;});  }, Uncheck:function () {return This.each (function () {this.checked = false;}); }}); $ ("Input[type=checkbox]"). Check (); $ ("Input[type=radio]"). Uncheck ();

Mode two jquery.extend ({min:function (A, b) {return a < b] a:b;},//ternary operation Max:function (A, b) {return a > B? A:B; }});     Jquery.min (2,3);      2jquery.max (4,5); 5

Web Development (beginner)-JQuery