就像正規運算式(Regular Expression)的Pattern match一般，jQuery使用了CSS(Cascading Style Sheet)、XPath(XML Path Language)與自訂等三大類的選擇器(Selector)當做$( )函數的參數，讓我們由複製多樣的DOM結構裡，快速的找出符合樣式的要素。 使用選擇器的三個基本格式是：
jQuery選擇器的彙總
要把GoogleAdSense顯示在Blog首頁的表頭區（表頭指的是網頁頂端有Blog標題、小標題與底圖的那塊約1024X200大小的區域）有兩個方法：一個是比照先前介紹過用JavaScript動態替換innerHTML的方法，另一個更簡單，使用樣式表即可。
用樣式把Google AdSense顯示在Banner
隨著自由欄位的越來越五彩繽紛、五花八門之後，網頁載入的速度也越來越慢。為了提示讀者耐心等候，特別加了個「載入中」的小框，就像AJAX技術常見的樣式一般。以下說明我在 Xuite 裡達成的方法與步驟。首先在顯示在最上面的自由欄位裡加上如下HTML標籤：border:3px bluesolid
為了提示讀者耐心等候，特別加了個「載入中」的小框，就像AJAX技術常見的樣式一般
Despite the many JavaScript libraries that are available today, I cannot find one that makes it easy to add keyboard shortcuts(or accelerators) to your javascript app. This is because keyboard shortcuts where only used in JavaScript games - no serious web application used keyboard shortcuts to navigate around its interface. But google apps like Google Reader and Gmail changed that. So, I have created a function to make adding shortcuts to your application much easier.
Font Tool Generator 字型工具產生器本工具是用來產生置放於Blog側邊欄的HTML指令，用來動態變更網頁的字型大小，如此當別人瀏覽自己的Blog時，能透過這個側邊欄很方便的放大或縮小你網頁的字體大小，不再受限你的瀏覽器或CSS(樣式表)的原始設定。操作步驟說明如下：選擇本工具的顯示語言，目前有英文與繁體中文兩種，預設是英文在ID與Function之間的欄位：設定輸出的文字與背景顏色Function下面可以指定放大或縮小的圖形路徑與文字標題除了放大或縮小的圖形外，也有下拉選單，可指定能設定的字體最小與最大之大小， 每次變更大小表示每個字形大小的遞增數量作用對象元素：變更大小的對象，請自行由您的網頁查出；Xuite與樂多輸入container 表示整個網頁顯示樣式：有垂直與水平兩種樣式設定好後必須按下「啟用新設定」才能使用變更生效最後按下「產生HTML」後把網頁底部產生出的HTML指令複製並貼入您的自由欄位 (或稱插入欄位)即可如果在操作上有疑問，或有增強建議的，請寄信到emisjerry@gmail.com或在簡睿隨筆留言。
字型工具產生器：動態變更Blog網頁的字型大小
Google Translator Generator 翻譯服務產生器本工具是用來產生能置放於Blog側邊欄翻譯功能的HTML指令產生器。翻譯是透過GoogleTranslate來達成。操作畫面分成三欄，左欄是選擇功能表，中間是示範表格，最右邊是變更顏色與產生HTML指令的區域。
產生能置放於Blog側邊欄翻譯功能的HTML指令產生器
我的Blog的顯示突然變慢了，如何分析變慢的原因？到底是那個外部連結造成速度出狀況？如果您使用的瀏覽器是FireFox的話，恭喜您，直接下載FireBug、使用它來偵查是最簡單的方法了。
使用FireBug分析Blog顯示突然變慢的原因
從DustinBachrach的網站看到了一個功能：把自己相關的常用網站整合成一個表格，使之能被複製到自己的Blog裡公佈。這個功能似乎滿有用的，但作者的網頁裡卻只有美國常見的網路服務而已，為了方便自己使用，我依作者的概念自行撰寫了新的版本，並發表在網頁Show Yourself Generator裡。使用的步驟說明如下：
A web page to generate All-in-one user's profile
不管訪客人數多寡，大家都趕流行似的紛紛把Google AdSense給掛到Blog上。我也不例外，除了體驗GoogleAdSense到底是什麼玩意，也可體會吸引人氣的一些技巧。但若您和我一樣，都是把Blog放在BSP上，要如何簡單又省事的加上AdSense的腳本，想必是傷透腦筋吧。放在側邊的自由欄位裡是很簡單，但若想要放在表頭或每篇文章的內文裡，可就要大費周章了。剛巧由超苦的Ga的Blog裡看到這篇[JavaScript]把Google Adsense放到Header Banner提供了極佳的想法，因此改寫了程式，使要興趣的讀者們用最少的指令就能解決這個動態產生AdSense廣告的問題。
重新又把MyBlogLog加回網頁。但當點擊訪客頭像圖形時，目前網頁會被訪客的MyBlogLog個人網頁給取代，當想要觀察多個訪客資訊時實在很麻煩，因此在window.onload裡用下列指令把頭像圖形的onclick事件改成使用window.open，而形成以新視窗(或新分頁)的呈現方式。程式片段：view plainprint?function changeMyBlogLogOnclick() { //if (isIE) return
改成開新視窗的方式呈現
JavaScript Hijacking. This is the first class of vulnerability that specifically affects Web 2.0 AJAX-style web applications. Download Fortify’s advisory detailing the risk and how developers can make their code secure.
為了把簡睿常用的工具網頁變更成更好閱讀的的樣式：用左右兩欄式，左側置放功能選單，右側則為主要內容。為了方便套用，特別先製作一個簡單的樣板，在此留下記錄也提供給有相同需求的讀者參考。(按圖開新窗放大)
這兩天又把翻譯的功能加進部落格裡。網頁的自動翻譯功能有兩個選擇： 1. 使用Google的Translate功能：http://translate.google.com 2. Xuite.net也提供了魔匠靈通的線上翻譯功能 我用來開啟Google翻譯網頁的執行指令如下：
除了介紹過的dp.SyntaxHighlighter:在網頁顯示美觀的程式碼之外，SHJS- Syntax Highlighting in JavaScript 是另一個在網頁上顯示各式程式語言的JavaScript程式。我對SHJS並無太大興趣，但是對它在Links裡列出的其他類似工具中的CodePress倒是下載測試了一下(按圖開新窗放大)。
下列網址都是替部落格的側邊欄位加上縮起與展開功能： * Racklin's 阿土伯程式大觀園: 輕鬆擴充 Blogger 功能: Blogger_ext2.js (jQuery way)! * Without Boundaries: 教學 樂多折疊邊欄插件 就我所知以上二者都是使用jQuery Framework來實作的，以下說明的版本則是以最單純的JavaScript來撰寫。 首先說明樂多的大致寫法。樂多的側邊欄位結構如下：
為了能方便訪客針對瀏覽中的文章快速搜尋與檢索，我在新文章裡加入一個命名為 mytag 的＜INPUT＞控制項，把它的值當做要搜尋的關鍵字串，直接填入Google的輸入框裡。
jQWebExt 是一個以 jQuery 為基礎的簡單 MVC pattern 及 plugins 元件架構的一個網頁開發框架。 它讓您能有效的分離 HTML 及 Javascript 程式，讓 HTML 設計者能接觸到最少的 Javascript 程式，並能有效的應用 Javascript 所開發出來的 plugins 元件於 HTML 之中。 也讓 jQuery plugins 能更容易的被使用。
在 2007/01 發表了 BloggerExt - jQuery Way 後，在眾多的回應及信件中，阿土伯發現了一件非常有趣的現象。 即始不懂 HTML / CSS / Javascript 的好朋友們，也都很勇敢且很有興趣的在設定及嘗試修改著他們的 Blogger，而他們其實已經在和 Javascript 打交道了。 這讓阿土伯有了導入這個觀念到專案團隊上的想法.........[刪]... 所以阿土伯將程式碼整理整理，放出來和大家分享，程式不大，主要在於觀念的應用。
HEMiDEMi 提供了書籤收藏者與迴響的 RSS 可以利用，讓 HEMiDEMi 的使用及推廣變的很容易。 然而，如果能夠提供 JSONP 的格式，然後利用 Ajax 的方式呼叫，這樣能夠應用的範圍更廣更方便了，除了現有的 Scriptlet 外，任何 Blog 的主人能夠使用 JSONP 的 API 來自已寫 callback ，來客製化呈現效果。 所以能很容易呈現像 digg 的收藏或迴響人數小貼紙效果，或迴響跑馬燈等..... ALL-IN-One 線上體驗: http://blogger.ext2.googlepages.com/hemidemijsonptest
開始著手將IE網頁轉換成FireFox也能執行。以下是我測試後的兩個註記：
功能簡介: 以目前 roodo_ext 0.1b 來說，它提供了大部份 Roodo Blog 所需的功能，且全部只要 3.3 KB，相當的短小精幹唷。 對於不需要所有功能的進階使用者，您可以選用進階安裝，只要 1.1KB。 * 可以使用 Blogger Smiley 介紹的表情符號功能。 * 針對新版 Blogger 不需修改任何 CSS 及 Html Template。 * 所有功能支援設定選項來控制是否開啟。 * Sidebar 中的網頁元素 可以自定元素 "[-]折收/[+]展開" 功能。 * 表情符號可外掛及設定。 * Sidebar 網頁元素可以自動 NavIcon小圖示。 * 加入了表情符號集 .js ，直接引用。
由於推出了 輕鬆擴充 Blogger 功能: Blogger_ext2.js 後，阿土伯的一堆在樂多誌(Roodo)朋友紛紛來信關心，在頻頻要求下，將 blogger_ext2 porting 到 Roodo 上，算是給樂多誌朋友的賀年禮物嘍!!
以往在和設計配合 CSS 時，都只用到 CSS1 Selectors 功能而己 :( 並沒有認真去了解 CSS1 , CSS2 到 CSS3 Selectors 的差異及改進是什麼。 自從將專案改用 jQuery 後，不再只是利用 $('Id') 查找物件了。 CSS3 主要支援了利用標籤、class、ID、萬用符號、屬性、屬性值做搜尋， 利用了 CSS3 Selectors 的彈性，真的讓 Javascript 設計及規劃上改進許多。 ......
可以讓 field 的求值表現的更加美麗，同上的例子，可以統一改變如下, 無論是 radio, checkbox, multi-select: $("input:checkbox[@name=fieldname").fieldValue(); 會自動回覆 String or Array of String.
利用 jQuery 的 plugins ，一行求得 Form 's Fields 的值，超方便。
我喜歡及推它的原因有五個: 一. Selector: 同大部份的 framework , jQuery 亦是使用 $ 當做選擇物件指令，然而它的 Selector 則更加的靈活及好用，它利用了 CSS3 , XPATH 做為 Selector , 所以我們可以看到以下: $("#myDiv") => 同 document.getElementById("myDiv") 或 prototype $("myDiv") 然而，以下就神奇了: $("ul > li ") => 找出 UL 下的 LI $("input:radio") => 找出 的所有物件。
利用 $(document).ready 將 javascript 與 html 分離，大家一定要看看 jQuery.
Link Thumbnail shows users that are about to leave your site exactly where they're going.
葛力的動作真是快, 三天後便新增了兩個 RSS 輸出, 因此上次的 scriptlet 也就可以改寫成一個通用版本, 不需要在麻煩的查詢書籤 ID, 只需要將下面這行貼進部落格的文章裡, 或是直接加進模版, 便可以在你的部落格中顯示有哪些人收藏了你的文章.
正式版本已釋出, 歡迎大家安裝試用. 更新: 因為要支援更彈性的 style 設定, 我必須拿掉內訂的 style, 以免 overwrite 使用者自訂的, 如果你喜歡我原本的樣式, 請到我的 blog 去抓 style 範例
