Inspector&j query slide
-
Upload
wei-cheng-hsu -
Category
Technology
-
view
415 -
download
1
description
Transcript of Inspector&j query slide
![Page 1: Inspector&j query slide](https://reader033.fdocument.pub/reader033/viewer/2022060109/5558bdd7d8b42aa52a8b5071/html5/thumbnails/1.jpg)
Chrome Inspector & jQuery1 Ronald Hsu 100062595 @ MIRLab
h7p://about.me/hothero20120424
12年4月24日星
![Page 2: Inspector&j query slide](https://reader033.fdocument.pub/reader033/viewer/2022060109/5558bdd7d8b42aa52a8b5071/html5/thumbnails/2.jpg)
Outline
¢Previous Course¢Chrome Inspector¢jQuery¢More Online Courses
2
12年4月24日星
![Page 3: Inspector&j query slide](https://reader033.fdocument.pub/reader033/viewer/2022060109/5558bdd7d8b42aa52a8b5071/html5/thumbnails/3.jpg)
Previous Course
¢Var: local variable¢No-‐Var: global variable declared anywhere¢Google Map Event Object: hEps://developers.google.com/maps/documentaHon/javascript/reference#MouseEvent
¢The explanaHon fault of a closure example : hEp://jsbin.com/exigiz
¢Map sample error: hEp://goo.gl/9Hl0e
3
12年4月24日星
![Page 4: Inspector&j query slide](https://reader033.fdocument.pub/reader033/viewer/2022060109/5558bdd7d8b42aa52a8b5071/html5/thumbnails/4.jpg)
Chrome Inspector
¢Elements Panel¢Resources Panel¢Network Panel¢Scripts Panel¢Timeline Panel¢Profiles Panel¢Console¢Official DocumentaHon: hEp://goo.gl/N68rh
4
12年4月24日星
![Page 5: Inspector&j query slide](https://reader033.fdocument.pub/reader033/viewer/2022060109/5558bdd7d8b42aa52a8b5071/html5/thumbnails/5.jpg)
How to open it
¢Right click on webpage anywhere -‐> click “inspect element”
¢Click -‐> Tools -‐> Developer Tools¢“View” on toolbar -‐> Developer -‐> Developer Tools
5
12年4月24日星
![Page 6: Inspector&j query slide](https://reader033.fdocument.pub/reader033/viewer/2022060109/5558bdd7d8b42aa52a8b5071/html5/thumbnails/6.jpg)
Elements Panel
¢DOM tree¢Allow inspecHon and on-‐the-‐fly ediHng of DOM elements
¢More curious informaHon�Styles, Metrics, ProperHes, Others
¢DEMO�On-‐the-‐fly ediHng: hEp://goo.gl/bXvKd�Metrics & others: hEp://goo.gl/kLWnX�Right-‐Lock: hEp://goo.gl/Y7IIE
6
12年4月24日星
![Page 7: Inspector&j query slide](https://reader033.fdocument.pub/reader033/viewer/2022060109/5558bdd7d8b42aa52a8b5071/html5/thumbnails/7.jpg)
Resource Panel
¢Category resource(Images, Scripts, ...)�hEp://pinterest.com/
¢HTML5 Database(Keyword: Storage API)¢Cookie�hEp://mirlab.org/users/ronald.hsu/web_course_demo/cookie02.htm
7
12年4月24日星
![Page 8: Inspector&j query slide](https://reader033.fdocument.pub/reader033/viewer/2022060109/5558bdd7d8b42aa52a8b5071/html5/thumbnails/8.jpg)
Network, Scripts, Timeline, Profile Panel
¢Network�The loading Hme of those resources
¢Scripts� Javascript Debugger(Breakpoints)�hEp://mirlab.org/users/ronald.hsu/web_course_demo/keyboardevent01.htm
¢Timeline�The loading Hme of each operaHon detail
¢Profile�Monitoring CPU & HEAP usage rate in client 8
12年4月24日星
![Page 9: Inspector&j query slide](https://reader033.fdocument.pub/reader033/viewer/2022060109/5558bdd7d8b42aa52a8b5071/html5/thumbnails/9.jpg)
Console Panel
¢$(“id”): select a element¢inspect(id): showing content of this element¢dir($(“id”)): showing aEribute of this¢DEMO: hEp://mirlab.org/users/ronald.hsu/web_course_demo/keyboardevent01.htm
¢Firebug Command Line API�hEp://geqirebug.com/wiki/index.php/Command_Line_API
9
12年4月24日星
![Page 10: Inspector&j query slide](https://reader033.fdocument.pub/reader033/viewer/2022060109/5558bdd7d8b42aa52a8b5071/html5/thumbnails/10.jpg)
jQuery
¢jQuery 是⼀一套物件導向式簡潔輕量級的 JavaScript Library。透過 jQuery 你可以用最精簡少量的程式碼來輕鬆達到跨瀏覽器 DOM 操作、事件處理、設計頁面元素動態效果、AJAX 互動等。
¢jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animaDng, and Ajax interacDons for rapid web development. jQuery is designed to change the way that you write JavaScript.
¢摘自:hHp://jquery.com/、 hHp://webdesign.kerthis.com/jquery/ 10
12年4月24日星
![Page 11: Inspector&j query slide](https://reader033.fdocument.pub/reader033/viewer/2022060109/5558bdd7d8b42aa52a8b5071/html5/thumbnails/11.jpg)
Get Started
¢In javascript�window.document.form1.Text1.value=‘ABC’; �document.getElementById(‘Text1’).value=‘ABC’; �document.all(‘Text1’).value=‘ABC’; //(Only IE)
¢In jQuery�$(‘#Text1’).val(‘ABC’);
¢DEMO: hEp://goo.gl/vvuTk
11
12年4月24日星
![Page 12: Inspector&j query slide](https://reader033.fdocument.pub/reader033/viewer/2022060109/5558bdd7d8b42aa52a8b5071/html5/thumbnails/12.jpg)
More Powerful
¢To hide a div in javascript
¢In jQuery
¢DEMO: hEp://goo.gl/Jb9Io 12
12年4月24日星
![Page 13: Inspector&j query slide](https://reader033.fdocument.pub/reader033/viewer/2022060109/5558bdd7d8b42aa52a8b5071/html5/thumbnails/13.jpg)
More Powerful(Cont.)
¢Javascript
¢jQuery
¢DEMO: hEp://goo.gl/uuDUj13
12年4月24日星
![Page 14: Inspector&j query slide](https://reader033.fdocument.pub/reader033/viewer/2022060109/5558bdd7d8b42aa52a8b5071/html5/thumbnails/14.jpg)
Selector
¢Syntax: $(selectors);¢Tag selector� jQuery: $(“a”)� JS: document.getElementsByTagName(“a”)�CSS: a {}
¢Id selector� jQuery: $(“#container”)
¢Class selector� jQuery: $(“.content”)
14
12年4月24日星
![Page 15: Inspector&j query slide](https://reader033.fdocument.pub/reader033/viewer/2022060109/5558bdd7d8b42aa52a8b5071/html5/thumbnails/15.jpg)
Selector(Cont.)
¢Base filters: (First / Last / not)� :first -‐> The first element in definiHon
¢$(‘tr:first’) : The first tr¢$(‘td:first’) : The first td
� :last -‐> The last element in definiHon¢$(‘tr:last) : The last tr¢$(‘td:last’) : The last td
�Not ¢$(‘tr:not(:first)’) : All of tr elements except for the first.
¢DEMO: hEp://goo.gl/jlFuZ15
12年4月24日星
![Page 16: Inspector&j query slide](https://reader033.fdocument.pub/reader033/viewer/2022060109/5558bdd7d8b42aa52a8b5071/html5/thumbnails/16.jpg)
Selector(Cont.)
¢Basic filters: (Even / Odd / Eq)� :even� :odd� :eq
¢DEMO: hEp://goo.gl/teMiq
16
12年4月24日星
![Page 17: Inspector&j query slide](https://reader033.fdocument.pub/reader033/viewer/2022060109/5558bdd7d8b42aa52a8b5071/html5/thumbnails/17.jpg)
Selector(Cont.)
¢Content filters: (contains / has / empty)�$(‘tr:contains(“BB”)’) : Its content contains ‘BB’�$(‘tr :not(:has(th))’):The ‘tr’ doesn’t have ‘th’
¢Contains:string v.s. has:element�$(‘td:empty’).html(‘N/A’);
¢DEMO: hEp://goo.gl/LJH1W
17
12年4月24日星
![Page 18: Inspector&j query slide](https://reader033.fdocument.pub/reader033/viewer/2022060109/5558bdd7d8b42aa52a8b5071/html5/thumbnails/18.jpg)
Selector(Cont.)
¢Visibility filters: (hidden / visible)�$(‘tr:hidden’).fadeIn(‘slow’); -‐> with animaHon�$(‘tr:visible’).hide(‘slow’); -‐> with animaHon
¢DEMO: hEp://goo.gl/SDk4b
18
12年4月24日星
![Page 19: Inspector&j query slide](https://reader033.fdocument.pub/reader033/viewer/2022060109/5558bdd7d8b42aa52a8b5071/html5/thumbnails/19.jpg)
Selector -‐ AEribute Filters
¢[aEribute = value]�$(‘td[class=“test”]’)
¢Regular Expression�^=
¢$(‘a[href^=“y”]’): href start from “y”�$=
¢$(a[href$=”.com”]): href end with “.com” �*=
¢$(‘a[href*=“y”]’): href contains “y”¢DEMO: hEp://goo.gl/HY1nl 19
12年4月24日星
![Page 20: Inspector&j query slide](https://reader033.fdocument.pub/reader033/viewer/2022060109/5558bdd7d8b42aa52a8b5071/html5/thumbnails/20.jpg)
Selector(Advanced)
¢Child object selecHon� :nth-‐child(index): (Index start from 1)� :first-‐child� :last-‐child� :only-‐child
¢DEMO: hEp://goo.gl/dvgNl
20
12年4月24日星
![Page 21: Inspector&j query slide](https://reader033.fdocument.pub/reader033/viewer/2022060109/5558bdd7d8b42aa52a8b5071/html5/thumbnails/21.jpg)
Selector(Advanced)
¢Form object selecHon� :input
¢specific input type¢:text: ¢:password: ¢:radio: ¢:checkbox: ¢others: image, reset, buEon, file, ... etc.
¢DEMO: hEp://goo.gl/XDqrT、hEp://goo.gl/HZgSk
21
12年4月24日星
![Page 22: Inspector&j query slide](https://reader033.fdocument.pub/reader033/viewer/2022060109/5558bdd7d8b42aa52a8b5071/html5/thumbnails/22.jpg)
jQuery AEributes
¢Get�aEr(name)
¢Set�aEr(name, value)
¢Delete� removeAEr(name)
¢
22
12年4月24日星
![Page 23: Inspector&j query slide](https://reader033.fdocument.pub/reader033/viewer/2022060109/5558bdd7d8b42aa52a8b5071/html5/thumbnails/23.jpg)
jQuery CSS
¢Get�css(name)
¢Set�css(name, value)
¢Example�$("p").css("opacity","0.5");�$("p").css({color:"red","background-‐color":"blue"});
¢Offset (Different definiHon in each browser)�$("p").offset({ top: 5, le�: 5})�$("p").offset().le� 23
12年4月24日星
![Page 24: Inspector&j query slide](https://reader033.fdocument.pub/reader033/viewer/2022060109/5558bdd7d8b42aa52a8b5071/html5/thumbnails/24.jpg)
jQuery Effects
¢Some FuncHons�Previous menHon: show, hide, fadeIn, toggle...�slideDown�slideToggle�Others
¢More: hEp://webdesign.kerthis.com/jquery/jquery_effects
24
12年4月24日星
![Page 25: Inspector&j query slide](https://reader033.fdocument.pub/reader033/viewer/2022060109/5558bdd7d8b42aa52a8b5071/html5/thumbnails/25.jpg)
jQuery Plugin
¢Media Player¢Slideshow¢jQuery UI¢Image Galleries¢Form Filtering¢Document Viewer¢Dialog Box¢More: The God of google
25
12年4月24日星
![Page 26: Inspector&j query slide](https://reader033.fdocument.pub/reader033/viewer/2022060109/5558bdd7d8b42aa52a8b5071/html5/thumbnails/26.jpg)
Reference
¢hEp://webdesign.kerthis.com/jquery/¢hEp://ithelp.ithome.com.tw/js-‐ninja/arHcles/page/1
¢hEp://ithelp.ithome.com.tw/quesHon/10090567
¢hEp://docs.jquery.com/Main_Page¢Ajax�hEp://www.ibm.com/developerworks/cn/xml/x-‐ajaxjquery.html
26
12年4月24日星
![Page 27: Inspector&j query slide](https://reader033.fdocument.pub/reader033/viewer/2022060109/5558bdd7d8b42aa52a8b5071/html5/thumbnails/27.jpg)
More
¢URL Parsing with javascript�hEp://jsbin.com/eqicig/2
¢Extensions for web developers/designer�chrome extensions "web developer" tools
27
12年4月24日星
![Page 28: Inspector&j query slide](https://reader033.fdocument.pub/reader033/viewer/2022060109/5558bdd7d8b42aa52a8b5071/html5/thumbnails/28.jpg)
More online courses
¢Codecademy(Simple & Step by step)�hEp://www.codecademy.com
¢Coursea(Other domains)�hEps://www.coursera.org/
¢Code School(Step by step & Video)�hEp://www.codeschool.com/
¢Stanford Open Course 2012(Other domains)�hEp://stanford.edu/online/courses
28
12年4月24日星
![Page 29: Inspector&j query slide](https://reader033.fdocument.pub/reader033/viewer/2022060109/5558bdd7d8b42aa52a8b5071/html5/thumbnails/29.jpg)
Thanks for your listening
¢Q & A
29
12年4月24日星