Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web design III

Avatar for Frank Frank
July 18, 2016

Web design III

jQuery

Avatar for Frank

Frank

July 18, 2016
Tweet

More Decks by Frank

Other Decks in Programming

Transcript

  1. Contents • JavaScript more… • Introduction to jQuery – Selector

    – Event driven – Properties, attributes, data – Chaining – Animations and effects – Ajax – Plugin
  2. ECMAScript • JavaScript 中由 ECMA 組織制定共同標準其標準名 稱為 ECMAScript,由以往至今已衍化多個版本,主 要版本; –

    ES3 199x 年所發布幾乎所有 Browser 都有實作這個版本。 – ES5 2009 增加 strict 模式,現代瀏覽器多數支援。 – ES6 2015 目前多數瀏覽器尚未支援,增加 class 等語法。 – ES7 201x 目前屬於開發中狀態。
  3. ES 5 • 為了避免諸如變數宣告範疇、不合法的型別轉換…諸 類問題,因此 ES 5 新增了一項標準; – 於

    JS 文件開頭宣告 ‘use strict’; 字串,整份 JS 文件將採 用嚴謹模式,JS 將會自動偵錯不符合 ES 5 規範的內容。 – 若將 ‘use strict’; 寫於 function 之內,則該函式採用嚴謹模 式,而函式範疇外依然採用正常模式。
  4. Object • 物件是一群特性的群集,特性指的是具有名稱與值的對應。 • 每個特性下皆有三種屬性; – Writable – 值是否具寫入性。 –

    Enumerable – 該特性是否具列舉性,是否可被 for / in 給列舉。 – Configurable – 特性可否刪除、屬性可否更動。 • 每個物件除特性外,具有三個關聯的物件屬性; – Prototype - 這是一個參考,其參考至另一個物件,或是由物件繼承而來。 – Class – 是個字串,用於區分該物件的種類 (ES 5)。 – Extensible – 擴充性,指明是否可在該物件加入新特性 (ES 5)。
  5. Object cont. • 物件的種類可分為以下幾種; – Native : 指的是由 ES 所定義的物件,Array、function、Date、Math…

    – Host : 指內嵌 JS 直譯器的環境如 Browser 所定義的物件,HTMLElement – User-defined : 由使用者定義,並於 JS 執行時期創建的任何物件。 • 而特性分為下列兩種; – Own : 於物件上直接定義的特性,如 toString()、length – Inherited : 由原型物件所定義的特性。
  6. Object cont. • 物件新增特性後,若要讀取特性內的值可使用以下兩種運算子; – 透過 . 運算子可以取用物件下特性名稱內的值; • var

    author = book.main_author; – 透過 [] 運算子亦可取用,兩者實際差異為 [] 內允許特性包含空白; • var author = book[‘main author’];
  7. Object cont. • 建立物件有三種方式; – 物件字面值 • var book =

    { ‘main title’: ‘Java’, id: ‘#00454’ }; – 使用 new 創建物件 • var o = new Object(); – Object.create() ES5 • 使用後將創建一個新的物件,並將引數中的物件作為原型賦予至新創的物件中 • var o = Object.create({x: 1, y: 2}); // o 繼承了特性 x, y • var o2 = Object.create(null); • o2 的方式與指定一個空物件不同,空物件實際上只是物件為空,但 JS 中多數物 件將自動繼承原型 Object.prototype,因此依然可以調用繼承下來的 toString(), 然而 o2 的方式將直接透過原型繼承創立物件,因此繼承指向一個空的物件,表示 o2 不會指向任何方法或特性。
  8. Object cont. • 物件有一組自有特性 (own),以及由原型物件下繼承的一組特性。 • JS 中所有的物件都是基於原型繼承,並且透過一種稱為原型鏈 的方式防止繼承的物件複寫 (override)

    被繼承的原型特性。 – var unit = { r: 1 }; // 要被繼承的物件 – var c = Object.create(unit); // 創立一個新的物件,並繼承原型 unit – c.x = 1; c.y = 1; // 將 c 增加兩個自有特性 – c.r = 2; // 將原型中 r 特性的值修改為 2 – console.log(unit.r); // 依然為 1,物件只會在原本的物件上新建或設定特性, 永遠不會修改原型鏈中的特性。
  9. Object cont. • 查詢特性是否在物件內可以透過以下方法; – 使用 in 運算子,左方為特性名稱(字串),右方為物件 • var

    o = { x: 1 }; • ‘x’ in o; // true ‘y’ in o; // false ‘toString’ in o; // true – 使用物件的 hasOwnProperty() 方法,測試是否有指定名稱的自有 特性,如果是繼承特性則回傳 false: • o.hasOwnProperty(‘x’); // true • o.hasOwnProperty(‘toString’); // false,繼承特性 – propertyIsEnumerable(),與上述大同,但特性須為可列舉性,才 會回傳 true 。 – 除 ES 5 新增可設為不可列舉,否則多數自建的特性都屬可列舉。 • 因此平時在查用時,可以簡略寫為 o.x !== undefined; // true
  10. Object cont. • 特性的 Getters & Setters – 物件是由一個名稱、值和一組屬性所構成,而在 ES

    5 中值可以用 一對方法取代,稱為 Getter & Setters,有時亦稱 accessor (存取 器) 特性。 https://jsfiddle.net/35Lb64ro/
  11. Closure • 閉包中文意思是封閉包圍的範疇 • JS 中的變數 scope 分兩種區域與全域 • 區域屬於不看

    {} ,而是取決於隸屬哪個 function • 因此若想在建構式中建立一個私有特性,可以藉由閉 包達成 • function Constructor() { var imPravite; this.getImPravite = function() { return imPravite; } }
  12. jQuery • jQuery 是一套用於操作 DOM 的第三方套件,開發 者希望藉由 jQuery 降低使用者對 JavaScript

    的學 習曲線,並藉由許多內建的工具,提供使用者快速創 建一個高互動性的網頁。 • jQuery 格言即 Write less, do more.
  13. Version • jQuery 目前主要有四個版本,其中兩個尚為開發中 的版本,因此我們主要使用以下兩種版本; – jQuery 1.x support IE

    6+ – jQuery 2.x support IE 9+ • 版本除支援的瀏覽器版本不同外,其主要差異為功能 及語法上的擴充性。
  14. Selector • jQuery 中可以用 $ 或是 jQuery 呼叫 選擇器。 –

    $(‘*’) or jQuery(‘*’) – $(‘#special-id’) – $(‘.special-class’) – $(‘a .special-class’)
  15. Compare with Js • var $myClass = $(‘.myClass’); – 回傳

    jQuery Obj or jQuery collection • var myClass = getElementsByClassName(‘myClass’) – 回傳 DOM 下的 elements
  16. Filter • jQuery 提供一些過濾元素的選擇器如下; – :first 符合頁面第一個元素 – :last 符合頁面最後一個元素

    – :even 偶數 – :odd 奇數 – :eq(n) 第 n 個元素 – :gt(n) 第 n 個元素後,不含 n 本身 – :lt(n) 第 n 個元素前,不含 n 本身 • li a:first – 所有清單下的第一個超連結
  17. Filter • 過濾器還有很多例如; • 子過濾器 • 表單 • 內容 •

    以上過濾器部分依照 css 規範實作,部分為 jQuery 自定 • 請自行上 jQuery 官網進行學習。
  18. 透過 jQuery 動態建立元素 • $(‘<img>’, { • src: ‘path’, •

    alt: ‘一張圖’, • click: function() { alert($(this).attr(‘alt’)); }).appendTo(‘body’);
  19. jQuery 物件提供的方法 • get([]index]) – 設定索引後回傳 DOM 或 DOM 陣列

    • first() – 取第一個元素,回傳 jQuery 物件 • last() - 方法同上,差異僅取最後一個元素。 • toArray() – 將 jQuery 轉為 DOM array
  20. 練習一 • 帳號密碼檢查 • 帳號不可為空,安全性須符合: – 至少包含一個大寫字 – 至少包含一個特殊字元 –

    必須為數字、字母、特殊字元的 8 位數組 合 – 長度不可超過 20 – 帳號不可同密碼
  21. 作業 二 • 相簿瀏覽器,至少有 5 張照片 • 主區塊用於顯示照片全景預覽 • 副區塊用於顯示所有的預覽縮圖

    • 游標到縮圖時,主區塊變更為該照片 • 點擊後主區塊變更為該圖 • 游標移出縮圖時,主區塊變更為原圖