jQuery面向插件编程笔记

最新推荐文章于 2022-08-21 17:46:10 发布

_种花家的兔子

最新推荐文章于 2022-08-21 17:46:10 发布

阅读量291

点赞数

分类专栏： javascript 文章标签： jquery 编程插件对象体验

本文链接：https://blog.csdn.net/SuperDreamer007/article/details/77711631

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

插件初体验，用jQuery建立一个弹出框对象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
        <script type="text/javascript">
            (function(jQuery){
                $.alert=function(msg){
                    window.alert(msg);
                }
                $.fn.alert=function(msg){
                    window.alert(msg);
                }
            })(jQuery);
            $().ready(function(){
                $.alert("aaa");
                $("body").alert("bbb");
            });
        </script>
    </head>
    <body>
    </body>
</html>

自己制作一个循环回掉

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
        <script type="text/javascript">
            (function(jQuery){
                jQuery.fn.myeach=function(callback){
                    var array=$(this);
                    for(var i=0;i<array.length;i++)
                    {
                        callback.call($(array[i]),$(array[i]));
                    }
                }
                jQuery.myeach=function(obj,callback)
                {
                    var array=obj;
                    for(var i=0;i<array.length;i++)
                    {
                        callback.call($(array[i]),$(array[i]));
                    }
                }
            })(jQuery);
            $().ready(function(){
                $("p").myeach(function(){
                    alert($(this).text());
                });
                $.myeach($("p"),function(e){
                    alert($(e).text());
                });
            });

        </script>
    </head>
    <body>
        <p>sdfdsf</p>
            <p>sdfdsf</p>
                <p>sdfdsf</p>
    </body>
</html>

自己写一个标签的方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
        <script type="text/javascript">
            (function(jQuery){
                jQuery.fn.myextend=function(json)
                {
                    for(var i in json)
                    {
                        jQuery.fn[i]=json[i];
                    }
                }
                jQuery.myextend=function(json){
                    for(var i in json)
                    {
                        jQuery[i]=json[i];
                    }
                }
            })(jQuery);
            $().ready(function(){
                $("body").myextend({aa:function(){
                    alert("aa");
                }})
                $("body").aa();

            });

        </script>
    </head>
    <body>
    </body>
</html>

_种花家的兔子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery面向插件编程笔记

插件初体验，用jQuery建立一个弹出框对象<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.2.1.js" ></script> <script
复制链接

扫一扫