2.4_點選事件(click)應用

• 點選按鈕來切換背景顏色
• 全域變數及閉包應用
• 測式按鈕是否被點按?
• dom搜尋結果，統一由一變數代表
• 取得和修改<link>的屬性-href的值，以改變樣式
• 點選各別按鈕，判斷其text屬性，以切換不同樣式
• 運用data-file屬性，來判斷不同按鈕
• $('link')，統一由變數-link代表
• 將按鈕設為disabled
• 使用siblings()來切換相鄰2個按鈕，來交互移除disabled屬性
• 運用var 和 , 來宣告多個變數
• 變數執行多個方法時，運用分行及階層式的寫法，使閱讀更明確
• on的應用

---

點選按鈕來切換背景顏色

解說Event何時用(click,hover)等事件

目標:使用者點擊二個按鈕，來切換背景顏色

新增day.css和night.css，分別加入不同的背景顏色設定

index.html導入外部css檔案-day.css

運行結果，可看到樣式為day.css的黃色背景

全域變數及閉包應用

介紹全域變數 var someVar,myVar和window.myVar意思一樣

介紹閉包，(function(){})和myFunc一樣，只是呼叫函式的寫法而已

測式按鈕是否被點按?

測試按鈕是否被點按?

在google chrome中，呼叫console視窗的方法(ctrl+shift+i)

在console視窗中，看到log訊息"Button was clicked"

解說this的用法

點按按鈕後，可看到console視窗的log訊息

解說為何此this指定的是該點選的元件<button>Night</button>

解說this並不是jquery物件，如使用this.text('changed')會出錯

輸出畫面，顯示錯誤訊息

修改成$(this).text('change')便可成功運行//使用$()將this轉化為jQuery物件

運行結果，按鈕的text值被成功修改的畫面

dom搜尋結果，統一由一變數代表

假設有許多的<ul>要轉化為jQuery物件，寫一堆$('ul')很沒效率

寫成 var uls=$('ul');之後有需要用到jQuery物件的指令都使用該變數即可，如uls.click(),uls.find()

取得和修改<link>的屬性-href的值，以改變樣式

目標，取得<link>的屬性href的值

目標:修改<link>的屬性href的值，以改變樣式

輸出畫面，點選任一按鈕後，背景樣式改變了

點選各別按鈕，判斷其text屬性，以切換不同樣式

目標:要如何指定特定的按鈕來執行特定的動作呢?
var stylesheet//取得目前點選的按鈕的text值

由於是給程式判斷用，統一為小寫會較好判斷

運行牱果，點選大寫的Day按鈕，取得小寫的day

轉為小寫後，直接用按鈕的文字來指定css檔案

運行結果，透過不同按鈕來切換樣式的功能成功

運用data-file屬性，來判斷不同按鈕

//使用data-file的屬性設定樣式值

說明如要自行設定屬性也可以，
如<button data-jeffy=""></button>

//改為讀取data-file的屬性

運行結果，成功透過data-file來切換背景樣式的功能

使用方法data來取得data-file的值

運行結果，成功運行

$('link')，統一由變數-link代表

//不需要每次點按時都呼叫jQuery一次，所以先將變數存好
var link=$('link');

運行結果，成功運行

//變數前統一加$符號，以認出它是jQuery物件--var $this=$(this)

將按鈕設為disabled

//讓按鈕按一下就不能按了
$this.attr('disabled','disabled');

運行結果，點按過的按鈕就不能按了

使用siblings()來切換相鄰2個按鈕，來交互移除disabled屬性

解說siblings的用法//<button>day</button和<button>night</button>互為相鄰關系(siblings)

//移除隔壁按鈕的disable屬性
$(this).siblings('button').removeAttr('disabled');

運行結果，可看到Day的按鈕點按後，Night按鈕的disable屬性就移除了

運用var 和 , 來宣告多個變數

使用 符號"，"，來宣告多個變數。
//此段程式碼
var $this=$(this),
stylesheet=$this.data('file');
//等同於以下寫法
var $this=$(this);
var stylesheet=$this.data('file');

變數執行多個方法時，運用分行及階層式的寫法，使閱讀更明確

$this//目前點按的按鈕，如<button>day</button>
.siblings('button')//跳至隔壁的按鈕，如<button>night</button>
.removeAttr('disabled')//移除disabled的屬性
.end()//返試原先點按的按鈕，如<button>day</button>
.attr('disabled','disabled')//設定屬性為disabled，如<button disabled="disabled">day</button>

運行結果，成功運行

on的應用

解說$('button').click等同於$('button').on('click',function(){})

運行結果，成功運行