Today, I am not busy. I think of jquery, not the source code, but the usage instructions of jquery. I made some simple notes. 1. DOM operation 1. delete a node element. remove (); // delete an element from the page. If the deletion is successful, the deleted object is returned. Optional... syntaxHighlighter. all (); today I am not busy. I think of jquery, not the source code, but the usage instructions of the system. I made some simple notes. 1. DOM operation 1. delete a node element. remove (); // delete an element from the page. If the deletion is successful, the deleted object is returned. You can choose to delete an element. remove ("li [title! = JQuery] "); // The parameter is the filtering condition for deletion. 2. Copy the node element. clone (true); // true indicates that the events bound to the node are also copied when the node is copied. The new elements also have node events. 3. The Node replaces elemA. replaceWith (elemB); // replace all elemA elemB with elemB. replaceAll (elemA); // replace all elemA with elemB (use order is opposite to replaceWith) Note: Events bound to the element before replacement will disappear with the disappearance of the original element, you need to re-bind the event to the replaced element. 4. Package node elemA. wrap (elemB); // wrap each matching elemA in elemB, and each matching element will enclose elems independently. wrapAll (elemA); // wrap all matching elements in an elemA. wrapInner (tag); // wrap the child content (including text nodes) of each Matching Element (elemA) with other structured tags, elemA will be the tag's parent element 5. Traverse DOM nodes children, prev, next, siblings, nextAll, prevAll, find, parent, parents (multiple ancestor elements) closest: it is used to obtain the latest Matching Element. First, check whether the current element matches. If yes, the element itself is returned. If no match exists, the parent element is searched up until the element matching the selector is found. If nothing is found, an empty JQuery object is returned. For example, to add a color to the nearest li element of the clicked target element, you can use the following code: $ (document ). bind ("click", function (e) {combine (e.tar get ). closest ("li" ).css ("color", "red") ;}) 6. offset (): gets the relative offset of the element in the current window. The returned object contains two values: top and left, which are only valid for visible elements position (): obtains the offset of the element relative to the parent element. The returned objects also include top, left scrollTop (), and scrollLeft (): you can specify a parameter for the two methods to control the scrolling of the element to the specified position. (ScrollLeft (300): scroll to PX from the left side.) 7. Use val () to select, checkbox, and radio val () not only to set the element value, you can also obtain element values. In addition, the val () method is also useful in enabling the select (drop-down list box), checkbox (multiple-choice box), and radio (single-choice) options to be selected, it is often used in form operations. In JQuery, the val () method is to read from the last option. If any of the values or text of the option matches, it is selected. Example: [javascript] Select 1 Select 2Whether val ("select 1") or val ("select 2") is used, the next Select 2. If you want to select both of them, add the multiple attribute to select and then elem. val (["select 1", "select 2"]), so that both are selected. Note that only the multiple = "multiple" attribute can be selected. You can also use attr ("selected", true) to achieve: $ ("# single option: eq (1 )"). attr ("selected", true); // set the property selected. 2. Event loading event: the difference between ready and load: ready only requires DOM structure loading, some associated files or images do not need to be fully loaded. load needs to wait until all files are loaded. Event binding: elem. click (function () {}); elem. bind ("click", function () {}); elem. on ("click", function () {}); elem. one ("click", function () {}); // the event to be unbound immediately after the binding is executed. After the binding is executed once, the unbinding: elem will not be executed again. unbind ("click", func); // if the second parameter is left blank, all the click events are unbound. Otherwise, only the func processing process bound to the click event is unbound. Event Simulation: In JQuery, you can use the trigger (type [, data]) method to perform simulated operations. type indicates the event processing type, and data indicates the parameters required by the event processing function, which can be omitted. For example, you can use the following code to trigger the click Event of a button with the id of btn. [Javascript] $ ('# btn '). trigger ("click"); in this way, after the page is loaded, the desired effect will be immediately output. You can also simply enter click () to achieve the same effect: $ ('# btn '). click ();. This is similar to the fireEvent function of mootools. Trigger supports custom events. Trigger not only executes simulated events but also browser default events. If you only want to execute simulated events and do not want to execute browser default events, you can use triggerHandler () in the same way as trigger. Event bubbles: bubbles from the layer to the outer layer. [Html] The outer div element's inner span element's outer div element binds the event to the above element: [javascript] $ (function () {// bind the click Event $ ('span ') to the span element '). bind ("click", function () {var txt = ('{msg'}.html () +"
The inner span element is clicked.
"; Items ('{msg'}.html (txt) ;}); // bind the click Event $ ('# content') to the div element '). bind ("click", function () {var txt = ('{msg'}.html () +"
The outer div element is clicked.
"; Items ('{msg'}.html (txt) ;}); // bind a click event to the body element $ (" body "). bind ("click", function () {var txt = ('{msg'}.html () +"
The body element is clicked.
"; Click ('{msg'}.html (txt) ;});}) When you click span, the click event on the span, # content, and body is triggered at the same time, clicking # content triggers the click event on the # content and body simultaneously. Sometimes event bubbling can greatly improve the script performance, but in some cases it will produce unexpected results. For example, in this example, event bubbling needs to be blocked and event can be used. stopPropagation () to prevent event bubbles. In addition, some elements have some default events, such as link jump and form submission. In some cases, the default events need to be blocked. For example, when a form verification error occurs, you do not want to submit the form, use event. preventDefault () to block default events. There is also a simple way to prevent event bubbles and default events: return false; this is a simple way to prevent both default events and bubbles. In my experience, some events cannot be blocked by return false. But most of the time it is useful. The process of event capture and event bubbling is the opposite. It is rarely used and there is nothing to write. Attribute and method of event object: event. type: get event Events event.tar get: get the event element. pageX/event. pageY: obtains the coordinate event of the cursor relative to the page. which: Right-click the left, center, and right-click button of the mouse in the mouse event, and 1, 2, and 3 represent the left and right sides. In the keyboard event, obtain the keyboard buttons. Event. metaKey: obtains the ctrl key event in a keyboard event. originalEvent: point to the original event object event. relatedTarget: In the standard DOM, elements of mouseover and mouseout can be accessed through the event.tar get method. the relatedTarget method. Event. relatedTarget is equivalent to the event. fromElement method of IE browser in mouseover, and is equivalent to the event. toElement method of IE browser in mouseout. jQuery encapsulates the method to make it compatible with various browsers. Event. preventDefault (): block default event. stopPropagation (): block event bubbles
