jQuery是js的一個非常優秀的庫，它大大簡化了js的很多操作，并且解決了js的大部分兼容性問題。甚至很多css兼容性問題，用jQuery寫都能解決。

這里是對象插件的封裝。當然，封裝插件很多，這里是最簡單的一種：

1、打兩個括號 ()()
2、在第二個括號里面加入"jQuery"

()(jQuery)

3、在第一個括號里面寫一個匿名函數，傳參是一個$

(function($){})(jQuery)

4、在function($){}寫：$.fn.插件名，如$.fn.tabs，這里的fn表示本插件是需要一個dom對象的插件
5、在剛才的$.fn.tabs后面“=”一個傳參的(有參)匿名函數

$.fn.tabs = function(options){ }

6、在剛才的匿名函數里面定義一個對象，對象的屬性就是插件需要傳遞的參數，默認值就是插件參數的默認值：

$.fn.tabs = function(options){var defaults = {currentStyle : "current",contentList : "content_list"} }

7、將傳遞的參數，繼承剛才定義的對象defaults

$.fn.tabs = function(options){var defaults = {currentStyle : "current",contentList : "content_list"}options = $.extend(defaults,options); }

8、將你寫的代碼，封裝起來，得到下面的代碼：

(function($){$.fn.tabs = function(options){var defaults = {currentStyle : "current",contentList : "content_list"}options = $.extend(defaults,options);$(this).mouseover(function(){$(this).addClass(options.currentStyle).siblings().removeClass(options.currentStyle);var _index = $(this).index();$("."+options.contentList).eq(_index).show().siblings().hide();})} })(jQuery)

9.調用插件

$("#nav_des li").tabs({currentStyle : "current456",contentList : "con" });

這里是一個tab選項卡插件，傳遞兩個參數，一個是tab的當前class樣式，一個是tab選項卡的類容容器class名。

轉載于:https://www.cnblogs.com/sintoyu/p/6148492.html

總結

以上是生活随笔為你收集整理的jQuery对象插件封装步骤的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。