jquery插件拓展

最新推荐文章于 2020-08-03 22:40:32 发布

chasteSui

最新推荐文章于 2020-08-03 22:40:32 发布

阅读量229

点赞数

分类专栏：前端 jquery 文章标签： jquery js插件

本文链接：https://blog.csdn.net/ChasteBlessing/article/details/80196568

版权

前端同时被 2 个专栏收录

4 篇文章 1 订阅

订阅专栏

jquery

2 篇文章 0 订阅

订阅专栏

两种方式:

第一种 $.extend({}); 绑定到jquery上。使用方式与使用jquery的ajax/post等方法一样。$ .funcName();
第二种 $.fn.extend({}); 绑定到jquery dom元素上。使用方式通过DOM选择器$ (DOM).funcName();

示例代码：
将拓展方法保存到一个单独的JS文件。使用时在jquery后引用文件即可
jquery拓展文件：

$.extend({
    sayHello : function(){
        alert("Hello world");
    }
});

/*第二种    
 * 绑定到JQ的DON元素上.相当于jquery自带的attr/on/css/hover等方法的使用
 * 使用方法:  $(DOM).funcName();

 * 
 * */

$.fn.extend({
    sayHi : function(){
        alert("HI,我是绑定到JQUERY元素上的方法");
    }
})

HTML代码：
chastesui.js就是我的拓展文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>测试</title>
    </head>
    <body>
        <p>点击下面的按钮来显示今天是周几：</p>
        <button onclick="myFunOne()">第一种拓展方式</button>
        <p id="demo"></p>
        <script type="text/javascript" src="js/jquery-2.1.1.js" ></script>
        <script type="text/javascript" src="js/chastesui.js" ></script>
        <script>
            //第一种方式  直接调用
            function myFunOne(){
                $.sayHello();
            }
            //第二种方式 通过DOM元素调用;
            $("p").on('click',function(){
                $(this).sayHi();
            });
        </script>
    </body>
</html>

效果：
第一种
第一种绑定

第二种：
这里写图片描述

按照为对象添加键值对属性的方式可继续拓展自己的方法

chasteSui

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery插件拓展

两种方式:第一种.extend();绑定到jquery上。使用方式与使用jquery的ajax/post等方法一样。.extend();绑定到jquery上。使用方式与使用jquery的ajax/post等方法一样。.extend({}); 绑定到jquery上。使用方式与使用jquery的ajax/post等方法一样。.funcName();第二种.fn.extend();绑定到jqu...
复制链接

扫一扫

专栏目录