Summary of common jQuery development and usage techniques_jquery

element. There are the following two methods:
$("div").eq(2).html(); //Call the jquery object method
$("div").get(2).innerHTML; / /Call dom method attributes

4. The same function implements set and get
This is true for many methods in Jquery, mainly including the following:
$(" #msg").html(); //Return the html content of the element node with id msg.
$("#msg").html("new content");
//Write "new content" as an html string In the content of the element node with the id of msg, the page displays bold new content

$("#msg").text(); //Return the text content of the element node with the id of msg.
$("#msg").text("new content");
//Write "new content" as a normal text string Enter the element node content with id msg, and the page displays new content

$("#msg").height(); //Return the height of the element with id msg
$("#msg").height("300"); //Set the height of the element with id msg to 300
$("#msg").width(); //Return id The width of the element whose id is msg
$("#msg").width("300"); //Set the width of the element whose id is msg to 300

$("input"). val("); //Return the value of the form input box
$("input").val("test"); //Set the value of the form input box to test

$ ("#msg").click(); //Trigger the click event for the element with id msg
$("#msg").click(fn); //Click event for the element with id msg Adding functions
Similarly, blur, focus, select, and submit events can have two calling methods

5. Collection processing function
For the collection content returned by jquery, we do not need to do it ourselves Loop through and process each object separately. jquery has provided us with a very convenient method to process collections.
includes two forms:
$("p").each(function(i)). {this.style.color=['#f00','#0f0','#00f'][ i ]})
//Set different values ​​for the p elements with indexes 0, 1, and 2 respectively Font color.

$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
//Achieve the interlaced color changing effect of the table

$("p").click(function(){alert($(this).html())})
//For each p A click event has been added to the element. Clicking on a p element will pop up its content

6. Extend the functions we need
$.extend({
min: function( a, b){return a < b?a:b; },
max: function(a, b){return a > b?a:b; }
}); //for jquery Extended the min and max methods
Use the extended method (called through "$.method name"):
alert("a=10,b=20,max=" $.max(10,20 ) ",min=" $.min(10,20));

7. Support method concatenation
The so-called concatenation means that you can continuously call various methods on a jquery object. Different methods.
For example:
$("p").click(function(){alert($(this).html())})
.mouseover(function(){alert('mouse over event ')})
.each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]});

8. Manipulating the style of elements
mainly includes the following methods:
$("#msg").css("background"); //Return the background color of the element
$ ("#msg").css("background","#ccc") //Set the background of the element to gray
$("#msg").height(300); $("#msg"). width("200"); //Set width and height
$("#msg").css({ color: "red", background: "blue" });//Set in the form of name-value pairs Define the style
$("#msg").addClass("select"); //Add a class named select to the element
$("#msg").removeClass("select"); // Delete the class with the element name select
$("#msg").toggleClass("select"); //If it exists (does not exist), delete (add) the class with the name select

9. Complete event processing function
Jquery has provided us with various event processing methods. We do not need to write events directly on html elements, but can directly add events to objects obtained through jquery.
For example:
$("#msg").click(function(){alert("good")}) //Added a click event to the element
$("p").click (function(i){this.style.color=['#f00','#0f0','#00f'][ i ]})
//Set three different p element click events respectively Different handling
Several custom events in jQuery:
(1) hover(fn1, fn2): A method that imitates hover events (mouse moves over an object and out of the object). When the mouse moves over a matching element, the first specified function will be triggered. When the mouse moves out of this element, the specified second function will be triggered.
//When the mouse is placed on a row of the table, set the class to over and set it to out when leaving.
$("tr").hover(function(){
$(this).addClass("over");
},
function(){
$(this) .addClass("out");
});
(2) ready(fn): Bind a function to be executed when the DOM is loaded and ready for query and manipulation.
$(document).ready(function(){alert("Load Success")})
//When the page is loaded, it prompts "Load Success", which is equivalent to the onload event. Equivalent to $(fn)
(3) toggle(evenFn,oddFn): Switch the function to be called every time it is clicked. If a matching element is clicked, the first function specified is triggered, and when the same element is clicked again, the second function specified is triggered. Each subsequent click repeats the call to these two functions in turn.
//Rotate adding and deleting the class named selected every time you click.
$("p").toggle(function(){
$(this).addClass("selected");
},function(){
$(this).removeClass( "selected");
});
(4) trigger(eventtype): Trigger a certain type of event on each matching element.
For example:
$("p").trigger("click"); //Trigger the click event of all p elements
(5) bind(eventtype,fn), unbind(eventtype): event Binding and unbinding
removes (adds) the bound event from each matching element.
For example:
$("p").bind("click", function(){alert($(this).text());}); //Add click for each p element Event
$("p").unbind(); //Delete all events on all p elements
$("p").unbind("click") //Delete all single events on all p elements Click event

10. Several practical special effects functions
Among them, the toggle() and slidetoggle() methods provide state switching functions.
For example, the toggle() method includes hide() and show() methods.
The slideToggle() method includes the slideDown() and slideUp methods.

11. Several useful jQuery methods
$.browser. Browser type: Detect browser type. Valid parameters: safari, opera, msie, mozilla. For example, if you check whether it is IE: $.browser.isie, if it is an IE browser, it will return true.
$.each(obj, fn): General iteration function. Can be used to iterate over objects and arrays approximately (instead of looping).
For example,
$.each( [0,1,2], function(i, n){ alert( "Item #" i ": " n ); });
is equivalent to:
var tempArr=[0,1,2];
for(var i=0;ialert("Item #" i ": " tempArr[ i ]) ;
}
can also process json data, such as
$.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " i ", Value: " n ); });
The result is:
Name:name, Value:John
Name:lang, Value:JS
$.extend(target,prop1,propN) : Extend an object with one or more other objects and return the extended object. This is the inheritance method implemented by jquery.
For example:
$.extend(settings, options);
//Merge settings and options, and return the merged result to settings, which is equivalent to options inheriting setting and saving the inherited result in setting.
var settings = $.extend({}, defaults, options);
//Merge defaults and options, and return the merged result to the setting without overwriting the default content.
Can have multiple parameters (combine multiple parameters and return)
$.map(array, fn): array mapping. Saves the items in an array (after processing the transformation) into a new array and returns the resulting new array.
For example:
var tempArr=$.map( [0,1,2], function(i){ return i 4; });
The content of tempArr is: [4,5,6]
var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i 1 : null; });
The content of tempArr is: [2,3]
$.merge(arr1,arr2): Merge two arrays and delete duplicate items.
For example: $.merge( [0,1,2], [2,3,4] ) //Return [0,1,2,3,4]
$.trim(str): Delete Whitespace characters at both ends of the string.
For example: $.trim(" hello, how are you? "); //Return "hello, how are you? "

12. Solve the problem with custom methods or other class libraries Conflicts with jQuery
Many times we define the $(id) method ourselves to get an element, or some other js libraries such as prototype also define the $ method. If we put these contents together at the same time, Will cause variable method definition conflict, Jquery provides a special method to solve this problem.
Use the jQuery.noConflict(); method in jquery to transfer control of the variable $ to the first library that implements it or the previously customized $ method. When using Jquery later, just replace all $ with jQuery. For example, the original referenced object method $("#msg") is changed to jQuery("#msg").
For example:
jQuery.noConflict();
// Start using jQuery
jQuery("div p").hide();
// Use $() from other libraries
$("content").style.display = 'none';