[jQuery] 自訂function 學習資源
蒐集學習過程中覺得不錯的資訊，以供參考：
首先要先懂這個：
1. jQuery Function Namespacing in Plain English
接下來才是正題：
1. 5 Different Ways to Declare Functions in jQuery
2. [JQuery Plugin] 自訂jQuery plugin 教學
3. [jQuery] 自製 jQuery Plugin - Part 1
4. [jQuery] 自製 jQuery Plugin - Part 2
5. 邊做邊學 jQuery 系列 13- 打造自己的jQuery Plugin
7. 在 jQuery 自訂函式中實作 Optional Parameters
當然，最重要的還是 官方網頁 囉 ^^
再來就是由 Google 所主導的 Google Hosted Libraries 進去就知道他是做什麼的了，很好用喔
本文網址：http://kuoshenghsu.blogspot.tw/2014/08/jquery-function.html
這邊特別註明一下：
第一個連結中有一個範例在使用上有問題：
在第三部份 3. Create your own jQuery function
這邊貼出我修改過的HTML檔
<!doctype html>
<html>
<head>
<!-- 自訂function 大小寫轉換 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
jQuery.fn.extend({
zigzag: function () {
var text = [];
var temptext = new String($(this).text());
//alert(temptext);
for(var i = 0 ; i<temptext.length;i++){
text.push(temptext.charAt(i));
}
var zigzagText = '';
var toggle = true; //lower/uppper toggle
$.each(text, function(i, nome) {
zigzagText += (toggle) ? nome.toUpperCase() : nome.toLowerCase();
toggle = (toggle) ? false : true;
});
return zigzagText;
}
});
</script>
</head>
<body>
<div id='test'>Hello World!!!</div>
<script>
$(document).ready(function(){
console.log($('#test').zigzag());
console.log($('#test').text().toLowerCase());
});
</script>
</body>
</html>
有標示紅色的部分，表示是我有修改過的，修改過後功能可正常運作，以上。
這邊寫出幾個自訂funciton及帶入參數的範例給大家參考：
(1)
<!doctype html>
<html>
<head>
<!-- 自訂function 大小寫轉換 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
jQuery.fn.extend({
zigzag: function () {
var text = [];
var temptext = new String($(this).text());
//alert(temptext);
for(var i = 0 ; i<temptext.length;i++){
text.push(temptext.charAt(i));
}
var zigzagText = '';
var toggle = true; //lower/uppper toggle
$.each(text, function(i, nome) {
zigzagText += (toggle) ? nome.toUpperCase() : nome.toLowerCase();
toggle = (toggle) ? false : true;
});
return zigzagText;
}
});
</script>
</head>
<body>
<div id='test'>Hello World!!!</div>
<script>
$(document).ready(function(){
console.log($('#test').zigzag());
console.log($('#test').text().toLowerCase());
});
</script>
</body>
</html>
(2)
<!doctype html>
<html>
<head>
<!-- 自訂function 取代現有的 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
(function($){
// maintain a to the existing function
var oldEachFn = $.fn.each;
$.fn.each = function() {
// original behavior - use function.apply to preserve context
var ret = oldEachFn.apply(this, arguments);
// add custom behaviour
try {
// change background colour
$(this).css({'background-color':'orange'});
// add a message
var msg = '<span style="float:left;font-size:24px;font-weight:bold">Danger high voltage!</span>';
console.log('跑自訂區段');
$(this).prepend(msg);
}
catch(e)
{
console.log(e);
}
// preserve return value (probably the jQuery object...)
return ret;
}
// run the $.fn.each function as normal
$('p').each(function(i,v)
{
console.log(i,v);
});
//output: all paragrahs on page now appear with orange background and high voltage!
})(jQuery);
</script>
</head>
<body>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
<script>
$(function(){
$('div p').each(function(){
console.log('測試');
});
});
</script>
</body>
</html>
(3)
<!doctype html>
<html>
<head>
<!-- 使用jQuery自訂乘法 利用extend帶入自訂參數-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
(function($){
$.multiply = function(option){
var opts = $.extend(
{},
$.multiply.default,
option);
return (opts.x * opts.y);
};
$.multiply.default = {
x:1,
y:1
};
})(jQuery);
</script>
</head>
<body>
<div id='test'>test</div>
<div>HAHA!!</div>
<script>
$(function(){
console.log($('#test').text());
console.log('default=' + $.multiply() + ' another=' + $.multiply({x:2,y:4}));
});
</script>
</body>
</html>
(4)
<!doctype html>
<html>
<head>
<!-- 使用jQuery自訂乘法 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
;var MYNAMESPACE = {};
(function($){
MYNAMESPACE.SUBNAME = {
myFunction: function(x,y){
return x *y;
}
}
})(jQuery);
</script>
</head>
<body>
<div id='test'>test</div>
<div>HAHA!!</div>
<script>
$(function(){
alert(MYNAMESPACE.SUBNAME.myFunction(2,2));
});
</script>
</body>
</html>