返回顶部下载帮助
网站模板
模板颜色分类:
当前位置: javascript学习 >

怎么写jQuery插件扩展

2020-04-15 文章标签: jQuery 插件 教程 浏览次数:

我们继续讲解jquery插件设计原理,方便我们自己写扩展

jquery教程

jQuery插件设计原理,比如用jquery扩展写一个比较数字大小的功能,返回最大值或者最小值

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
jQuery.extend({    //扩展jQuery的公共函数
    minValue : function(a,b){     //比较两个参数值,返回最小值
        return a<b?a:b;
    },
    maxValue : function(a,b){     //比较两个参数值,返回最大值
        return a<b?b:a;
    }
})
$(function(){
    $("input").click(function(){
        var a = prompt("请输入一个数值?");
        var b = prompt("请再输入一个数值?");
        var c = jQuery.minValue(a,b);
        var d = jQuery.maxValue(a,b);
        alert("你输入的最大值是:" + d + "\n你输入的最小值是:" + c);
    });
})
</script>
<style type="text/css">
</style>
</head>
<body>
<input type="button" value="jQuery插件扩展测试" />
</html>

demo2写一个jquery扩展遍历标签

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
var a = {    //对象直接量
    name : "zhu",
    pass : 123
}
var b = {    //对象直接量
    name : "wang",
    pass : 456,
    age : 1
}
var c = jQuery.extend(a,b);     //合并对象a和b
$(function(){
    for(var name in c){     //遍历对象c,显示合并后的对象c的具体属性和值
        $("div").html($("div").html()  + "<br />"+ name + ":" +  c[name]);
    }
})
</script>
<style type="text/css">
</style>
</head>
<body>
<div></div>
</html>


关于我们 - 联系我们 - 广告服务 - 友情链接 - 版权声明 - 手机版

免责声明:站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!版权归原创者所有,如果侵犯了您的权益,请通知我们,我们会及时删除侵权内容。