# 超詳解 jQuery 開發範例大全 (陳佳新譯, 悅知文化) 10-2-2 節
# 打造 jQuery 網頁風暴 (張子秋, 佳魁) 10.5 節
在之前的 jQuery 測試中, 如果要在網頁中顯示執行結果有下列方法 :
- 使用 alert() 函數
- 使用 document.write() 直接覆蓋 body 原內容
- 使用 console.log() 輸出到瀏覽器的控制台
- 在網頁中設置一個 div 或 p 元素, 以選擇器選取後呼叫 html() 輸出
下面用擴充工具函數方式只要在網頁中添加程式碼即可呼叫 $.print() 直接於網頁中輸出訊息.
1. 利用 Javascript 本身的擴充功能 :
只要在網頁中加入下列擴充函數即可 :
$.print=function(msg){$("<div></div>").html(msg).appendTo('body');};
此程式先建立一個空的 div 元素, 將其內容設為要顯示的資料後呼叫 appendTo() 將 div 插入到 body 元素後面.
例如 :
範例 1 : 擴充 Javascript 函數來輸出訊息 [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<style>
</style>
</head>
<body>
<input type="button" id="Hello" value="Hello">
<script>
$(function(){
$.print=function(msg){$("<div></div>").html(msg).appendTo('body');};
$("#Hello").click(function(){
$.print("Hello World");
});
});
</script>
</body>
</html>
此例按下 Hello 按鈕就會呼叫 $.print() 函數於網頁中輸出訊息, 結果如下 :
2. 使用 $.extend() 工具函數擴充 :
jQuery 本身有一個 $.extend() 工具函數可用來擴充自訂的工具函數 :
$.extend({functionName: function() {}});
以上面在網頁中輸出訊息為例, 擴充函數如下 :
$.extend({print: function(msg){
$("<div></div>").html(msg).appendTo('body');
}});
此處 functionName 為 print, 表示呼叫時要用 $.print(), 上面的範例可以改寫為如下程式 :
範例 2 : 使用 $extend() 擴充工具函數來輸出訊息 [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<style>
</style>
</head>
<body>
<input type="button" id="Hello" value="Hello">
<script>
$(function(){
$.extend({print: function(msg){
$("<div></div>").html(msg).appendTo('body');
}});
$("#Hello").click(function(){
$.print("Hello World");
});
});
</script>
</body>
</html>
結果與上面範例 1 相同.
沒有留言 :
張貼留言