JQuery usage record, jquery record

JQuery usage record, jquery record

How to set the compatibility of css3 attributes in jQuery:

$(element).css({ 　　"webkitTransform":"xxx", 　　"MozTransform":"xxx",　　"MsTransform":"xxx", 　　"OTransform":"xxx", 　　"transform":"xxx"});

In jquery 1.9, the hover event is removed and changed to the mouseenter and mouseout events;

Query events bound to the element:

Jquery. _ data ($ (ele) [0], "events"); // returns all events bound to this element. Each type of event maintains an array, you can change the event trigger sequence by changing the array sequence. Only when a delegate event is triggered (debugger) can getEventListeners (targetNode) be queried; // chrome APIs on the console, you can query events bound to the element.

Namespace usage:

When you unbind one of multiple event processing functions, a function name (a reference to this function) is required. That is, an anonymous function cannot be unbound and can be processed using a namespace.

When multiple events are bound to the same element and the trigger sequence needs to be controlled, namespace can also be used to resolve the issue.

/* Unbind one of multiple Event Handlers */$ ("selecotr "). on ("click. myFoo ", function () {// stuff}) $ (" selecotr "). unbind ('[click]. myFoo ');/* control the trigger sequence of event processing functions on the same element */$ ('ele '). on ('click. doStuff1 ', function () {doStuff1 () ;}); $ ('ele '). on ('click. dostuff2', function () {doStuff2 () ;}); $ ('ele '). trigger ('click. dostuff2 '). trigger ('click. doStuff1 '); $ ('ele '). trigger ('click. dostuff1 '). trigger ('click. doStuff2 );

Objects ().html () can receive class array objects or array parameters composed of input DOM nodes, which are processed as strings, but events bound to the nodes are lost. Events such as moving nodes (such as append and before) will not be lost.

Remove () method: this node and all its child nodes will be deleted at the same time, and a reference pointing to the deleted node will be returned. You can continue using it later, and the bound events will be lost.
Detach () is the same as remove (), but all bound events and additional data are retained.
Empty () does not delete the node, but clears all child nodes of the element.

$ ("Content"). insertBefore ("Target") ===$ ("Target"). before ("Content") in... Insert a sibling element.

$ (). Append (B) is appended at the end of B. If $ (A) is already on the page, $ (A) is moved to the end of B instead of copying. After sorting the tr set, you can append it directly to the tbody.

$ (...). Prepend () in... Internal start append.

: Nth-child () Usage

Basic usage
: Nth-child (n) Select the nth child element // The number of elements starting from 1
: Nth-child range usage
POSITIVE RANGE
: Nth-child (n + x): Select multiple child elements starting from x. // n automatically + 1 from 0,
For example, nth-child (n + 6) is equivalent to letting you select 6th: nth-child (6) and all its child elements.
Negative direction range
: Nth-child (-n + x): select the nth child element from 1st to the nth child element.
For example, nth-child (-n + 9) allows you to select 9th child elements and all its previous child elements.
Restrictions
Nth-child (n + 4): nth-child (-n + 8) selects the 4-8 child element

$ (...) The obtained result is always an object, even if no element is found on the page. Therefore, if ($ (…) cannot be used to determine whether an element exists (...) If ($ (...). Length. 0 is Falsy.

The parents () matches the parent element until it is found. The result is greater than or equal to 0 objects. The closest () matches the current element until it is found and stops, the result is 0 or 1 object.

 

JQuery (selector, [context])
Usage 1: Set the selector Environment
By default, the selector searches the DOM from the root of the document. However, you can set the optional context parameter for $.
$ ("Div. foo"). click (function (){
$ ("Span", this). addClass ("bar ");
});
Since the span selector is limited to this environment, only the span in the clicked element will get 'bar '. Internally, the selector environment is implemented through the. find () method, which is equivalent to $ (this). find ("span ").

Find (exp): Continue searching from the descendant element of the current set
Filter (exp): filters out the level elements of the current set.

Gt (n), lt (n) index starts from 0, excluding itself n
$ ("Selector"). slice (from, to) has better performance than $ ("selector: lt ")

JQuery. extend (obj) extends the jQuery class itself. For example, $. ajax () is used to extend the ajax static method for jQuery.

This method is used to extend the attributes of an object and Merge multiple objects into the target object (for example, the default parameter var option in the plug-in is $. extend ({}, defaultVal, object1 [, objectN]). If there is only one parameter, It is merged into jQuery.
JQuery. fn. extend (obj) extends the jQuery object prototype Method: jQuery. fn = jQuery. prototype, which can be called by any jQuery object.

 

$ ("Selector: visible") cannot use native DOM, and the performance is not good; change to $ ("selector"). filter (": visible") is better.

The elements searched for by this method do not include: display: none; or elements whose width and height are both 0; or <input type = hidden/>.

Note: Elements with (visibility: hidden) or (opacity: 0) are considered visible, since they still consume space in the layout. therefore, if the parent element visibility: hidden; is hidden, $ ("selectro: visible") queries can still contain this element.

Css attribute visibility: hidden; the element is invisible on the page, but the original space is retained.
Display: none; the element is invisible and the page does not occupy any space.
Overflow: hidden. overflow hidden elements are also visible elements.

 

How do I temporarily disable the listener's event functions?
Set the data attribute {isDisable: true} on ele, and add judgment in the function. return directly when fasle is used; execute subsequent code when true is used.

End (): Before returning to a recent "destructive" operation, you can call the end method continuously to change the set of elements that are matched by a chained call to the status of the previous match. For example, after calling the css method, call the end method to continue the chained operation.

 

$. When ($. ajax (1), $. ajax (2). then (function (xhr1, xhr2 ){
... // Xhr1 is an array, xhr1 [0] is the data returned by $. ajax (1), and xhr1 [1] is the string of the response result.
})

Set the element attributes, using attr () or prop ()?
Properties with a value of true/false, such as checked/selected/readonly or disabled using prop (). Other properties use attr ().

JQuery. data (... ,...) The value set in the memory does not appear in the attribute node of the element (F12 is invisible), so $ ("[data-xxx =…] ") The selector cannot find the element with the new value.
$ (...). Attr ('xxx ','... '); You can set any value to the attribute node of the DOM element and support selector filtering.
After retrieving an attribute. data () any changes made. attr ('data-myvar ', '') will not be seen by subsequent. data () CILS. to avoid this problemDon't intermix. data and. attr () CILS. Use one or the other.

Select option
1: var options = $ ("option: selected"); // obtain the selected item
2: var value = options. val (); // obtain the value of the selected item =$ ("select"). val ();
3: var text = options. text (); // obtain the text of the selected item, which must be obtained through the options; only the selected val value can be obtained through the select statement, but not the text.
4. $ ('select'). val ('xxx'); // directly select the option with the value of xxx. = $ ('Select'). find ('[value = xxx]'). prop ('selected', true)
Although the value has changed, the change event is not triggered (triggered only when the focus is lost ). You can use $ ('select'). trigger ('change', {key: value}) to manually trigger the change event.

 

Input: checkbox click

If you click it with the mouse or press a space when it gets the focus, it will first switch its checked selection status and then trigger the click event. jQuery uses code to trigger the click event, the click event is triggered before switching the status. Solution to the conflict:
1. Add an Asynchronous Method to the click listening function. Wait until the checked attribute changes before making a judgment.
SetTimeout (function () {$ (self). is (': checked');...}, 0 );
2. Use the onChange method instead (supported by native form elements)
3. instead of using the Jquery object method, the native DOM method is: document. getElementById ('# XXX '). click () ===// $ ('inputselector '). eq (0 ). click ();

 

// Select the button specified on the page

$ ("Input [type = 'Radio '] [name = 'xxx'] [value = 'xxx']"). prop ("checked", true );
// Obtain the value of a single-choice button
$ ('Input [name = "xxx"]: checked'). val ();

Global ajax events
$ (Document). ajaxSuccess (function (event, jqXHR, ajaxOptions, data ){

... // JqXHR contains plainObject data. You can use ajaxOptions to determine the ajax request to be specially processed.

})
The global method listens to every ajax request sent through jquery. First, the local success method is triggered, and then the global success method is triggered. You can set global: false to not trigger a global AJAX event.
$ (Document). ajaxStop (function (){...}); // Triggers the callback function when all ajax tasks on the page are completed. You can disable it by using global: false.
Logout of the global callback function:
$ (Document). ajaxStop (function (){
$ (This). unbind ("ajaxStop"); // you can log out.
// Some code
});

The ready event is triggered, indicating that the file structure has been loaded (excluding non-text media files such as images ).
The onload event is triggered, indicating that all elements on the page, including images and other files, are loaded completely.

Define a round robin rule to determine whether the variables to be used exist. If the variable does not exist, continue the round-robin. If the variable exists, stop the round-robin.

(function polling(){    if ("undefined" == typeof (xxx) ){        setTimeout(polling,300);    }else{        fun(...);    }}());    

$ ('... '). Click (); // It is equivalent to directly calling the callback function and executing the stack in the current environment. Other code needs to be executed after the click processing function is executed.
JQObj. trigger ('xxx') is the same as above.

$. Cache is an internal array object of jquery and stores all event and data.
Search for the index jQuery17208377453013832714: 14 of the event object in the properties of the element, and then use $. cache [index]. events allows you to view all events bound to this element, and view function definitions through show function definition.

When there are multiple identical IDs on the page, the first one will be searched directly. However, by specifying the scope, you can still find the element behind the same id, and try to avoid the same id.

Label writing is not standard, and the browser will help to modify it without affecting the display effect. However, jQuery obtains information from the DOM tree, but it increases the difficulty of debugging bugs due to browser fixes. For example, if the label is not closed and does not affect the display, but the data obtained through text () is incorrect, the last closed label is obtained.

The method of an object is also an attribute of the object. You can access the object by using the. method name or a string in brackets, that is, ['method name']:
$ ('# Js-cb. btn-m') [source. alias = 'cpca '? 'Hide ': 'show'] (); more concise statement.