<HeadFirst_jQuery> O’REILLY_Chap.1_jQuery入門

本部落格的FollowMeReading系列初衷是線上的讀書筆記. 為方便後期查閱, 故寫成部落格形式, 使用關鍵字查詢便可以快讀的找到相關的內容.

FollowMeReading系列所選的書籍一般選自O’REILLY或Apress出版社, 儘量保證筆記內容的權威性.

FollowMeReading系列的部落格標題格式為: <書名> 出版社章節數章節名, 方便大家在紙質版書籍中查詢.

FollowMeReading系列博文中的內容大部分是原文, 非原文部分前面將有’博主’字樣提醒.

感謝<HeadFirst_jQuery>作者 Ryan Benedetti & Ronan Cranley
感謝<HeadFirst_jQuery>翻譯 林琪

本部落格由@scott編寫. 若轉載此文章, 請註明出處和作者

正文

原文

BULLTE POINTS(要點):

• 向瀏覽器下達指令所用的語言是JavaScript. 所有瀏覽器都提供了一個內建的JavaScript直譯器.

• jQuery是一個專門用來動態改變Web頁面文件的JavaScript庫.

• JavaScript直譯器並不改變原來的HTML和CSS檔案. 它只改變瀏覽器記憶體頁面的DOM表示.

• $() 是jQuery函式的簡寫名. 利用這個快捷方式, 我們就不用每次呼叫jQuery函式時都寫上”jQuery()”.

• jQuery函式通常還稱為jQuery包裝器.

• jQuery函式中可以放入3種不同的內容. $("CSS選擇器") jQuery會返回與這個選擇器匹配的元素集, 這是最常用的做法; $("HTML串") 可以動態向瀏覽器增加DOM元素; $("JS物件")

• jQuery選擇元素的方式與CSS完全相同.

• CSS選擇器選擇元素來為這些元素增加樣式; jQuery選擇器選擇元素來為這些元素增加行為.

• $(document).ready(function() { ... ...} );

  當DOM已經完全載入之後執行function中的程式碼.

• $("div").slideUp(); 滑動顯示. 會改變元素的height屬性, 直至高度為0, 然後將元素隱藏.

• $("div").slideDown(); 滑動顯示. 將元素的height屬性從0改為CSS樣式中設定的某個高度值.

• $("div").slideToggle(); 滑動顯示. 相反動作, 如果原來朝上, 就向下滑動, 如果原來朝下, 則向上滑動

• $("img").fadeIn(1000) 淡入顯示. 1000為速度, 單位為毫秒.