9. Complete event processing functions
Jquery has provided us with various event handling methods. We do not need to write events directly on the html element, but can directly add events to objects obtained through jquery.
like:
$("#msg").click(function(){alert("good")}) //Added a click event for the element
$(”p”).click(function(i){=['#f00′,'#0f0′,'#00f'][ i ]})
// Set different processing for three different p-element click events
Several custom events in jQuery:
(1)hover(fn1,fn2): A method that imitates hovering events (mouse moves to an object and moves out of this object). When the mouse moves over a matching element, the specified first function is triggered. When the mouse moves out this element, the specified second function is triggered.
// When the mouse is placed on a row in the table, set class to over and out when leaving.
$(”tr”).hover(function(){
$(this).addClass(”over”);
},
function(){
$(this).addClass(”out”);
});
(2) ready(fn): When the DOM is loaded, you can bind a function to be executed when querying and manipulating.
$(document).ready(function(){alert(”Load Success”)})
//The page loading 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 you click. If a matching element is clicked, the specified first function is triggered, and when the same element is clicked again, the specified second function is triggered. Each subsequent click repeats the sequence of calls to these two functions.
//Replace each click to add and delete the class named selected.
$(”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 reverse binding
Remove bound events from each matching element (add)
For example:
$("p").bind("click", function(){alert($(this).text());}); //Add a click event for each p element
$("p").unbind(); //Delete all events on all p elements
$("p").unbind("click") //Delete all click events on p elements
10. Several practical special effects functions
The toggle() and slidetoggle() methods provide state switching functions.
For example, the toggle() method includes hide() and show() methods.
The slideToggle() method includes slideDown() and slideUp methods.
11. Several useful jQuery methods
$.browser.Browser type: Detect browser type. Valid parameters: safari, opera, msie, mozilla. If you check whether ie:$., it will return true if it is ie.
$.each(obj, fn): a general iterative function. Can be used to iterate objects and arrays approximately (instead of loops).
like
$.each( [0,1,2], function(i, n){ alert( “Item #” + i + “: ” + n ); });
Equivalent to:
var tempArr=[0,1,2];
for(var i=0;i
alert(”Item #”+i+”: “+tempArr[ i ]);
}
It 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): Use one or more other objects to extend an object, returning the extended object. This is the inheritance method of jquery implementation.
like:
$.extend(settings, options);
//Merge settings and options, and return the merge result to settings, which is equivalent to options inheriting settings and saving the inherited results in settings.
var settings = $.extend({}, defaults, options);
//Merge defaults and options, and return the merge result to the setting without overwriting the default content.
There can be multiple parameters (merge multiple items and return)
$.map(array, fn): array mapping. Save the items in one array (after processing the conversion) to another new array and return the generated new array.
like:
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 in it.
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 to "hello, how are you? "
12. Resolve the conflict between custom methods or other class libraries and jQuery
Many times we define the $(id) method to get an element, or some other js class libraries such as prototype also define the $ method. If these contents are put together at the same time, it will cause variable method definition conflicts. Jquery provides methods specifically for solving this problem.
Use the(); method in jquery to transfer control of the variable $ to the first library that implements it or the previous custom $ method. After that, when applying Jquery, just change all $ into jQuery, such as the original reference object method $("#msg") to jQuery("#msg").
like:
();
// Start using jQuery
jQuery(”div p”).hide();
// Use other libraries $()
$(”content”). = ‘none';