jquery編寫外掛基本寫法
阿新 • • 發佈：2019-02-07
1.建立一個html檔案和js檔案，並將js檔案連線到HTML檔案了，還有將jquery包匯入html檔案中
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script> <script type="text/javascript" src="js/center-1.2.js" ></script> <style> *{margin: 0;} </style> </head> <body> <div id="box"> </div> <script> $("#box").center({ }) </script>
2.通過jquery中的$.fn對外暴露方法，要注意開頭一定要加分號“；”
;(function($){
$.fn.center = function(options){
})3.利用$.extend合併預設引數(defaults)和形參(options)，在extend裡後面的形參改變前面的引數，如果沒有後面的形參就直接繼承
;(function($){ //物件級別 $.fn.center = function(options){ var defaults = { "position":"absolute", "background":"red", "width":100, "height":100 } var options = $.extend(defaults,options); })
4.實現邏輯功能，這裡的this是指的是jq的盒子
;(function($){ //物件級別 $.fn.center = function(options){ var defaults = { "position":"absolute", "background":"red", "width":100, "height":100 } var options = $.extend(defaults,options); this.each(function(){ //功能實現邏輯 var _this = $(this) })
5.實現盒子的水平垂直居中的公式
var _vH = ($(window).height()-options.height)/2
var _vW = ($(window).width()-options.width)/26.物件級別開發外掛模板
;(function($){
//物件級別
$.fn.center = function(options){
var defaults = {
"position":"absolute",
"background":"red",
"width":100,
"height":100
}
var options = $.extend(defaults,options);
this.each(function(){
//功能實現邏輯
var _this = $(this)
var _vH = ($(window).height()-options.height)/2
var _vW = ($(window).width()-options.width)/2
_this.css({
"background":options.background,
"position":options.position,
"width":options.width,
"height":options.height,
"left":_vW,
"top":_vH
})
})
return this最後一點要return this實現連綴。這裡的this是jq的this物件