Inspector&j query slide
29
Chrome Inspector & jQuery 1 Ronald Hsu 100062595 @ MIRLab h7p://about.me/hothero 20120424 12年4月24日星
-
Upload
wei-cheng-hsu -
Category
Technology
-
view
415 -
download
1
description
It's a NTHU Course Slide
Transcript of Inspector&j query slide
Chrome Inspector & jQuery1 Ronald Hsu 100062595 @ MIRLab
h7p://about.me/hothero20120424
12年4月24日星
Outline
¢Previous Course¢Chrome Inspector¢jQuery¢More Online Courses
2
12年4月24日星
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日星
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日星
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日星
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日星
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日星
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日星
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日星
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日星
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日星
More Powerful
¢To hide a div in javascript
¢In jQuery
¢DEMO: hEp://goo.gl/Jb9Io 12
12年4月24日星
More Powerful(Cont.)
¢Javascript
¢jQuery
¢DEMO: hEp://goo.gl/uuDUj13
12年4月24日星
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日星
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日星
Selector(Cont.)
¢Basic filters: (Even / Odd / Eq)� :even� :odd� :eq
¢DEMO: hEp://goo.gl/teMiq
16
12年4月24日星
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日星
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日星
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日星
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日星
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日星
jQuery AEributes
¢Get�aEr(name)
¢Set�aEr(name, value)
¢Delete� removeAEr(name)
¢
22
12年4月24日星
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日星
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日星
jQuery Plugin
¢Media Player¢Slideshow¢jQuery UI¢Image Galleries¢Form Filtering¢Document Viewer¢Dialog Box¢More: The God of google
25
12年4月24日星
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日星
More
¢URL Parsing with javascript�hEp://jsbin.com/eqicig/2
¢Extensions for web developers/designer�chrome extensions "web developer" tools
27
12年4月24日星
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日星
Thanks for your listening
¢Q & A
29
12年4月24日星
