自己動手手寫jQuery插件總結(jié)
jQuery是繼Prototype之后的又一款優(yōu)秀的JavaScript框架,深受廣大開發(fā)者熱愛,用戶甚廣。而jQuery一個很好的地方在 于用戶的自定義,即我們可以書寫自己的插件來完善jQuery的各項功能,定制自己所需要的功能,剔除冗余的代碼,在頁面加載時候可以有一定程度上的提 升。
面試之后,觸動很大,就是你要做的是一個了解十項還是精通一項的開發(fā)者?于是花了幾天時間苦逼的研讀jQuery源碼,了解了jQuery的事件機制、選擇器以及瀏覽器兼容性是如何做到的等。之后就一直想要書寫一款jQuery插件,來簡單實現(xiàn)自己的一個小功能。
如上圖所示,插件實現(xiàn)的功能是當鼠標位于某個鏈接其上時候,鏈接移動,鼠標離開之后,鏈接歸位。
Html核心部分即
<ul id="catagory">
<li><a href="#">星期一</a></li>
<li><a href="#">星期二</a></li>
<li><a href="#">星期三</a></li>
<li><a href="#">星期四</a></li>
</ul>
上面開始時候的功能如果我們單純只是使用jQuery來實現(xiàn)的話是這樣實施:
$(document).ready(function() {
$("#catagory a").hover(function() {
$(this).animate({ paddingLeft: "20px" }, { queue: false, duration: 500 });
}, function() {
$(this).animate({ paddingLeft: "0" }, { queue: true, duration: 500 });
});
});
現(xiàn)在,我們將功能封裝起來,寫成插件plugin.js,然后在HTML文件中外鏈進來:
(function ($) {
$.fn.extend({
//插件名稱 - paddingList
paddingList: function (options) {
//參數(shù)和默認值
var defaults = {
animatePadding: 10,
hoverColor: "Black"
};
var options = $.extend(defaults, options);
return this.each(function () {
var o = options;
//將元素集合賦給變量 本例中是 ul對象
var obj = $(this);
//得到ul中的a對象
var items = $("li a", obj);
//添加hover()事件到a
items.hover(function () {
$(this).css("color", o.hoverColor);
//queue false表示不添加到動畫隊列中
$(this).animate({ paddingLeft: o.animatePadding }, { queue: false, duration: 300 });
}, function () {
$(this).css("color", "");
$(this).animate({ paddingLeft: "0" }, { queue: true, duration: 300 });
});
});
}
});
})(jQuery);
當然,外鏈plugin之前還需要src最初的jquery庫文件。調(diào)用插件的方式如下:
$(document).ready(function() {
$("#catagory").paddingList({ animatePadding: 30, hoverColor: "Red" });
});
- jquery ztree實現(xiàn)下拉樹形框使用到了json數(shù)據(jù)
- jquery.simple.tree插件 更簡單,兼容性更好的無限樹插件
- 推薦8款jQuery輕量級樹形Tree插件
- 無限樹Jquery插件zTree的常用功能特性總結(jié)
- 一個基于jQuery的樹型插件(OrangeTree)使用介紹
- Jquery 實現(xiàn)彈出層插件
- 限制上傳文件大小和格式的jQuery插件實例
- 推薦一款jQuery插件模板
- zTree插件之單選下拉菜單實例代碼
- zTree插件之多選下拉菜單實例代碼
- jquery zTree異步加載簡單實例分享
- js樹插件zTree獲取所有選中節(jié)點數(shù)據(jù)的方法
相關(guān)文章
jquery popupDialog 使用 加載jsp頁面的方法
下面小編就為大家?guī)硪黄猨query popupDialog 使用 加載jsp頁面的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10jQuery中$.grep() 過濾函數(shù) 數(shù)組過濾
這篇文章主要介紹了jQuery中$.grep() 過濾函數(shù) 數(shù)組過濾的相關(guān)資料,需非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2016-11-11JQuery.uploadify 上傳文件插件的使用詳解 for ASP.NET
今天下午整理文件上傳的例子,感覺收集到的例子都很不人性話,后來找到一個還可以的,本來想改成類似于騰訊QQ相冊那種方式,仔細看了一下是Flash的, 而且那個極速上傳插件也不知道用什么做的?問了一下,說是什么cgi. 搞得一頭霧水2010-01-01jQuery控制DIV層實現(xiàn)由大到小,由遠及近動畫變化效果
這篇文章主要介紹了jQuery控制DIV層實現(xiàn)由大到小,由遠及近動畫變化效果,涉及jQuery基于animate方法操作頁面元素實現(xiàn)動畫漸變效果的相關(guān)技巧,需要的朋友可以參考下2015-10-10jQuery動態(tài)創(chuàng)建元素以及追加節(jié)點的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨Query動態(tài)創(chuàng)建元素以及追加節(jié)點的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10