"jquery Syntax" 1. Using jquery You must first import the selector in the Jquery.x.x.x.js file 2.jquery: $ ("selector name"). Method (). ($ is the abbreviation for jquery, which means that the selector can be jquery ("selector name"). Method (). present+ Next: Selects the next adjacent node of the present node. Present~ Next: Selects all the sibling nodes behind the present node. 3. Document-Ready functions in jquery: $ (file). Prepare (function () { }); Shorthand: $ (function () { }); can be added multiple times. [The jquery document-ready function differs from the window.onload] 1. Window.onload must wait for the Web resources (including pictures, etc.) to be fully loaded before they can be executed; the virtual function of the document only needs to wait until the page DOM structure is loaded and executed. 2. Window.onload can only be written once in a page. A document is a virtual function on a page and can have n. 4.js Objects and jquery objects: 1. Use $ ("") to fetch the node as a jquery object, you can only call the jquery method, you cannot call the native JS method, $ ("#div"). Click (function () {}) √$ ("#div"). Onclick=function () {}; X using jquery to invoke native js , you can use the GetElement series to get the JS object, and you cannot call the jquery function. "jquery object and JS object conversion" 1.jquery to JS: The JS object is selected using. Get (index) or [index]. $ ("#div"). Get (Index). Onclick=function () {};$ ("#div") [0].onclick=function () {}; 2.js to jquery: Use $ () Wrap variable. var div = document.getelementbytagname ("div"); $ (div). Click (function () {}); 5. Methods to resolve multiple library conflicts jquery.noconflict ();! Function ($) {$ ("div"). Click (function () { })} (JQuery) "Document processing method"1.[Internal Insert]1. $ ("div"). Apend (CONTENT|FN): Appends all the selected content to the inner text of the node and changes the position if the content is inside. Do not enter new content. 2. $ ("<p/>"). AppendTo ("selector name"): Adds the newly created node to the inside of the selector last. 3. $ ("div"). Prepend (content): Appends all the selected labels to the inner text of the node. If the internal content is changed position, do not enter new content. 4. $ ("P"). Prependto ($ ("div")); : The front p tag is placed inside the node.2.[External Insert]1.$ ("P"). After ("<b>Hello</b>"); : Inserts a content after the matching selector. 2.$ ("P"). InsertAfter ("#foo"); : Inserts the previous match into the back of the next match. 3.$ ("P"). Before ("<b>Hello</b>"); : Inserts a content in front of the matching selector. 4.$ ("P"). InsertBefore ("#foo"); : Inserts the previous match into the front of the next match.3.[Package]1.$ ("div"). Wrap ("<section></section>") sets a parent node for each selected node. 2.$ ("div"). Wrapall ("<section></section>") all the selected nodes are wrapped in the same parent node. 3.$ ("#div1 P"). Unwrap (). Deletes the parent node of the selected node. 4.$ ("#div1"). Wrapinner ("<div></div>") wraps all child elements of the selected node in a new node. The new element remains the child node of the current element.4.[Replace]1.$ ("#div1 P"). ReplaceWith ("<p>1</p>") replaces the newly created node with the previously selected node. 2.$ ("<p>1</P>"). ReplaceAll ("div p") upside down, before replacing.5.[Delete]1.$ ("#div1"). Empty () empties all child elements of the current node. 2.$ ("div p"). Remove () Removes all the selected nodes and their child nodes. 3.$ ("div p"). Detach () deletes all the selected nodes and their child nodes. [The difference between remove () and detach ()] deletes the node using remove () and, after recovery, no longer preserves the events bound by the node. Nodes that are removed by using detach () can retain the events that the nodes are bound to after recovery.6.[Clone]1.clone () $ ("#div1"). Clone () passed in two parameters, the first: false indicates that only the current node and child nodes are cloned, not cloning events, true cloning events. Second: false does not pass a child node true to a child node."Properties and CSS Methods"[Properties]1.. attr ("Class", "CLS") sets the properties of the node. attr ({"Class": "Cls1", "name": "Name1", "Style": "font-size:20px"}); Set multiple properties at the same time (pass in an object to set multiple properties in the form of a key-value pair). attr ("Class") takes the attribute 2 of the node. . Removeattr ("class") removes the node's attribute 3. The. Prop ("checked") can take node properties, but when reading a property named "Property name" = "Property value" such as disabled checked, the property value is not taken and only the function is judged to have no return of false and true. [attr and prop differences] when reading a property named "Property name" = "Property value" such as disabled checked, prop does not take the property value, only to determine if the function returns false and true. The attr will take the property value, and no return undefined. ATTR can only fetch attributes written on the label, and cannot judge the state. 4.. removeprop ("checked"). Delete the node properties.[CSS class]1. addclass ("class name") adds a class name based on the original class. 2.. removeclass ("CLS CLS1") deletes the class name, and the remainder remains intact. 3. Toggleclass ("DIV1") switch class, if you have the specified class to delete the class, do not add the class.[HTML code/text/value]1.html ("HTML code") does not pass the parameter to the HTML code, the parameter sets the HTML code. 2.text ("text text") does not pass the parameter to text, and the text is set by the argument. 3.val (the value in the text box) does not pass a parameter to the value in the text box (that is, the property value of the Value property in the label), and the parameter setting is passed."CSS Methods"[CSS]1. CSS ("property name") takes the property value of the property name of the CSS style: CSS ("Property name", "property value") to add CSS style to the node, which belongs to the row-level style sheet permission: CSS ({"Property name" "Property value", "Property name", "attribute value", "Property name" function (Index,value) {return property value. For example: Return + "px";}}); Add multiple styles at the same time. 2.1: Offset () returns the offset of the node relative to the upper-left corner of the browser. Margin does not count as part of a node. Returns an object {TOP:20,LEFT:20} 2. . Position () returns the offset of the node relative to the parent node, which must be the anchor element and, if not positioned, still measured relative to the upper-left corner of the browser. Margin is part of the node when the offset is measured. 3. ScrollTop () Sets or takes the position of the scroll bar of the specified node. 3. Height () takes or sets the width height of the node: width (). Innerheight () takes the internal area of the node wide +padding.innerwidth (). Outerheight () To the external zone of the node. Outerwidth () (does not pass the parameter represents the width high +padding+border, passes in true to indicate the wide height +padding+border+margin)"jquery Object Access"1. Each () iterates through the array, passing in a parameter function (Index,item), returning the return value of the callback function to true, equivalent to Continue;return false, equivalent to break. 2. Size () returns the length of the array: Length property 3. Get () to the JQuery object to the JS object, passed to index to take out the first, and to JS object, do not pass the parameter, means that all the elements in the jquery object array to JS object"Tools"[Array and object manipulation] 1. $.each (object or array, function (Index,item) {}) iterates over an incoming array or object, either as an array of jquery objects or as an array of JS objects. 2. The $.map () function is the same as each, but the traversal procedure callback function can return a value to modify the original value. The final result is received with a new variable. 3. $.inarray (obj, array, Fromindex) begins by Fromindex (which can be omitted) to find the obj subscript in the arr array. If not found return-1. 4. $.toarray () Restores the selected jquery Dom collection to the array, each of which is a JS object. 5. $.merge (array 1, array 2) merges two arrays. 6. $.parsejson () converts the JSON string into a JSON object.[test operation]1. $.contains (JS Parent object, JS Sub-object) detects whether the parent object contains child objects and returns True or false.[Filter]1. Hasclass () Determine if the node has this class name."Event Method"[how events are bound]1. Shortcut binding $ ("Button:eq (0)"). DblClick (function () {}) Disadvantage: Cannot cancel event binding. 2.on Mode binding ①$ ("Button:eq (0)"). On ("Click Dbclick mouseover", function () {alert ("hah");}) ②$ ("Button:eq (0)"). Off ("click" ); ③$ ("Button:eq (0)"). On ({"Click": Function () {Alert ("click");}, "MouseOver": function () {alert ("over");}}) ④$ ("Button:eq (0)"). On ("click", {"name": "Zhangsan", "Age": 18},function (E) {console.log (e.data.name); $ ("div"). On (" Click "," button ", {" name ":" Zhangsan "," Age ": 18},function (E) {console.log (e.data.name);}) Pros: You can cancel event binding. You can bind multiple events to the same function at the same time. You can also pass in an object, passing in an event and a function's key-value pair. Multiple functions that pass in multiple events. You can also pass in objects and parameters, which can be accessed by an E-e parameter. Passes in a selector that is delegated to the selected node for execution.[Event Delegation]Concept: To bind an event that is originally bound to a DOM node to its parent node or even the root node, and then delegate to the current node for execution. Role of event Delegation: 1. Binding events directly to the root node reduces the number of event bindings and saves resources. 2. A new label that conforms to the event delegation selector can also perform event delegation events.[Event Handling]1.on (event name, event delegate selector, incoming data, function); Binding event 2.off (event name, binding function name) does not pass parameters, clears all bound events, and clears all functions if only one event name is passed in. 3.one (event name, incoming data, function) can only be executed once with an event bound by one. You can pass in three functions, 4.trigger (event name, [three-in-one]) to trigger the event of the node. Instead of having to perform clicks and other actions. The second parameter is the array, where each value is the parameter passed to the event callback function NOTE!!! The parameters of the event callback function must first be an event object, so the arguments we pass are evaluated from the second start. The passed parameters can be read using arguments, and subscript 0 remains the event factor. 5.triggerHandler () usage is the same as trigger [trigger and Triggerhandler differ]1. Trigger can trigger all events. Triggerhandler cannot trigger an HTML event, such as a form's submit event. 2. Trigger can be triggered globally, and an unlimited number of Triggerhandler can only trigger the first trigger event in all matching elements. 3. The return value of trigger is the DOM object that invokes the. trigger () function, which conforms to the chain syntax of jquery. The return value of Triggerhandler is the return value of the event callback function, if no return value is returned undifined.[Event Toggle]1.hover (mouseover function, mouseout function) accepts two functions, representing mouseover and out respectively, accepting a toggle display for mouseover 2.toggle ("Fast", function () {}) without arguments Hides the current element. Pass in a parameter, gradient effect. "Fast"/"slow"/"ease" and other incoming functions, after the completion of the callback function passed in a Boolean type parameter, if True, display, false hidden"Animation Method"1. The show () method does not pass the parameter, the direct display does not animate the time milliseconds, or the speed string "slow", "normal", "fast" and so on to complete the animation at the specified time, you can also pass in a callback function, indicating that the animation after the completion of the callback function is to modify the width The/height/opacity 2.hide () method hides the displayed elements, and the effect is the opposite of show;[Slide]1. Slidedown (): Let the displayed element hide, modify the height property parameter with show () 2. Slideup (): Let the hidden element display, modify the Height property 3. Slidetoggle: Toggle display and hide with height change[Fade in/fade]1.. fadeIn () Let the hidden display, modify the opacity attribute parameter with show () 2. . FadeOut () Let show hide, modify Opacity property 3. . Fadetoggle () Toggle Show hidden State, modify opacity property 4. The. FadeTO () function is the same as Fadetoggle, with the second parameter representing the final transparency after the animation is complete[Custom Animation]1.. animate ({fontSize: "68px"},2000, "Liner", function () {}) first parameter passed in an object, inside the animation end state of the property key value pair second is the completion time can not write can be "slow" " The third of the normal "fast" is the animated style "liner", "Swing", and the fourth is the callback function does not write 2. . Stop () stops all animations for the current node, and subsequent animations are no longer executed, and the callback function is no longer called. 3. Finish () ends all animations of the current node, and the animation goes directly to the last state, calling the callback function. 4. Delay () passes in a millisecond value and then performs the next animation after the delay. $ ("#div1"). Animate ({fontSize: "68px",}). Delay ((). Animate ({width: "50px", Height: "50px"})
Java Getting started the seventh chapter-jquery;
