zoukankan      html  css  js  c++  java
  • jq封装插件

    $.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])
  • 相关阅读:
    beta冲刺——用户使用调查报告
    专业团队——Beta计划总结随笔
    专业团队测试随笔
    Beta冲刺--第十次随笔
    Beta冲刺--第九次随笔(md文档问题的解决)
    Beta冲刺--第八次随笔
    Beta冲刺--第七次随笔(仓库优化)
    Beta冲刺--第六次随笔(仓库修改)
    Beta冲刺--第五次随笔
    Beta冲刺--第四次随笔
  • 原文地址:https://www.cnblogs.com/lhl66/p/7712221.html
Copyright © 2011-2022 走看看