It's a NTHU Course Slide

1. Chrome Inspector & jQuery
1 Ronald
Hsu
100062595
@
MIRLab
h7p://about.me/hothero
20120424
12年4月24日星

2. Outline
¢Previous
Course
¢Chrome
Inspector
¢jQuery
¢More
Online
Courses
2
12年4月24日星

3. 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日星

4. 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日星

5. 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日星

6. 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日星

7. 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日星

8. 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日星

9. 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日星

10. 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日星

11. 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日星

12. More
Powerful
¢To
hide
a
div
in
javascript
¢In
jQuery
¢DEMO:
hEp://goo.gl/Jb9Io 12
12年4月24日星

13. More
Powerful(Cont.)
¢Javascript
¢jQuery
¢DEMO:
hEp://goo.gl/uuDUj
13
12年4月24日星

14. 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日星

15. 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/jlFuZ
15
12年4月24日星

16. Selector(Cont.)
¢Basic
filters:
(Even
/
Odd
/
Eq)
— :even
— :odd
— :eq
¢DEMO:
hEp://goo.gl/teMiq
16
12年4月24日星

17. 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日星

18. 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日星

19. 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日星

20. 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日星

21. 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日星

22. jQuery
AEributes
¢Get
— aEr(name)
¢Set
— aEr(name,
value)
¢Delete
— removeAEr(name)
¢
22
12年4月24日星

23. 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日星

24. 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日星

25. jQuery
Plugin
¢Media
Player
¢Slideshow
¢jQuery
UI
¢Image
Galleries
¢Form
Filtering
¢Document
Viewer
¢Dialog
Box
¢More:
The
God
of
google
25
12年4月24日星

26. 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日星

27. More
¢URL
Parsing
with
javascript
— hEp://jsbin.com/eqicig/2
¢Extensions
for
web
developers/designer
— chrome
extensions
"web
developer"
tools
27
12年4月24日星

28. 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日星

29. Thanks
for
your
listening
¢Q
&
A
29
12年4月24日星