I. Introduction
In jQuery, there are many methods can be used directly defined, such as:
: For replacing the label replaceWith replaceAll method and the original jQuery ;
: Used to remove the tag in jQuery empty and remove methods ;
The method for binding a series of events: bind jQuery events
: For wrapping the label in jQuery wrap, wrapAll, wrapInner, unwrap method
For inserting HTML elements: the jQuery insertAfter and after the method , the jQuery and append the method appendTo
See the article using the example above.
So when we want to use a jQuery function not defined, it can create a new way to use this extension mechanism function, then you can call the method as defined directly as jQuery to call them.
Extended following two methods:
二.jQuery.extend(object)
This method is an extension of the jQuery object itself, is mainly used to extend jQuery global functions, features have been extended it out of the direct method is invoked when $ Function name (parameter) to, the following explains how to use this method.
Antecedent : jQuery and in no way compare the size of two numbers, so when we want to achieve this function, you can extend a jQuery global function in the following code:
Line 10 : direct call to extend the method used jQuery, the parameter list of the method parameters are passed in a JavaScript object created by the initializer braces wrapped.
Line 11, 14 : two defined function when creating the object: min (a, b), and max (a, b), respectively, compare the role of the incoming magnitude of a and b (a JavaScript object created initializer see blog way: JavaScript way to create objects ), then min and max are already two of the method can be called directly.
19,20 row : $ call directly with min and max, can pass parameters to compare the size of two numbers, the results are as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>show([s,[e],[fn]])/hide([s,[e],[fn]]) </title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<script>
jQuery.extend({
min:function(a,b){
return a>b?b:a;
},
max:function(a,b){
return a<b?b:a;
}
});
console.log($.min(1,2));
console.log($.max(1,2));
</script>
</body>
</html>
三.jQuery.fn.extend(object)
Using this method extends the jQuery element set is mainly used to extend jQuery plugin that simply is need to create a jQuery object when called before calling the corresponding function with jQuery object, the following explain how to use.
Antecedent : in jQuery, there is no way to get the value form form check box is selected in the elements, then we can extend a way to achieve this function, because the objects to be retrieved at this time should be specified, so it should be jQuery.fn.extend (object) to be expanded, as follows:
Line 19 : Using jQuery calls fn, fn is the abbreviation function, and then extend the method to call, and then enter an anonymous object in the parameter list, the object contains the function values you want to achieve the function of ().
Line 22 : Use this keyword here, because it is acquiring the check box item is selected, so that time will be type of input tag of type checkbox to call this method, so in this case, this refers to is dom array name of the object tag hobby four input thereof. So when we use each () method to the array is traversed in the parameter list traversal function is an anonymous function.
Line 23 : In the anonymous function, the operation is carried out to determine the array of each check box is selected, we can see that there has emerged a this, but this here is different and on the line, because it which is a parameter list of the position each method, so that this refers to an object that dom traversed the current element in the array. In this call can be checked attribute returns whether the check box is selected.
Line 24 : if it is determined that the check box is selected, then the value of the object value is spliced to the string result.
Line 27 : Since at this time the result is a string, '' at the beginning, so the call here with the string substring () method starts from the interception of the second character of the string, is that we get to be output in the form of a.
Line 29 : Since at this time may be a box are not selected, so the result string may be empty, so the time for return where a ternary operator judgment.
Method extends Well, the next step is to call:
Line 33, 34 : calling a function defined here, using the first name attribute selector acquires the input value hobby tag function, then the call extension method jQuery object values () Returns the value of the print obtained on the console .
Line 15 : Finally, call the function onclick added to the label in the form submission.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>show([s,[e],[fn]])/hide([s,[e],[fn]]) </title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<form>
<input type="checkbox" name="hobby" value="1"/>篮球
<input type="checkbox" name="hobby" value="2"/>足球
<input type="checkbox" name="hobby" value="3"/>乒乓球
<input type="checkbox" name="hobby" value="4"/>橄榄球
<input type="button" value="选中项的值" οnclick="t()"/>
</form>
<script>
jQuery.fn.extend({
values:function(){
var result = "";
this.each(function(){
if(this.checked){
result = result+","+this.value;
}
})
result = result.substring(1);
return result==""?"":result;
}
})
function t(){
console.log($("[name='hobby']").values());
}
</script>
</body>
</html>Results are as follows:
