男丁格爾's 脫殼玩

沒錯!只要 300 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

highlight 3.0

有用過 Google 庫存頁面的人應該會看到它會高亮顯示我們搜尋的關鍵字，其實這也只是找出文章中有關鍵字的部份，然後加上背景顏色。但一般開發者也許並沒有對 JavaScript 有研究，所以就有好心的網友寫了一個 highlight 的套件。只要設定好要高亮顯示的區塊、關鍵字及高亮的背景顏色即可。

套件名稱：highlight
套件版本：3.0
作者網站：http://johannburkard.de/blog/p......pt-text-higlighting-jquery-plugin.html
套件網址：http://plugins.jquery.com/project/highlight
發佈日期：2009-02-22
檔案大小：1.29 KB
檔案下載：jquery.highlight-3.js

參數說明：

檢視原始碼 JavaScript

1
2
3

pat(必填)
描述： 要 highlight 的內容
預設值： 無

方法說明：

檢視原始碼 JavaScript

// 使用 highlight 效果
$(selector).highlight(pat);
 
// 移除 highlight 效果
$(selector).removeHighlight();

使用範例：

檢視原始碼 JavaScript

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.highlight-3.js"></script>
<style type="text/css">
	/* 高亮顯示的顏色 */
	.highlight { 
		background-color: yellow;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 幫 .highlight 加上高亮顯示的功能
		$("a.setHighlight").click(function(){
			$("#highlight").highlight("CSS");
		});
		// 幫 .removehighlight 加上移除高亮顯示的功能
		$("a.removeHighlight").click(function(){
			$("#highlight").removeHighlight();
		});
	});
</script>
 
<body>
	<div id="highlight">
		當在編寫網頁時，常常會用到 css，有時大腦沒那麼清醒時可能就是會拼錯單字或是忘了怎麼拼，這時可就得再拿書出來翻了。但總不可能真的每天都帶本書吧(也可以上網搜尋啦！)，因此就有好心人士把 CSS 的語法整理成表格，真是佛心來的
	</div>
	<a class="setHighlight" href="#">高亮顯示 CSS 字串</a>&nbsp;<a class="removeHighlight" href="#">移除高亮顯示</a>
</body>