1. 概述 jquery允許拓展自定義的方法， 綁定到$.fn對象上， 編寫一個jQuery插件的原則： 2. example 3. 使用過濾 針對特定元素的拓展 類似submit方法只能作用在form上，我們也可以自定義針對指定dom元素使用的方法。 jquery的filter這時派上了用場。 e ...
1. 概述
jquery允許拓展自定義的方法， 綁定到$.fn對象上，
編寫一個jQuery插件的原則：
- 給
$.fn綁定函數，實現插件的代碼邏輯； - 插件函數最後要
return this;以支持鏈式調用； - 插件函數要有預設值，綁定在
$.fn.<pluginName>.defaults上； - 用戶在調用時可傳入設定值以便覆蓋預設值。
2. example
<html>
<body>
<div id="test-highlight1">
<p>什麼是<span>jQuery</span></p>
<p><span>jQuery</span>是目前最流行的<span>JavaScript</span>庫。</p>
</div>
<script src="jquery-3.1.0.js"></script>
<script type="text/javascript">
$(function(){
'use strict';
(function(){
$.fn.highlight = function (options) {
var opts = $.extend({}, $.fn.highlight.defaults, options);
// this已綁定為當前jQuery對象:
this.css('backgroundColor', opts.backgroundColor).css('color', opts.color);
return this;
}
$.fn.highlight.defaults = {
'backgroundColor' : '#d85030',
'color' : '#fff8de'
};
$.fn.highlight.defaults.backgroundColor = '#659f13';
$.fn.highlight.defaults.color = '#f2fae3';
$("#test-highlight1 span").highlight();
$('#test-highlight1 span').highlight({
color : '#dd1144'
});
})();
});
</script>
</body>
</html>
3. 使用過濾 針對特定元素的拓展
類似submit方法只能作用在form上，我們也可以自定義針對指定dom元素使用的方法。
jquery的filter這時派上了用場。
example
<html>
<body>
<div id="test-external">
<p>如何學習<a href="http://jquery.com">jQuery</a>？</p>
<p>首先，你要學習<a href="/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000">JavaScript</a>，並瞭解基本的<a href="https://developer.mozilla.org/en-US/docs/Web/HTML">HTML</a>。</p>
</div>
<script src="jquery-3.1.0.js"></script>
<script type="text/javascript">
$(function(){
'use strict';
(function(){
$.fn.external = function () {
return this.filter('a').each(function(){
var a = $(this);
var url = a.attr('href');
if(url && (url.indexOf('http://')===0 || url.indexOf('https://')===0)){
a.attr('href', '#0')
.removeAttr('target')
.append('<i class="uk-icon-external-link"></i>')
.click(function(){
if(confirm("確認跳轉到"+url)){
window.open(url);
}
});
}
});
}
$('#test-external a').external();
})();
});
</script>
</body>
</html>
