Dom object: A node object obtained directly using javascript: var objdom = document.getElementById ("title"); var objhtml=objdom.innerhtml; jquery object: The object that is produced after the DOM object is wrapped using jquery, which can use the method in jquery: $ ("#title"). html (), equivalent to document.getElementById ("title"). The Innerhtml;dom object and the jquery object each have a separate set of methods that cannot be mixed with the jquery object to the DOM object: 1. The jquery object is an array-like object that can be obtained by [index] by means of the corresponding DOM object: Var $txtName =$ (". txtname"); jquery object var txtname= $txtName [0]; Dom Object 2, get the corresponding DOM object by the Get (index) method: var $txtName = $ (". Txtname"); jquery object var txtname = $txtName. Get (0); Dom Object Use the $ () function to convert: $ (DOM object) var Txtname=document.getelementbyid ("Txtname"); Dom object var $txtName = $ (txtname); jquery Object NOTE: 1. jquery object naming convention begins with $2, often using $ (this) to get the current jquery object that triggered the event json (JavaScript object Notation) A lightweight data interaction format var JSON = {Name: value, Name: value, ...}; The value of JSON can be a number, string, Boolean, array, or object, Nulljson method: dot notation to get append style: AddClass ("class") or AddClass ("Class1 class2 ...") Remove style: Removeclass ("class") or Removeclass ("Class1 class2 ...") html Code manipulation: HTML () can manipulate HTML code, similar to innerhtml:$ ("Div.left") in native JavaScript. html ();("Div.left"). HTML ("<div class= ' content ' >...</div>"); text manipulation: the text () can get or set the textual content of the element: $ ("Div.left"). Text (); or $ ("Div.left"). Text ("<div class = ' content ' > ...</div>"); Value operation: Val () can get or set the value of the element's Values property: $ (input). val (); Gets the value or $ (input). val ("value"); Set value values node operations: jquery node operations are mainly divided into: Find node Create node Insert node Delete node Replace node copy node Create node element: Factory function $ () to get or create a node: $ (selector) : Get node $ (element) via selector: convert DOM node to jquery node $ (HTML): Create jquery node var $newNode with HTML string 2=$ ("<li title= ' title Thousand and Chihiro ' > Thousand and Chihiro </li> "); Create with text and attributes <li> element nodes Insert child nodes: Insert child nodes inside: Append (content) $ (A). Append (b) indicates that B is appended to a as: $ (" ul "). Append ($newNode 1); AppendTo (content) $ (a). AppendTo (b) indicates that A is appended to B such as: $newNode 1.appendTo ("ul"), prepend (content) $ (a). Prepend (b) indicates that the B front is inserted into a such as: $ ("ul"). Prepend ($newNode 1);p rependto (content) inserting sibling nodes: inserting sibling nodes outside the element: after (content) $ (A) . After (b) indicates that B is inserted after a such as: $ ("ul"). After ($newNode 1); InsertAfter (content) $ (a). InsertAfter (b) indicates that a is inserted after B, such as: $ Newnode1.insertafter ("ul"); Before (content) insertbefore (content) Replacement node: ReplaceWith () and ReplaceAll ()Replace node: replication node: Clone () for replication node: $ (A). Clone (True). AppendTo (B); Tip: Clone () has a side effect of copying the ID, either avoiding cloning the element with ID or using class instead Function of ID Delete node: jquery provides three ways to delete nodes: 1, remove (): Delete entire node 2, detach (): Delete entire node, preserve element binding event, additional data 3, empty (): Empty node Property action: attr () Gets or sets the property value of the matching element://Gets the value of an attribute of the element $ (selector). attr ("attribute name");//Set Element's property value $ (selector). attr ("Property name", "value");//Set a property value of $ ( selector). attr ({"Attribute 1": "Value 1", "Property 2", "Value 2"});//Set Multiple property values removeattr () to remove an attribute from the matching element: $ (selector). Removeattr ("Property name") ; traversing child elements: the Children () method can be used to get all the child elements of an element: $ ("body"). Children (); Gets the child elements of the <body> element, but does not consider the descendant elements and the text nodes traverse sibling elements: jquery can get all the sibling elements immediately after, immediately before, and before and after the element: Next ([expr]) is used to get the element immediately after the matching element, such as: $ ("Li:eq (1)"). CSS ("Background-color", "#F06");p rev ([expr]) is used to get the element immediately preceding the matching element, such as: $ ("Li:eq (1)"). Prev (). CSS (" Background-color "," #F06 "); siblings ([expr]) is used to get all the sibling elements that precede and follow the matching element, such as: $ (" Li:eq (1) "). Siblings (). CSS (" Background-color "," #F06 "); traverse the predecessor element: jquery can traverse the predecessor element, method: The parent () gets the element parents () gets the ancestor element traversal of the element--other methods: jquery traversal-each ( ): Executes a function with each matching element as the context: $ ("img"). each (function (i) {this.src = "Test" + i + ". JPg ";}) Find Method-Find (): Searches for all elements that match the specified expression: $ ("P"). FIND ("span"); Find the span element in the descendant nodes of all P elements css-dom action: In addition to CSS (), there are style manipulation methods for getting and setting the element height, width, relative position, and so on: Height ([value]) Sets or returns the width of the matching element ([ Value]) Sets or returns the width of the matching element offset ([value]) returns the top and left coordinates in pixels. This method only effectively jquery events for visible elements: The jquery event is the encapsulation of JavaScript events, Common events are categorized as follows: Base event: Window Event mouse event keyboard event form Event Composite event is a combination of multiple events: Mouse cursor hover mouse Click Mouse event: Click (FN): MouseOver (FN) : Mouse over Mouseout (FN): Mouse out Keyboard event: KeyDown (FN): KeyUp (FN) when keyboard is pressed: KeyPress (FN) when releasing a key: form event when generating printable characters: Focus (FN) : Get Focus Blur (FN): Lost Focus Submit (FN): Form commit Event binding: Bind () Method-Event binding: $ (selector). bind (TYPE[,DATA],FN)//For example: $ ("#btn"). Bind ("click", FN); $ ("#btn"). Bind ("Click DblClick", FN); $ ("#btn"). Bind ({click:function () {},mouseover:function () {}}); Unbind () Method-Unbind Event binding: $ (selector). Unbind ()//For example: $ ("#btn"). Unbind () $ ("#btn"). Unbind ("click") $ ("#btn"). Unbind ("click" , handler);//The event handler specified on () method-Event binding: $ (selector). On (EVENTS[,SELECTOR][,DATA],FN)///For example: $ ("#form"). On ("click", " . btn ", {},FN); Off () Method-Unbind event: $ (selector). Off (Events,[seleCtor],[handler]) $ (selector). Off (Events,[selector]) $ (selector). Off (events) $ (selector). Off () Note: The On () method is recommended to bind the event, Higher efficiency MOUSE cursor hover event: hover (fn1,fn2) method: equivalent to MouseOver and Mouseout event combination//Mouse in parent menu move in move out, submenu hidden and display: $ ("#parentMenu"). Hover ( Function () {$ ("#childMenu"). CSS ("Display", "block");//mouseover},function () {$ ("#childMenu"). CSS ("display", "none" );//mouseout}); Mouse Continuous Click event: the Toggle () method simulates the mouse continuous click event: $ ("body"). Toggle (function () {},//1,4,7 ... trigger function () {},//2,5,8: Trigger function () {},//3,6,9 ... when clicked); animation effect of jquery 1, control element display and hide 2, control element fade 3, change element height Show and hide elements: Show ([Duration][,complete]) Hide ([Duration][,complete]) $ (". Tipsbox"). Show ("slow"); Note: The display speed can take the following values: milliseconds (such as 1000), slow, normal, fast fade effects: FadeIn () and fadeout () can be achieved by changing the transparency of the element to achieve the fade effect $ ("input[name= FADEIN_BTN]. Click (function () {$ ("img"). Fadein ("slow");}); $ ("input[name=fadeout_btn]"). Click (function () {$ ("img"). fadeout (1000);}); Toggle Element Visible state: Toggle () In addition to a continuous click event that simulates a mouse, it can also be used to toggle the visible state of an element by $ ("LI:GT (5): Not (: last)"). Toggle (); Change the height of the element: Slidedown () allows the element to gradually extend the display slideup () so that theThe elements are gradually shortened until the $ ("H2") is hidden. Click (function () {$ (". txt"). Slideup ("slow"); $ (". txt"). Slidedown ("slow");}); Custom animations: The Animate () method functions for creating custom animations: $ (selector). Animate (params [, speed] [, easing] [, FN]); params: A CSS style and value that specifies the animation effect speed: A string of one of three predetermined speeds ("slow", "normal", "fast") or a millisecond value that represents the duration of the animation (for example: easing): The name of the erase effect to use (requires plug-in support). Default jquery provides "linear" and "Swing" FN: functions executed when the animation is complete, each element executes once
JQuery Basics Point Grooming
