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