jQuery 基礎入門 




前端網頁程式設計基礎班 DAY 6


講師:張凱迪(KD.Chang)







Copyright © 2013 All rights reserved





提醒您鍵盤左右鍵可以移動投影片

 Sorry,  PPT is not suitable for Hackers : ( 

Outline 

jQuery 簡介

jQuery 選擇器

 jQuery 和 DOM

 jQuery 事件處理

 jQuery UI 和特效

 jQuery Advance & Plug-in







 jQuery 簡介

關於 jquery

jQuery 是一個廣泛被使用的JS 函式庫 (Library),其標榜寫月少做越多 (The Write Less,  Do More)的強大功能,可以讓使用者更輕易的操作 DOM API、變更網頁的外觀、顯示動畫和進行事件處理

* 建議在使用jQuery前,對於JS 和  DOM 要有一定程度了解






使用 jquery


1. 到官方網站下載 jQuery (minified 版本檔案較小為正式上線使用,開發用unpressed版本)

2. 將下載的.js 檔案引入
 <script src="jquery.js"></script>

3.  開始使用 jQuery !

第一個 jQuery 程式

以前寫Native時,光選取想要改變的DOM元素就要寫很長一段,現在有了jQuery,可以用更簡潔的方式選取元素並更改其屬性值

 jQuery(document).ready(function() {    console.log('Hi jQuery');}); 
$ 為 jQuery別名,特殊變數名稱。 $()函數是呼叫建構函數建立的jQuery物件,參數document為HTML物件本身,然後註冊了 ready 事件,括號中為匿名函數,處理事件

jQUERY 程式架構

一般使用 jQuery情境在於要用更簡潔方式和DOM來做互動,所以必須等到 DOM完成載入(不用等到所有資源載入)後,才開始執行 jQuery 程式

1.  jQuery(document).ready(function() { … })  [常用]
當 document 物件下所有 DOM 物件都可以正確取得時,就會觸發事件,也可簡寫為 $(function() { … });

2.  jQuery(window).load(function() { … })
同 JS 裡的 window.onload 事件,會等所有資源載入

參考文件:

JQUERY 程式基本語法


一般jQuery程式敘述是由 $()函數開始,可以分為三個部分:

1. 選擇器
可以參考使用CSS選擇器寫法,找出符合條件元素
2. 動作
替元素套用樣式或是建立動畫、互動等
3. 參數列
執行動作所需的參數

 $(選擇器字串).method(參數);



串聯 chaining


由於jQuery方法的傳回值為jQuery物件本身,所以可以使用串聯的方法依序執行多個方法,達到簡潔語法的效果

 $('.xd').css('color', 'red'); $('.xd').html('Hi JS'); $('.xd').addClass('XDDD');

 $('.xd').css('color', 'red').html('Hi JS').addClass('XDDD');

練習 一(SAMPLE 5-1)


利用jQuery的方法,選取一元素,動態改變其顏色








 jQuery 選擇器

JQUERY 選擇器


jQuery選擇器可以說是jQuery的核心,亦即需要先選擇出你想要處理的元素,才可以進行接下來事件處理、更改樣式、建立動畫等功能

在 $() 函數中只有一種參數,為選擇器語法字串。透過傳入選擇器語法字串進入$()函數,可以回傳一個符合條件的jQuery物件,在根據回傳的物件呼叫jQuery方法進行處理



JQUERY 選擇器


基本上,jQuery選擇器有三種(類似CSS選擇器寫法)

1.  標籤名稱
$('element')

2. id 屬性
$('#idName')

3. class 屬性
$('.className')







 jQuery 和 DOM

存取 CSS 


使用jQuery可以簡單的存取元素的CSS屬性值

css('屬性名', '屬性值') 
為元素套用CSS樣式或取出元素CSS屬性值


存取 CSS 樣式類別


可以用不同方式來存取CSS樣式類別

addClass()
增加樣式類別
hasClass()
檢查是否有該樣式類別
removeClass()
移除樣式類別

toggleClass()
如果沒有則新增,若有則移除樣式類別

JQUERY 與 DOM 處理

常用於新增、刪除、修改DOM的方法:

1. html() 即innerHTML 將參數HTML Tag取代DOM元素內容
2. text()  即innerText 將參數文字內容取代DOM元素內容
3. prepend() 將參數的HTML Tag新增成為第一個子元素
4. append() 將參數的HTML Tag新增成為最後一個子元素
5. before() 將參數的HTML Tag 插入元素之前
6. after() 將參數的HTML Tag 插入元素之後
7. remove() 從DOM刪除此元素







 jQuery 事件處理

JQUERY 事件處理


事件處理是JS也是jQuery非常重要的功能,jQuery擴充了原生JS的事件處理,提供更強大的一些功能

1. 使用on來綁定事件(和JS原生比較看看)

 $('#xd').on('click', eventHandler); function eventHandler(event){    $(this).css('color', 'red'); };







 jQuery UI 和特效

jquery 特效方法


jQuery提供常用的特效,讓使用者可以輕鬆使用:
顯示、隱藏、滑動、淡出淡入等

使用方法:
$('選擇器').特效方法(duration , callback function);

1. 持續時間(duration)
特效持續時間,單位為毫秒,可為關鍵字fast(約200毫秒)
2. 回呼函數(callback function)
當特效結束時所呼叫的函數

顯示與隱藏特效


1. show() 顯示元素

2. hide() 隱藏元素
 
3. toggle() 按一下可以切換顯示或隱藏元素


滑動特效


1. slideDown() 元素向下滑動

2. slideUp() 元素向上滑動

3. slideToggle() 切換元素向上和向下滑動


淡出淡入特效


藉由改變透明度可以達到淡出淡入效果

1. fadeIn() 淡入元素

2. fadeOut() 淡出元素

3. fadeToggle() 切換淡出、淡入元素

4. fadeTo() 元素漸漸轉變成指定透明度

練習 二(SAMPLE 5-2)


製作點選標籤切換內容的網頁選單(請參考Yahoo奇摩首頁)
麻煩和JS寫法做比較








 jQuery Advance & Plug-in 

[F2E] jQuery 基礎入門

By 張凱迪(KD Chang)

[F2E] jQuery 基礎入門

本課程分為 前端網頁程式設計基礎班 和 PHP 網站程式設計與資料庫基礎班 兩個班,希望藉由這次課程能讓對於網頁程式設計有興趣的同學可以有一個入門的管道,在上完課程後可以有足夠的自學能力能夠持續學習進修,進而將自己的點子付諸實踐。課程網站:http://kdchang.cc/web-programming-course/ Email:web.programming.course@gmail.com FB 粉絲專頁:https://fb.com/Web.Programming.Course

  • 1,062
Loading comments...

More from 張凱迪(KD Chang)