Jquery基礎教程讀書筆記一

標籤：

一、選擇元素

   1.理解DOM  理解父元素、子項目、同級元素。。。。可以利用Firefox瀏覽器firebug輔助查看。

   2.使用$()函數

     有3種基本的選擇符：標籤名、ID、類。

     執行個體：標籤名：css中p{}寫法 Jquery可以用$("p") 取得文檔中所有的段落。

              Id ： css中 #some-id{}寫法 Jquery可以用$("#some-id") 取得文檔中ID為some-id的一個元素。

              類 ： css中.some-class{}寫法 $(".some-class") 取得文檔中類為some-class所有的元素

   3.CSS選擇符

      範例程式碼：

       

 1 <ul id="selected-plays"> 2     <li>Comedies 3       <ul> 4         <li><a href="#"></a>As you like it</li> 5         <li>子欄目</li> 6         <li>子欄目二</li>      7       </ul> 8     </li> 9     <li>10         Tragedies11         <ul>12             <li>子欄目</li>13             <li>子欄目</li>14         </ul>15     </li>16     <li>17         History18         <ul>19             <li>子欄目</li>20             <li>子欄目</li>21         </ul>22     </li>23 </ul>

  基於清單項目在層級添加樣式，比如我們想讓頂級的項水平排列，那麼我們可以先在樣式表中定義一個horizontal類

 

1 .horizontal{2  float:left;3  list-style:none;4  margin:10px;5 }

那麼接下來 我們用Jquery中的選擇符實現這個小小效果。

1 $(document).ready(function(){2 $("#selected-plays > li").addclass("horizontal");3 });

我們使用子項目組合符（>）將horizontal類添加到頂級項中，這段jq語句的含義就是 尋找ID為selected—plays（#selected-plays）的元素的子項目(>)中所有的清單項目（li）。

接下來我們要給非頂級項的列表添加樣式，使用否定式偽類選擇符實現。代碼如下：

$(document).ready(function(){$("#selected-plays > li").addClass("horizontal");$("#selected-plays li :not(.horizontal)").addClass("sub-level");});

這一次是取得每個清單項目（li）：

是ID為selected-plays的元素（#selected-plays）的後代元素；沒有horizontal類:not(.horizontal)

4.屬性選擇符---通過HTML元素的屬性選擇元素，例如連結的title屬性或者映像的alt屬性。

   $("img[alt]"

  屬性選擇符使用一種從Regex中借鑒來的萬用字元文法，以^表示值在字串的開始，以$表示值在字串的結尾，也是用星號*表示要匹配的值可以出現在字串中的任意位置，用歎號！表示對值的取反。

執行個體代碼：

$(document).ready(function(){$(‘a[href^="mailto:"]‘).addClass(‘mailto‘);$(‘a[href$=".pdf"]‘).addClass(‘pdflink‘);});

5.自訂選擇符

  自訂選擇符的文法與CSS中的偽類選擇符文法相同，即選擇符以冒號（：）開頭。

 Javascript數組採用從0開始的編號方式，而CSS則從1開始的。

 今天先到這 。。。明天繼續加油！

 

Jquery基礎教程讀書筆記一