簡睿隨筆 《科技篇》

CSS選擇器

• 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>

自訂的選擇器

表單的選擇器

• 表單和選擇器之間至少要空一格，如: $("#fom1 :button")會生效，$("#form1:button")則無法運作

• 大幅簡化存取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的程式庫較好