內容轉載自?http://www.css88.com/archives/4821

擴展jQuery插件和方法的作用是非常強大的，它可以節省大量開發時間。這篇文章將概述jQuery插件開發的基本知識，最佳做法和常見的陷阱。

入門

編寫一個jQuery插件開始于給jQuery.fn加入??新的功能屬性，此處添加的對象屬性的名稱就是你插件的名稱

jQuery.fn.myPlugin = function(){//你自己的插件代碼 };

用戶非常喜歡的$符號哪里去了？ 它仍然存在，但是，為了避免和其他JavaScript庫沖突，我們最好將jQuery傳遞給一個自我執行的封閉程序，jQuery在此程序中映射為$符號，這樣可以避免$號被其他庫覆寫。

(function ($) {$.fn.m??yPlugin = function () {//你自己的插件代碼 }; })(jQuery);

在這個封閉程序中，我們可以無限制的使用$符號來表示jQuery函數。

環境

現在，我們可以開始編寫實際的插件代碼。 但是，在這之前，我們必須得對插件所處的環境有個概念。?在插件的范圍里， this關鍵字代表了這個插件將要執行的jQuery對象，?這里容易產生一個普遍的誤區，因為在其他包含callback的jQuery函數中，this關鍵字代表了原生的DOM元素。這常常會導致開發者誤將this關鍵字無謂的包在jQuery中，如下所示。

(function ($) {$.fn.m??yPlugin = function () {//此處沒有必要將this包在$號中如$(this)，因為this已經是一個jQuery對象。//$(this)等同于 $($('#element'));this.fadeIn('normal', function () {//此處callback函數中this關鍵字代表一個DOM元素 });}; })(jQuery);$('#element').myPlugin();

現在，我們理解了jQuery插件的基礎知識，讓我們寫一個插件，做一些事情。

(function ($) {$.fn.m??axHeight = function () {var max = 0;this.each(function () {max = Math.max(max, $(this).height());});return max;}; })(jQuery);var tallest = $('div').maxHeight(); //返回高度最大的div元素的高度

在公司的security project(Umbraco)， Search功能使用了APIController, 然后寫了一個JQuery 插件 Search來填充search result page

Search result page HTML 代碼

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage<SearchResults> @{Layout = "_InnerLayout.cshtml";Html.RequiresJs("~/scripts/view.search.js", 2); } @Model.Content.LocalisedContent.Body<section id="searchListing" class="row search"><div id="resultsArea" class="search-results"><div id="NoResultsMessage" style="display:none;"><p class="results-title">@Html.Raw(Umbraco.GetDictionaryValue("NoResultsFor")) '<strong class="search-term"></strong>'</p></div><div id="HasResultsMessage" style="display:none;"><p class="results-title">@Html.Raw(Umbraco.GetDictionaryValue("SearchResultsFor")) '<strong class="search-term"></strong>'</p></div><div class="results" id="SearchResultsContainer"><article class="row"><a href="#"><div><h2></h2><p></p><p class="link">@Html.Raw(Umbraco.GetDictionaryValue("ReadMore")) &#8250;</p></div></a></article></div><ul class="pagination"><li><a href="#" class="prev"><i class="gi icon-arrow"></i></a></li><li class="page"><a href="#"></a></li><li><a href="#" class="next"><i class="gi icon-arrow"></i></a></li></ul></div> </section>

用JQuery 寫的插件Search 如下 ? (view.search.js)

(function ($) {$.fn.Search = function (options) {return this.each(function () {var search = $(this);search.resultsArea = search.find("#resultsArea");search.noResultsMessage = search.resultsArea.find("#NoResultsMessage");search.hasResultsMessage = search.resultsArea.find("#HasResultsMessage");search.resultsContainer = search.resultsArea.find("#SearchResultsContainer");search.searchResultTemplate = search.resultsContainer.find("article").clone();search.queryField = $("input[name='search']");search.searchTermLabel = $(".search-term");search.oldTerm = undefined;search.term = search.queryField.val();// Paging elementssearch.paginationWrapper = search.resultsArea.find('ul.pagination');search.pageTemplate = search.paginationWrapper.find('.page').clone();search.pagePrevious = search.paginationWrapper.find('.prev');search.pageNext = search.paginationWrapper.find('.next');// Page trackingsearch.pageSize = 5;search.pageNumber = 1;search.totalPages = 0;// Sets up pagination for search results.search.paginate = function (data) {/* PagedResults looks like this:data {items,pageNumber,pageSize,totalItems,totalPages}*/search.totalPages = data.totalPages;search.paginationWrapper.find('.page').remove();if (search.totalPages > 1) {search.pagePrevious.toggle(data.pageNumber > 1);search.pageNext.toggle(data.pageNumber < search.totalPages);for (i = 1; i < search.totalPages + 1; i++) {var page = search.pageTemplate.clone();var link = page.find('a');if (i == data.pageNumber)page.addClass('active');page.data('page', i);link.text(i);search.pageNext.parent().before(page).before('\n\r');}search.paginationWrapper.show(0);} else {search.paginationWrapper.hide(0);}}search.previous = function (evt) {return search.goToPage(evt, search.pageNumber - 1);}search.next = function (evt) {return search.goToPage(evt, search.pageNumber + 1);}search.goToPage = function (evt, pageNumber) {search.pageNumber = pageNumber || $(this).data('page');if (search.pageNumber > search.totalPages) search.pageNumber = search.totalPages - 1;if (search.pageNumber < 1) search.pageNumber = 1;search.search();return false;}// filter change handlersearch.handleQuery = function (evt) {search.term = $(this).val();if (search.oldTerm != search.term) {search.oldTerm = search.term;search.search();}return false;}search.search = function () {search.resultsArea.addClass("loading");$.ajax({type: "GET",url: "/umbraco/api/SearchApi/GetSearchResults/",dataType: "json",data: {filter: search.term,pageNumber: search.pageNumber,pageSize: search.pageSize},success: function (data) {search.searchTermLabel.text(search.term);search.noResultsMessage.hide();search.hasResultsMessage.hide();search.paginate(data);search.resultsContainer.empty();if (!data.items || data.items.length == 0) {search.noResultsMessage.show();}else {// Binding search result to UIfor (var i = 0; i < data.items.length; i++) {var result = data.items[i];var resultTemplate = search.searchResultTemplate.clone();_populateContent(result, resultTemplate);search.resultsContainer.append(resultTemplate);}search.hasResultsMessage.show();}},complete: function () {search.searchTermLabel.text(search.term);search.resultsArea.removeClass("loading");}});};_populateContent = function (result, template) {var titleElem = $(template.find("h2"));var linkElem = $(template.find("a"));linkElem.attr("href", result.url);titleElem.html(result.title);template.find("p").first().html(result.content);};search.queryField.on("keyup", search.handleQuery);// Setup pagination triggers.search.pagePrevious.on("click", search.previous);search.pageNext.on("click", search.next);// Bind to all future page clicks.search.paginationWrapper.on('click', 'li.page', search.goToPage);search.search();});} }(jQuery));$(function () {$('section.search').Search(); });

?

?

?

?

轉載于:https://www.cnblogs.com/wphl-27/p/5828503.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的JQuery学习使用笔记 -- JQuery插件开发的全部內容，希望文章能夠幫你解決所遇到的問題。

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