Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
08 - js frontend & jQuery - OpenWebSchool
Search
openwebschool
August 16, 2012
Programming
3
280
08 - js frontend & jQuery - OpenWebSchool
openwebschool
August 16, 2012
Tweet
Share
More Decks by openwebschool
See All by openwebschool
11 - CodeIgniter - OpenWebSchool
openwebschool
1
340
09 - Node.JS - OpenWebSchool
openwebschool
1
390
07 - Javascript - OpenWebSchool
openwebschool
3
340
05 - MySQL - OpenWebSchool
openwebschool
1
250
06 - PHP & MySQL - OpenWebSchool
openwebschool
1
270
03 - PHP II - OpenWebSchool
openwebschool
2
390
04 - CSS - OpenWebSchool
openwebschool
4
360
01 - W3 intro - OpenWebSchool
openwebschool
3
240
02 - PHP I - OpenWebSchool
openwebschool
3
270
Other Decks in Programming
See All in Programming
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
260
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
730
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
660
Amazon Bedrock Multi Agentsを試してきた
tm2
1
280
CNCF Project の作者が考えている OSS の運営
utam0k
5
690
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
sappoRo.R #12 初心者セッション
kosugitti
0
230
最近のVS Codeで気になるニュース 2025/01
74th
1
250
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
490
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
SwiftUI Viewの責務分離
elmetal
PRO
0
140
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
1
140
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Typedesign – Prime Four
hannesfritz
40
2.5k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Agile that works and the tools we love
rasmusluckow
328
21k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Transcript
網頁前端 & jQuery
目前瀏覽器裡跑的是 JS
修改網頁內容 從外部擷取資料 甚至存取 Webcam ... 可以做很多很多事情
但 JS 語言規範本身沒有輸入輸出
None
DOM Document Object Model
瀏覽器塞了一些野生的物件
所有的輸入輸出 都可以由這些野生的變數操作
console.log(‘hello’)
其中主要負責網頁內容的是
document
網頁上的東西 都和 document 的內容有對應關係
只要這物件有東西被修改 網頁也會隨之改變,反之亦然
困境
但是 DOM 這套 API 設計的實在太醜太難用了
document.getElementById
而且每套瀏覽器 實作的 API 都不盡相同 就是你,IE
使得網頁前端開發的 難度與維護成本大增
曙光
John Resig
2006 年釋出 jQuery 第一個版本
jQuery
前端 JS 函式庫
讓 DOM 操作輕鬆了許多 造福千千萬萬網頁前端開發者
jQuery 功能 & 特色
事件處理 特效 & 動畫 Ajax 跨瀏覽器 CSS 選擇器 DOM 遍歷
使用方法
去 jQuery 官網下載
<script src=”jquery.js”></script> <script src=”your-code.js”></script>
jQuery 會在全域塞入野生的物件 jQuery 或 $
將原本 DOM 物件傳入 $ 函式 就可以得到 jQuery 物件
選擇器
CSS 怎麼選就怎麼選
$(‘p’); $(‘#id’); $(‘.class’); $(‘p#id’); $(‘p a’);
操作 HTML 屬性
$(‘#a’).text(); // 取得 #a 文字 $(‘#a’).text(‘hello’); // 將 #a 文字設為
hello
$(‘#a’).attr(‘src’); // 取得 #a 的 src 屬性 $(‘#a’).attr(‘src’, ‘ha’); //
將 #a 的 src 設為 ha
$(‘#a’).addClass(‘banana’); // 新增 banana class $(‘#a’).removeClass(‘banana’); // 移除 banana class
$(‘#a’).hasClass(‘banana’); // 判斷 #a 是否有 banana 這個 class
$(‘#a’).html(); // 取得 #a 底下所有 html $(‘#a’).html(‘<p>haha</p>’); // 設定 #a
底下所有 html $(‘input#a’).val(); // 取得 #a 輸入的數值 $(‘input#a’).val(100); // 設定 #a 輸入的數值
事件處理
所有的輸入都是事件
監聽並且設置 callcack 函數 等事件觸發時做出響應
$(‘#a’).click(function () { console.log(‘#a clicked!’) }); // 當 #a 被點擊時即觸發綁定之
callback $(‘#a’).click(); // 主動觸發 #a 點擊事件
雙擊 滑鼠移上去 滑鼠移進去 壓下按鍵 滾動 大小改變 表單聚焦 表單送出 dblckick hover
mousein keydown scroll resize focus submit
$(‘#a’).click( callback ); $(‘#a’).on(‘click’, callback ); // 其實 click 等等方法都是
on 的簡寫 // on(事件名稱, callback) 全部通吃 $(‘#a’).off(‘click’, callback ); // 取消監聽 click 事件 $(‘#a’).one(‘click’, callback ); // 只監聽第一次 click 事件 $(‘#a’).trigger(‘click’); // 主動觸發 click 事件
$(document).ready(function () { console.log(‘ready to go!’); }); // 事件:DOM 載入完成
// 在 DOM 載完之前對 DOM 作操作可能會爆炸 // 所以等載完後再來做事情 // 做為程式初始化的起點,有點像 C 的 main $(function () { console.log(‘ready to go!’); }); // 因為每次都會用到,所以能簡寫成這樣
事件輸入會變成 callback 參數進來
$(‘#a’).mousemove(function (event) { console.log(event.offsetX); }); // 事件:滑鼠移動 // 從 event
傳入所有此事件相關資料 // 例如目前滑鼠的位置
DOM 遍歷
有時候光有選擇器還不夠 可能會需要在節點間遊走
$(‘#a’).parent().text(‘haha’); // 選取 #a 的父節點 $(‘#a’).prev().text(‘haha’); // 選取 #a 同一層但是在前面的所有節點
$(‘p’).eq(2).text(‘haha’); // 選取第三個選到的 p
CSS
$(‘#a’).css(‘margin’); // 取得 #a 的 margin 數值 $(‘#a’).css(‘margin’, 50); //
設定 #a 的 margin 數值
$(‘#a’).css({ margin: 100, width: 200, ‘font-size’: ‘200%’, fontWeight: ‘bold’ });
// 一次設定多筆樣式 // 無法表示的可以用字串表示
$(‘#a’).width(); // 取得 #a 的 width 數值 $(‘#a’).height(50); // 設定
#a 的 height 數值 $(‘#a’).offset(); // { top: ..., left: ... } // 取得 #a 的相對母元素位置 $(‘#a’).scrollTop(50); // 設定 #a 的滾動的數值
特效與動畫
$(‘#a’).hide(); // 隱藏 #a $(‘#a’).show(); // 顯示 #a
$(‘#a’).fadeIn(); // 淡入,預設花費時間為一秒 $(‘#a’).fadeOut(500); // 淡出,設定花費時間為半秒 $(‘#a’).fadeTo(0.5, 500); // 用半秒的時間讓透明度變成
0.5
$(‘#a’).slideDown(); // 滑下來,預設花一秒 $(‘#a’).slideUp(500); // 滑上去,設定花費時間為半秒
$(‘#a’).animate({ margin: 100, width: 200, ‘font-size’: ‘200%’, fontWeight: ‘bold’ },
500, function () { console.log(‘animation done’); }); // 花半秒時間變成指定的樣式 // 花費時間,easing,callback 都是可選
Ajax
原本瀏覽網頁擷取資料時 會需要切換然後重新載入頁面
現在改由 JS 在背後偷偷去 擷取,就不用更新整個頁面了
$.get(‘banana.json’, { data: 123 }, function (data) { console.log(‘data retrieved!’);
}, ‘json’); // 回傳的資料一樣是從 callback 的參數傳入 // 除了資源位址,傳送過去的資料,請求成功 // 的 callback 和傳送資料格式都是可選的 $.post( ... ); // 還有 post
$.ajax({ url: ‘banana/apple’, data: 100, error: function (error) { console.log(‘failed!’);
}, success: function (data) { console.log(‘success!’); } }); // $.get $.post 都是 $.ajax 的簡寫 // 有一大堆可選的東西可以填