0
点赞
收藏
分享

微信扫一扫

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,都是简单的控制台输出

JQuery自定义插件机制_jquery


<%@ 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>


单击前

JQuery自定义插件机制_方法_02



单击后

JQuery自定义插件机制_插件_03



$.extend(object):增强JQuery对象自身的功能



语法



$.extend(

    {

         自定义方法名1:function(参数列表){

                 方法体

         },

         自定义方法名2:function(参数列表){

                 方法体

         }

    }

)



例子



定义2个JQuery自身$的方法lingaolu和age,都是简单的控制台输出

JQuery自定义插件机制_JQuery_04


<%@ 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>


单击前

JQuery自定义插件机制_方法_05



单击后

JQuery自定义插件机制_JQuery_06



这里只是简单具体使用,后面要复杂功能需要的时候,可以自定义,或者公用的方法,可以自定义



举报

相关推荐

0 条评论