Comprehensive and detailed jQuery common development tips manual
- 2021-01-02 21:44:46
- OfStack
This article summarizes a very detailed jQuery common development skills article for your reference, the specific content is as follows
1. References to page elements
References to elements via jquery include methods via id, class, element name and element hierarchy, dom or xpath conditions, and the returned object is an jquery object (collection object), and the method defined by dom cannot be called directly.
2. Conversion between jQuery object and dom object
Only jquery objects can use the methods defined by jquery. Note that the dom object is different from the jquery object, and note whether the method is being invoked on an dom object or an jquery object.
A normal dom object 1 can normally be converted to an jquery object via $().
For example: $(document. getElementById(" msg ")) is the jquery object, and you can use the jquery method.
Since the jquery object itself is a collection. So if an jquery object is to be converted to an dom object, one of the items must be fetched, usually by index.
For example: $(" #msg ")[0], $(" div ").eq(1)[0], $(" div ").get()[1], $(" td ")[5] these are dom objects that can use the methods in dom, but can no longer use the methods in Jquery.
The following ways are correct:
The code is as follows:
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
3. How to obtain an item of the jQuery set
For a collection of retrieved elements, an item (specified by the index) can be retrieved using the eq or get(n) method or the index number. Note that eq returns the jquery object, while get(n) and the index return the dom element object. Only jquery's method can be used for jquery objects and dom's method can only be used for dom objects, such as to get the third
<
div
>
The contents of the element. There are two ways:
$( " div " ).eq(2).html(); // call jquery Method of an object
$( " div " ).get(2).innerHTML; // call dom Method attributes of
4. Realize set and get with function 1
This is true of many methods in Jquery, mainly including the following:
The code is as follows:
$( " #msg " ).html(); // return id for msg Element node of html The content.
$( " #msg " ).html( " <b>new content</b> " );
// Will" <b>new content</b> " As a html String of written id for msg Element node content , The page is displayed in bold new content
$( " #msg " ).text(); // return id for msg The text content of the element node.
$( " #msg " ).text( " <b>new content</b> " );
// Will" <b>new content</b> " Written as a plain text string id for msg Element node content , Page shows <b>new content</b>
$( " #msg " ).height(); // return id for msg The height of the element
$( " #msg " ).height( " 300 " ); // will id for msg The height of the element is set to 300
$( " #msg " ).width(); // return id for msg The width of the element
$( " #msg " ).width( " 300 " ); // will id for msg Set the width of the element of 300
$( " input " ).val( " ); // Returns the input box of the form value value
$( " input " ).val( " test " ); // To enter the form into the box value A value for test
$( " #msg " ).click(); // The trigger id for msg Click event for the element
$( " #msg " ).click(fn); // for id for msg Element click event add function
Same blur, focus, select, submit events can have two kinds of method call
5. Collection processing function
Instead of looping through the contents of the collection returned by jquery and processing each object individually, jquery has provided us with a convenient way to process collections.
There are two forms:
The code is as follows:
$( " p " ).each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]})
// Is the index respectively 0 . 1 . 2 the p Each element sets a different font color.
$( " tr " ).each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
// Achieve the table interlaced color effect www.222gs.com
$( " p " ).click(function(){alert($(this).html())})
// For each p The element has increased click Event, click on a p The element pops up its contents
6. Extend the functionality we need
The code is as follows:
$.extend({
min: function(a, b){return a < b?a:b; },
max: function(a, b){return a > b?a:b; }
}); // for jquery Extend the min,max Two methods
Using an extended method (called by "$. Method name") :
alert( " a=10,b=20,max= " +$.max(10,20)+ " ,min= " +$.min(10,20));
7. Support method linkage
Concatenation means that you can call a variety of different methods consecutively on an jquery object.
Such as:
The code is as follows:
$( " p " ).click(function(){alert($(this).html())})
.mouseover(function(){alert( ' mouse over event')})
.each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]});
8. Manipulate the style of the element
It mainly includes the following ways:
The code is as follows:
$( " #msg " ).css( " background " ); // Returns the background color of the element
$( " #msg " ).css( " background " , " #ccc " ) // Sets the element background to gray
$( " #msg " ).height(300); $( " #msg " ).width( " 200 " ); // Set wide high
$( " #msg " ).css({ color: " red " , background: " blue " });// Sets the style in the form of name-value pairs
$( " #msg " ).addClass( " select " ); // Adds a name to the element select the class
$( " #msg " ).removeClass( " select " ); // The delete element name is select the class
$( " #msg " ).toggleClass( " select " ); // If it does (does not), delete (add) the name is select the class
9. Perfect event processing function
Jquery has provided us with various event handling methods, and instead of writing events directly on the html element, we can add events directly to objects obtained through jquery.
Such as:
The code is as follows:
$( " #msg " ).click(function(){alert( " good " )}) // A click event is added to the element
$( " p " ).click(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]})
// for 3 A different p Element click events to set different processing
Several custom events in jQuery:
(1) hover(fn1,fn2) : A method that mimics a hover event (moving the mouse over and out of an object). When the mouse cursor moves over a matching element, the specified first function is triggered. The specified second function is triggered when the mouse pointer is moved out of the element.
The code is as follows:
// When the mouse is over a row in a table class Set to over When leaving, is out .
$( " tr " ).hover(function(){
$(this).addClass( " over " );
},
function(){
$(this).addClass( " out " );
});
(2) ready(fn): Bind 1 function to be executed when DOM is loaded and ready for query and manipulation.
The code is as follows:
$( " div " ).eq(2).html(); // call jquery Method of an object
$( " div " ).get(2).innerHTML; // call dom Method attributes of
(3) toggle(evenFn,oddFn): Switch the function to be called each time you click. If a matching element is clicked, the specified first function is fired, and the specified second function is fired when the same element is clicked again. Each subsequent click repeats the round-robin calls to both functions.
The code is as follows:
$( " div " ).eq(2).html(); // call jquery Method of an object
$( " div " ).get(2).innerHTML; // call dom Method attributes of
(4) trigger(eventtype): A certain type of event is triggered on each matching element.
Such as:
$(" p "). trigger (" click "); // The click event that triggers all p elements
(5) bind(eventtype,fn), unbind(eventtype): Binding and anti-binding of events
Remove the bound event from every 1 matched element.
Such as:
The code is as follows:
$( " div " ).eq(2).html(); // call jquery Method of an object
$( " div " ).get(2).innerHTML; // call dom Method attributes of
10. Several practical special effects
The toggle() and slidetoggle() methods provide state switching.
For example, the toggle() method includes the hide() and show() methods.
The slideToggle() method includes the slideDown() and slideUp methods.
11. Several useful jQuery methods
$.browser. Browser type: Detects browser type. Valid parameters: safari, opera, msie, mozilla. If ie: $.browser.isie is ie browser, true is returned.
$.es205EN (obj, fn) : Generic iteration function. Can be used to approximately iterate through objects and arrays (instead of loops).
Such as
The code is as follows:
$.each( [0,1,2], function(i, n){ alert( " Item # " + i + " : " + n ); });
Is equivalent to:
The code is as follows:
$( " div " ).eq(2).html(); // call jquery Method of an object
$( " div " ).get(2).innerHTML; // call dom Method attributes of
You can also process json data, such as
$( " div " ).eq(2).html(); // call jquery Method of an object
$( " div " ).get(2).innerHTML; // call dom Method attributes of
The result is:
Name:name, Value:John
Name:lang, Value:JS
$.extend (target,prop1,propN) : Extends an object with one or more other objects, returns the extended object. This is how jquery implements inheritance.
Such as:
$( " div " ).eq(2).html(); // call jquery Method of an object
$( " div " ).get(2).innerHTML; // call dom Method attributes of
You can have multiple parameters (merge multiple and return)
$.map (array, fn) : array map. Saves items from one array (after processing the conversion) to another new array, and returns the resulting new array.
Such as:
$( " div " ).eq(2).html(); // call jquery Method of an object
$( " div " ).get(2).innerHTML; // call dom Method attributes of
$.merge ([0,1,2], [2,3,4]) // returns [0,1,2,3,4]
$.trim (str) : Removes white space characters at both ends of a string.
For example: $.trim (" hello, how are you? "); // Return "hello,how are you? "
12. Resolve conflicts between custom methods or other class libraries and jQuery
Many times we define our own $(id) method to get an element, or other js libraries such as prototype also define the $method, which if placed at the same time will cause a variable method definition conflict. Jquery provides methods specifically to solve this problem.
jQuery. noConflict(); Method transfers control of the variable $to the library that implemented it in the first place or to the previously custom $method. Then, when applying Jquery, just change all the $to jQuery and change the reference object method $(" #msg ") to jQuery(" #msg ").
Such as:
The code is as follows:
jQuery.noConflict();
// Begin to use jQuery
jQuery( " div p " ).hide();
// Using other libraries $()
$( " content " ).style.display = ' none';jquery development process rich experience can improve the development skills, so you must pay attention to the accumulation of ordinary experience, I hope this article will help you learn.