jq封装插件

Posted 2020-10-11 鱼樱、、

$.extend()拓展方法：

$(function(){
    $.extend({
        money:function（）{
            alert（"我要努力赚钱"）
           }，
        money:function（）{
            alert（"我要努力赚钱"）
           }，
    })
})

$.money()----->就可以调用；
----------------------------------------------------
$.fn.extend()jq对象的拓展方法：

$(function(){
    $.fn.extend({
        color:function(){
            $(this).css("color","red");
        },
        bg:function(){
            $(this).css("background","red");
        }
    })

})

$("div").color();------>即可调用
--------------------------------------------------------
插件名字：jQuery.插件名.js，以免和其他.js文件或者库冲突
局部对象附加在jQuery.fn对象上，全局函数附加在jQuery上；
插件内部this指向是当前的局部对象；
可以通过this.each()来遍历所有元素；
所有方法或插件，必须用分号结尾，避免出现问题（建议这么做）
插件应该返回的是jQuery对象，以保证可链式连缀
避免插件内部使用$，如果要使用，请传递jQuery进去；

如：jQuery.nav.js
；
(function($){
    $.fn.extend({
        nav:function(){
            $(this).find(".nav").css({
                listStyle:"none",
                margin:0,
                padding:0,
                display:"none",
                color:"red"        
            });
            $(this).find(",nav").parent.hover(function(){
                $(this).find(".nav").slidDown("normal");
            },function(){
                $(this).find(".nav").stop().slidUp("normal");
            })
            return this;  ----->当前jq对象
        }
    })

})(jQuery)

结构：
<ul class=""list>
    <li>一级
        <ul class="nav">
            <li>首页</li>
            <li>首页</li>
            <li>首页</li>
            <li>首页</li>
        </ul>
    </li>
    <li>一级
        <ul class=""nav>
            <li>首页</li>
            <li>首页</li>
            <li>首页</li>
            <li>首页</li>
        </ul>
    </li>
    <li>一级
        <ul class="nav">
            <li>首页</li>
            <li>首页</li>
            <li>首页</li>
            <li>首页</li>
        </ul>
    </li>
    
</ul>

页面引用插件---->写在引用jq的下面，
$(".list").nav();

以下为常用的一些技巧：
cache:fale  ---->$.ajax不设置缓存   //jq ajax 属性

var data = $("from").serialize();----->获取from表单整个需要发送参数。 
console.log(data);
data:data; 
success:function(){}return false 
$.getScript(url,[callback]) 
$.getJSON(url,[callback])