码迷,mamicode.com
首页 > 其他好文 > 详细

jq封装插件

时间:2017-10-22 23:38:11      阅读:287      评论:0      收藏:0      [点我收藏+]

标签:技巧   serialize   splay   $.ajax   back   get   使用   ajax   hover   

$.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])

 

jq封装插件

标签:技巧   serialize   splay   $.ajax   back   get   使用   ajax   hover   

原文地址:http://www.cnblogs.com/lhl66/p/7712221.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!