JQuery自定义插件机制
$.fn.extend(object)：增强通过JQuery获取的对象的功能语法
例子
$.extend(object)：增强JQuery对象自身的功能
语法
例子
JQuery除了可以通过$调用自身带有的插件方法之外，还可以自定义插件方法
[*]$.fn.extend(object)：增强通过JQuery获取的对象的功能
[*]$.extend(object)：增强JQuery对象自身的功能
$.fn.extend(object)：增强通过JQuery获取的对象的功能
语法
$.fn.extend(
{
自定义方法名1：function(参数列表){
方法体
}，
自定义方法名2：function(参数列表){
方法体
}
}
)
例子
定义2个通过JQuery获取的对象的方法lingaolu和age,都是简单的控制台输出
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>JQuery自定义插件</title>
<script src="js/jquery-3.3.1.min.js"></script>
<style>
input{
width:300px;
height: 50px;
}
</style>
<script>
$.fn.extend({
lingaolu:function () {
console.log("林大帅")
},
age:function (age) {
console.log("林大帅年龄为："+age)
}
});
$(function () {
$("#id1").click(function () {
var $id2 = $("#id2");
$id2.lingaolu();
$id2.age(27);
});
});
</script>
</head>
<body>
<input id="id1" type="button" value="单击我触发按钮2调用自定义方法输出" style="background-color: burlywood"><br><br><br>
<input id="id2" type="button" value="按钮2" style="background-color: burlywood"><br><br><br>
</body>
</html>
单击前
单击后
$.extend(object)：增强JQuery对象自身的功能
语法
$.extend(
{
自定义方法名1：function(参数列表){
方法体
}，
自定义方法名2：function(参数列表){
方法体
}
}
)
例子
定义2个JQuery自身$的方法lingaolu和age,都是简单的控制台输出
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>JQuery自定义插件</title>
<script src="js/jquery-3.3.1.min.js"></script>
<style>
#id1{
width: 200px;
height: 50px;
}
</style>
<script>
$.extend({
lingaolu:function () {
console.log("林大帅")
},
age:function (age) {
console.log("林大帅年龄为："+age)
}
});
$(function () {
$("#id1").click(function () {
$.lingaolu();
$.age(27);
});
});
</script>
</head>
<body>
<input id="id1" type="button" value="单击调用自定义方法输出" style="background-color: burlywood"><br><br><br>
</body>
</html>
单击前
单击后
这里只是简单具体使用，后面要复杂功能需要的时候，可以自定义，或者公用的方法，可以自定义
文档来源：51CTO技术博客https://blog.51cto.com/u_13868384/3060760
页:
[1]