jquery插件开发

最新推荐文章于 2018-06-14 10:56:26 发布

I_Am_Zou

最新推荐文章于 2018-06-14 10:56:26 发布

阅读量309

点赞数 1

分类专栏： web 文章标签： jquery jquery插件

本文链接：https://blog.csdn.net/I_Am_Zou/article/details/51833404

版权

web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一直在用jQuery，也用别人的jQuery插件，今天就简单说下如何进行jQuery的扩展吧！jquery分为类级别扩展和对象级别扩展。

类级别扩展 $.方法名=function（）{} 示例如下：

新建一个js文件命名为jqdemo.js

$.say=function () {
    alert("eat..");
}

新建一个js文件命名为extendjqdemo.js

$(document).ready(function () {
    $.say();
});

新建一个html文件命名为jqdemo.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-3.0.0.min.js"></script>
    <script type="text/javascript" src="jqdemo.js" ></script>
    <script type="text/javascript" src="extendjqdemo.js"></script>
</head>
<body>
    <div></div>
</body>
</html>

在浏览器运行结果为

对象级别扩展 $.fn.方法名=function（）{} 示例如下：

新建一个js文件命名为jqdemo.js

$.fn.say=function () {
    alert("eat..");
}

新建一个js文件命名为extendjqdemo.js

$(document).ready(function () {
    $("div").say();
});

新建一个html文件命名为jqdemo.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-3.0.0.min.js"></script>
    <script type="text/javascript" src="jqdemo.js" ></script>
    <script type="text/javascript" src="extendjqdemo.js"></script>
</head>
<body>
    <div></div>
</body>
</html>

在浏览器运行结果为