簡睿隨筆 《科技篇》-JavaScript http://blog.roodo.com/emisjerry/archives/cat_324477.html 學習過程的各項紀錄與備忘 :::看不到圖請連我 的Xuite主站:: 輸 入您的搜尋字詞 提 交搜尋表單 _uacct = "UA-123122-2"; urchinTracker(); zh-tw Roodo Blog System All Rights Reserved 幾個好用的FireFox Ubiquity命令：shorten、goto和screengrab 介紹幾個好用的FireFox Ubiquity命令：shorten、goto和Screegrab。shorten以TinyURL.com、is.gd、bit.ly或hurl縮短網址，goto開啟網址或搜尋輸入的網址，screengrab則做網頁畫面的擷取（不須安裝附加元件），都是很方便的命令。

(繼續閱讀...) ]]> http://blog.roodo.com/emisjerry/archives/7445015.html http://blog.roodo.com/emisjerry/archives/7445015.html JavaScript Sun, 26 Oct 2008 21:38:00 +0800 jQuery TreeView插件IE異常解決方法 TreeView插件，沒想到運行在IE展開節點時有一塊區域會隨機性清空，但在FireFox裡卻又正常。癥狀如下：

Trace許久後終於解決了！沒想到竟然是註解標籤 <!-- 、 --> 造成問題。TreeView需要的<ul>、<li>結構是用Java程式由資料庫取出組成，為了方便偵錯而在</ul>後面都再上註解標籤，結果在IE裡造成異常。拿掉這些註解標籤後就正常了。

## ]]> http://blog.roodo.com/emisjerry/archives/4474495.html http://blog.roodo.com/emisjerry/archives/4474495.html JavaScript Tue, 13 Nov 2007 22:01:47 +0800 jQuery選擇器測試與範例 測試網頁，以下是功能備忘。

在表單 FORM1 裡放入姓名、住址、電話等資料項目，項目形式有Text、Button、Select、TextArea等多種，再用幾個功能按鈕執行不同的過濾字串，最後把符合的項目ID顯示在網頁下方。
  1. 項目要放在一個有序清單(Ordered List, ol)裡，因此用 $("<ol></ol>") 建立新的要素(等同於 document.createElement("ol") 。為方便後續操作使用此要素，將之存入變數$result。
    • jQuery的命名慣例：jQuery的物件變數都以 $ 符號開頭，如上例中的$result就是一個jQuery物件。
  2. 清除jQuery物件的內容可使用remove() method，$result.remove( )，在執行操作前要把$result內容先清空，否則會讓清單越加越長。
  3. $result.append("HTML內容")會把字串附加到$result裡面。
  4. 針對表單FORM1操作的選擇器寫法：
序操作功能選擇器說明
1找出所有項目$("#FORM1 :input")包含input、select、textarea、button等
2找出type='text'的項目$("#FORM1 :text") | | | 3 |找出type='hidden'的項目 |{{{$("#FORM1 input[@type='hidden']"):hidden是被隱藏的項目而不是Hidden類型的<input>項目，因此必須用指定屬性的寫法
4列出type='hidden'且有title屬性之項目$("#FORM1 input[@type='hidden'][@title]") 兩個條件都成立的項目才會被選到
5ID有2之項目$("FORM1 input[@id*='2']")開頭^、結尾$、含有*，這幾個符號和正規運算式相同，很好記憶
6ID以DUM開頭之項目$("FORM1 input[@id^='DUM']" 

完整的程式請參考，檢視原始檔即可：
## ]]> http://blog.roodo.com/emisjerry/archives/4211415.html http://blog.roodo.com/emisjerry/archives/4211415.html JavaScript Sat, 29 Sep 2007 23:22:36 +0800 jQuery神奇的選擇器(Selector) 就像正規運 算式(Regular Expression)的Pattern match一般，jQuery使用了CSS(Cascading Style Sheet)、XPath(XML Path Language)與自訂等三大類的選擇器(Selector)當做$( )函數的參數，讓我們由複雜多樣的DOM結構裡，快速的找出符合樣式的要素。

使用選擇器的三個基本格式是：
序 格式 範例 說明
1 $("HTML標籤") $("div") 傳回表示所有div要素的jQuery物件
2 $("#要素的ID") $("#linksLeft") 傳回表示<div id="linksLeft">要素的jQuery物件
3 $(".要素的類別") $(".blogname") 傳回<div class="blogname">要素的jQuery物件

CSS選擇器

更完整的CSS Selector如下表：
樣 式 說明 範例
* 萬用選擇器(Universal selector)；表示所有的要素 $("*")
E Type selectors；選取指定的要素類型 $("div") 選取所有的div要素
E > F Child selectors；選取E的子要素F $("div > li") 選取div要素裡的子要素li
E F Descendant selectors；選取E的後代要素F，子代、孫代、... $("div li")
E + F 套用緊鄰在E之後的要素F 範例在表格下面
E:first-child E是第一個子要素；這個表示方法似乎不是很直覺，容易被理解成是E的第一個子要素，但其實是：E是其父要素的第一個子要 素 $(".blogbody:first-child") 找到首頁第一篇文章
E:last-child E是其父要素的最後一個子要素 $(".blogbody:last-child") 找到首頁最後一篇文章
E:nth-child(n) E是其父要素的第n個子要素 $(".blogbody:nth-child(2)") 找到首頁第３篇文章(由0起算)
E:only-child E是唯一的子要素 $(".blogname:only-child")
E:empty E沒有任何的子要素 $("div:empty")
E:enabled 生效的要素E HTML標籤沒有被加上disabled
E:disabled 失效的要素E HTML標籤被加上disabled
E:checked 被勾選的要素E HTML標籤被加上chedked
E:selected 被選取的要素E HTML標籤被加上selected
E:not(s) 不屬於s的要素E $(".blogbody:not(blogbody_even)
E[@attr] 有指定屬性的要素E $("a[@href]) 找出所有的<a href="...">")
E[@attr=value] 屬性的值完全相同的要素E $("h3[@class=hdr]")
E[@attr^=value] 屬性的值以value開頭的要素E $("a[@href^=http://blog.xuite.net]")
E[@attr$=value] 屬性的值以value結尾的要素E $("a[@href$=.pdf]")
E[@attr*=value] 屬性的值含有value的要素E $("a[@href*=xuite.net]")
E[@attr1=value1]
[@attr2=value2		 選取條件同時成立的要素E
  • E + F 範例：
 h2 + * { color:green } /*所有緊隨 h2 的要素内的文字皆為紅色 */
 h1 + p { border-top: 3px solid #f60; }
  • HTML原始碼(標題會套用h1 + p)：
<h1>標題</h1>
<p>段落 A</p>
<p>段落 B</p>
<p>段落 C</p>

自訂的選擇器

樣 式 說明 範例
:even 要素的偶數項 $("tbody tr:even").addClass("even")
:odd 要素的奇數項 $("tbody tr:odd").addClass("odd")
:eq(N) 第N項的要素 $("div.blogbody:eq(0)") 選第一篇文章
:gt(N) 大於第N項的要素 $("div.blogbody:gt(3)") 選第五篇(由0起算)~第十篇的文章(假設首頁只有十篇)
:lt(N) 小於第N項的要素 $("div.blogbody:lt(3)") 選第一篇至第三篇文章
:first 等於:eq(0)，第一個要素 $("div.blogbody:first') 選第一篇文章
:last 最後的要素 $("div.blogbody:last") 第十篇文章
:parent 選取自己是父代的要素 $("div.blogbody:parent") 有子要素的文章會被選取
:contains("text") 選取含有指定文字的要素 $("div.title:contains('jQuery')") 找出有jQuery字串的標題
:visible 有呈現出的要素  
:hidden 隱藏了的要素  

表單的選擇器

樣 式 說明 範例
:input 選取所有的輸入要素，包含input、select、textara、 button等 $("#form1 :input")
:text 選取<input type="text">的要素  
:password 選取<input type="password">的要素  
:radio 選取<input type="radio">的要素  
:checkbox 選取<input type="checkbox">的要素  
:submit 選取<input type="submit">的要素  
:image 選取<input type="image">的要素  
:reset 選取<input type="reset">的要素  
:button 選取<input type="button">的要素  
:reset 選取<input type="reset">的要素  
:file 選取<input type="file">的要素  
  • 表單和選擇器之間至少要空一格，如: $("#fom1 :button")會生效，$("#form1:button")則無法運作
參考：http://docs.jquery.com/DOM/Traversing/Selectors#CSS_Selectors ]]> http://blog.roodo.com/emisjerry/archives/4205285.html http://blog.roodo.com/emisjerry/archives/4205285.html JavaScript Sat, 29 Sep 2007 00:09:09 +0800 方便查閱的jQuery 1.2 Cheat Sheet jQuery彙總表(Cheat Sheet)，對於查閱相當方便；現有PDF和PNG兩個版本。 ]]> http://blog.roodo.com/emisjerry/archives/4191713.html http://blog.roodo.com/emisjerry/archives/4191713.html JavaScript Tue, 25 Sep 2007 23:15:30 +0800 使用jQuery的效益 jQuery是個輕量級的JavaScript程式庫，輕量級的意思是它的程式庫極其精簡且很容易的能被使用，整合到現有程式裡也很簡便：只要在網頁程式<head>區加入<script src="/js存放路徑/jquery.js"></script>即可，而因應不同的環境，jquery.js檔案有幾種不同的格式可供使用：
js檔名檔案大小用途
jquery-1.2.1.js78.6KB使用於開發環境
jquery-1.2.1-pack.js27KB使用Packer壓縮過的檔案，適用於正式運行環境；Xuite內使用的就是pack格式的檔案
jquery-1.2.1-min.js45.3KB適用於正式運行環境; 似乎Server要搭配GZip才能達到更小的檔案大小

和傳統的JavaScript寫法相比，我覺得使用jQuery有幾個效益：
  • 大幅簡化存取DOM的要素的寫法；我們以取得Xuite的部落格名稱做範例
    • Xuite的部落格名稱並未指定ID，而是用class來定義：
<div class="blogname">
  <a href="/emisjerry/tech">簡睿隨筆 《科技篇》</a>
  <span class="blogemotion"></span>
  <span class="blogfavo"></span>
</div>
  •  
    • 如果有指定ID的要素，可以直接用document.getElementById(ID)就取到，但在沒有ID的狀況下就必須用document.getElementsByTagName("div")先找出所有的div標籤，再用迴圈比對className，才能找到<div class="blogname">，即使把這些動作整理成一個函數來處理，也是頗為麻煩。
    • 而jQuery只要用CSS或XPath的語法很容易就能取到代表<div class="blogname">的jQuery物件： $(".blogname")
      • $( )是jQuery的函數，會回傳jQuery物件，透過此物件的諸多method，就能很輕易的存取DOM要素。例如用$(".blogname").children()可取出<div class="blogname">裡的子要素
      • CSS的類別放在StyleSheet的檔案裡是用點(.)開頭，ID是以井號(#)開頭，jQuery裡也是使用相同的寫法，例如用".blogname"表示類別blogname，$("#linksLeft")則存取ID為linksLeft的要素：<div id="linksLeft">
  • 簡化網頁特效的寫法；jQuery提供了許多特效method，例如toggle() (要素的顯示/隱藏切換)、slideToggle() (滑動式顯示/隱藏切換)等等
  • 簡化要素事件的寫法
    • 一般的寫法比較繁複一些：
  document.getElementById("linksLeft").onclick = function() {
    alert("左邊Panel clicked!");
  }
  •  
    • jQuery的寫法：
  $("linksLeft").click(function() {
    alert("左邊Panel clicked!");  
  });
  •  
    •  
      • 驅動事件的onXXXX的on不必寫，把要處理的程式用匿名函數傳入
  • 簡化AJAX的處理寫法：這是原本使用jQuery的最主要原因，要自行處理AJAX的所有細節有點太浪費生命了，還是使用Open source的程式庫較好
]]> http://blog.roodo.com/emisjerry/archives/4183877.html http://blog.roodo.com/emisjerry/archives/4183877.html JavaScript Mon, 24 Sep 2007 00:34:47 +0800 在Xuite測試 jQuery 如果您發現最近我的網誌似乎怪怪的，請別懷疑或擔心，因為最近正在Xuite上測試jQuery的功能。Xuite不知何時開始已使用了jQuery的AJAX功能，雖然版本不是昨天剛推出的1.2版而是1.1.2，但對我這個初學者而言應該是夠用了。

目前的目標是把原先純粹用JavaScript寫的擴充功能用jQuery重新實作，透過這樣的練習應該能很快掌握jQuery的精髓吧。順道一提，jQuery的專案開發網站也是使用Trac與Subversion在管理的。它使用的標誌似乎是河內之塔的模樣，不知有何特殊含義？



##

]]> http://blog.roodo.com/emisjerry/archives/4128397.html http://blog.roodo.com/emisjerry/archives/4128397.html JavaScript Wed, 12 Sep 2007 19:20:34 +0800 變更MyBlogLog的onclick事件處理程式 重新又把MyBlogLog 加回網頁。但當點擊訪客頭像圖形時，目前網頁會被訪客的MyBlogLog個人網頁給取代，當想要觀察多個訪客資訊時實在很麻煩，因此在 window.onload裡用下列指令把頭像圖形的onclick事件改成使用window.open，而形成以新視窗(或新分頁)的呈現方式。

程式片段：

## (繼續閱讀...) ]]> http://blog.roodo.com/emisjerry/archives/2971941.html http://blog.roodo.com/emisjerry/archives/2971941.html JavaScript Sun, 08 Apr 2007 17:07:26 +0800 IE和FireFox存取同名物件有不同的作法 在將 部 落格 加上動態放大與縮小字體大小的功能這篇文章裡敘述了放 大與縮小文章內容字體大小的功能按鈕，這個功能在FireFox裡運作得很正常，但IE則無法運作，今天終於找到問題： Xuite日誌在<head>區裡放了一個名為content的<INPUT>物件(<input type='Hidden' name='content'>)，和放置文章內容的區域名稱(<div id='content'>) 衝突到了！我解決的方法是判斷瀏覽器，當使用IE時把要作用的控制項改成content的上一層mid，如此在IE裡也能正常運作了。接著寫了簡單的 script來驗證此問題之癥結。


<input type="hidden" name="TEXT1" title="Hidden TEXT1">  <!-- First TEXT1 -->
<div id="TEXT1" title="Div TEXT1"> <!-- Second TEXT1 -->
  document.getElementById difference between IE & FF
</div>

<script>
  var obj = document.getElementById('TEXT1');
  document.write("obj title=" + obj.title);
</script>

以下的script在網頁上放了兩個名稱同為TEXT1的物件，當使用document.getElementById('TEXT1')取物件時，在 IE 6裡取到的是第一個，而FireFox則取到第二個。這個應該是IE的問題吧．．．

## (繼續閱讀...) ]]> http://blog.roodo.com/emisjerry/archives/2971701.html http://blog.roodo.com/emisjerry/archives/2971701.html JavaScript Sun, 08 Apr 2007 15:40:54 +0800 [HTML&CSS] 鎖定左側功能選單，不隨頁面捲動 Division fixed

為了把簡睿常用的工具網頁變更成更好閱讀的的樣式：用左右兩欄式，左側置放功能選單，右側則為主要 內容。為了方便套用，特別先製作一個簡單的樣板，在此留下記錄也提供給有相同需求的讀者參考。(按圖開新窗放大)



左側與右側各置放一個<div>，其ID分別為left與right，在left上在疊放另一個<div id="menu">，主要的控制就是把left的position設 定固定(fixed)，這樣 就能把此區域鎖定在網頁上，不隨著右側內容的捲動而移動。IE則必須針對overflow做控制才能正確顯示。

測試網頁的執行請瀏覽這裡。
(樣板結構參考：http://www.pixelbeat.org/cmdline.html)

測試網頁源碼如下：
(繼續閱讀...) ]]> http://blog.roodo.com/emisjerry/archives/2960353.html http://blog.roodo.com/emisjerry/archives/2960353.html JavaScript Thu, 05 Apr 2007 20:37:21 +0800 網頁顯示程式碼的美容師：CodePress CodePress

除 了介紹過的dp.SyntaxHighlighter: 在網頁顯示美觀的程式碼之外，SHJS - Syntax Highlighting in JavaScript 是另一個在網頁上顯示各式程式語言的 JavaScript程式。我對SHJS並無太大興趣，但是對它在Links裡列出的其他類似工具中的CodePress倒 是下載測試了一下(按圖開新窗放大)。

事實上dt.SyntaxHighlighter已經相當方便，且顯示在網頁上的效果也相當美觀，但似乎當顯示內容有中文 時，顯示的列距就有點重疊狀 況，有時造成檢視上的不便。

CodePress看來不錯，需要加的程式碼也很少，但因為我使用的Google Page Creator無法使用子目錄，而 CodePress需要用到兩個子目錄(engine和language)，我試著修改其codepress.html，但仍有些問題。如果您使用的網站 能使用目錄結構的話（我猜，應該是百分之九十九的系統都使用樹狀的目錄結構吧，只有Google是怪胎..:-)，CodePress是不錯的選擇。

## (繼續閱讀...) ]]> http://blog.roodo.com/emisjerry/archives/2920003.html http://blog.roodo.com/emisjerry/archives/2920003.html JavaScript Tue, 27 Mar 2007 23:18:07 +0800 JavaScript Collector: 包羅萬象的JavaScript檔案庫 JavaScript Collector JavaScript Collector蒐集了200多個JavaScript的 各式程式技巧，它以客戶端的執行檔呈現，除了能參考作者由許多網站蒐集來的小技巧外，也能自行 新增自己的程式片段進去，因此也能當做自學或工作上的程式檔案庫。更令人激賞的，所有的程式都能用IE、FireFox或Opera等瀏覽器預覽，能在最 短時間內找到能使用的功能。(按圖開新窗放大)

JavaScript Collector分成下列幾大類：
  • Background Effects
  • Banners
  • Calculators
  • Cookies
  • Counters
  • Date and Time
  • Email Scripts
  • Forms
  • Games
  • Generators
  • Image Effects
  • Link Effects
  • Misc
  • Mouse Effects
  • Navigation
  • Redirection
  • Scrollers
  • Text Effects
  • Tools & Utilities
  • User Information
  • Window StatusBar Effects
  • Window Title Effects
  • Window
## (繼續閱讀...) ]]> http://blog.roodo.com/emisjerry/archives/2886471.html http://blog.roodo.com/emisjerry/archives/2886471.html JavaScript Tue, 20 Mar 2007 21:42:53 +0800 IE會自動把標籤轉成大寫！ 替部落格的側邊欄位加上縮起與展開功能的最後面說：不知為何，IE執行上會有問題，FireFox則正常，最後找到的問題又是IE和FireFox的差異造成的。

原來程式為了偷懶，使用innerHTML而未以DOM來操作，結果IE把所有的標籤都自動轉換成大寫(＜li>文章分類</li>在IE裡變成＜LI>文章分類</LI>)，導致程式無法判斷正確，加了轉換成小寫來判斷後就OK了。

原來的寫法：
var _iIndex = _sHTML.indexOf("</li>"); // 在IE裡因會變大寫，致無法找到

修改後的正確寫法：
var _iIndex = _sHTML.toLowerCase().indexOf("</li>");

## (繼續閱讀...) ]]> http://blog.roodo.com/emisjerry/archives/2882481.html http://blog.roodo.com/emisjerry/archives/2882481.html JavaScript Mon, 19 Mar 2007 22:54:21 +0800 事件處理程式與物件的順序對FireFox很重要 表單控制項(＜INPUT...>)與事件程式(＜script for=...  event=...>)的先後位置，＜script-for-event>只做類似宣告的動作，在讀取網頁內容時不會去檢查 INPUT 產生與否，被觸發時才會執行。但此二者的前後位置對於FireFox而言卻是非常重要。

以下皆為FireFox的特性：

1.先寫事件會產生錯誤；事件處理程式寫在控制項後面才是正確的：
<script>
  document.getElementById('btnOK').onclick = function() {  // has no properties錯誤
    alert("btnOK pressed!");
  };
</script>
....
<input  id='btnOK'  value='OK'>

2.最保險的寫法是把事件處理程式寫在window.onload的程式裡：
<script>
  window.onload = function() {
    document.getElementById('btnOK').onclick = function() {
      alert("btnOK pressed!");
    };
  };
</script>
....
<input  id='btnOK'  value='OK'>  // 控制項的位置無關緊要了

能這樣寫的原因是：window.onload必定在網頁全部都讀取完畢後才會被執行。

2007/03/04修訂：為免混淆，將「物件」改成表單控制項或控制項。

## (繼續閱讀...) ]]> http://blog.roodo.com/emisjerry/archives/2795121.html http://blog.roodo.com/emisjerry/archives/2795121.html JavaScript Sat, 03 Mar 2007 00:19:47 +0800 將IE網頁轉換成FireFox也能執行 FireFox也能執行。以下是我測試後的兩個註記：
  • document.all 在FireFox裡仍然能使用
    • 一般的文件與書籍都提及要用document.getElementById來取代IE專屬的document.all，但 在FireFox 2.0.0.2裡document.all是能正常運作的
    • 事實上在2004年已經有支援document.all的寫法了： Mozilla Supports document.all (Almost)
    • 不過，為了能支援別的瀏覽器，還是改用document.getElementById為宜
  • <script for="..." event="...">是IE的專屬語法，但奇怪的是<script for="window" event="onload">卻能使用，原來以為會否是window物件的所有事件都有支援，但unload卻又不行。
網頁裡的事件幾乎都是用<script for="..." event="...">的寫法，目前想到的改法是：
<script for=Button1 event=onclick>
  alert("onclick!");
</script>		==改寫成==><script>
  document.getElementById('Button1').onclick = function() {
    alert("onclick!");
  };
</script>


參考：
##
(繼續閱讀...) ]]> http://blog.roodo.com/emisjerry/archives/2783279.html http://blog.roodo.com/emisjerry/archives/2783279.html JavaScript Wed, 28 Feb 2007 22:39:58 +0800