webstudy jquery
-
Upload
han-seung-ho -
Category
Technology
-
view
114 -
download
2
description
Transcript of webstudy jquery
![Page 2: webstudy jquery](https://reader031.fdocuments.net/reader031/viewer/2022012922/54c71dab4a79595e4e8b45c6/html5/thumbnails/2.jpg)
jQuery & Basic tutorial Develop helper jQuery plug-in
Index
![Page 3: webstudy jquery](https://reader031.fdocuments.net/reader031/viewer/2022012922/54c71dab4a79595e4e8b45c6/html5/thumbnails/3.jpg)
1. TeamViewer http://www.teamviewer.com http://www.teamviewer.com/download/TeamViewerQS_ko.exe
2. Google chrome setuphttps://www.google.com/chrome
3. Google chrome extension Chrome web store jQuery Selectors jQuery Plugins Inspector
Ready
![Page 4: webstudy jquery](https://reader031.fdocuments.net/reader031/viewer/2022012922/54c71dab4a79595e4e8b45c6/html5/thumbnails/4.jpg)
{jQuery & Basic tuto-rial
![Page 5: webstudy jquery](https://reader031.fdocuments.net/reader031/viewer/2022012922/54c71dab4a79595e4e8b45c6/html5/thumbnails/5.jpg)
jQuery is designed to change the way that you write JavaScript.
<script src="jquery.js"></script>
<script> $(‘div’).show();</script>
http://jquery.com/
JavaScript Library
9260 line + 1 line9260 line (1.71 dev)
![Page 6: webstudy jquery](https://reader031.fdocuments.net/reader031/viewer/2022012922/54c71dab4a79595e4e8b45c6/html5/thumbnails/6.jpg)
$(‘Selectors’).
method(...);
http://visualjquery.com/
example
$(‘#box1’). hide();
$(‘#box1, .box2 a’). show();
$(‘.box2 a’). fadeout();
$(‘div’). css(‘display', none);
http://oscarotero.com/jquery/API [Application Program Interface]
![Page 7: webstudy jquery](https://reader031.fdocuments.net/reader031/viewer/2022012922/54c71dab4a79595e4e8b45c6/html5/thumbnails/7.jpg)
$(‘Selec-tors’).
.method(...)
example
$(‘#box1’).show().css(‘left', 300).animate( { left: 600 }, 1000 ).fadeout();
.method(...);
$(‘#box1’).show().addClass('over');
http://jsfiddle.net/shilpe/r7MgY/11840/
http://cfs.tistory.com/custom/blog/68/684698/skin/images/jquery.html
![Page 8: webstudy jquery](https://reader031.fdocuments.net/reader031/viewer/2022012922/54c71dab4a79595e4e8b45c6/html5/thumbnails/8.jpg)
$(‘Selec-tors’).
.method(...)
example
var box2a = $(‘.box2’).find(‘a’);
.method(...);
box2a.show();
var name =
![Page 9: webstudy jquery](https://reader031.fdocuments.net/reader031/viewer/2022012922/54c71dab4a79595e4e8b45c6/html5/thumbnails/9.jpg)
Main-menu Html + CSS
jQuery click & hover
Sub-menuhtml + CSS
Navigation Design
![Page 10: webstudy jquery](https://reader031.fdocuments.net/reader031/viewer/2022012922/54c71dab4a79595e4e8b45c6/html5/thumbnails/10.jpg)
{Develop helper
![Page 12: webstudy jquery](https://reader031.fdocuments.net/reader031/viewer/2022012922/54c71dab4a79595e4e8b45c6/html5/thumbnails/12.jpg)
jQuery Selectors
![Page 13: webstudy jquery](https://reader031.fdocuments.net/reader031/viewer/2022012922/54c71dab4a79595e4e8b45c6/html5/thumbnails/13.jpg)
jQuery Plugins Inspec-tor
![Page 14: webstudy jquery](https://reader031.fdocuments.net/reader031/viewer/2022012922/54c71dab4a79595e4e8b45c6/html5/thumbnails/14.jpg)
{ jQuery plug-in
![Page 15: webstudy jquery](https://reader031.fdocuments.net/reader031/viewer/2022012922/54c71dab4a79595e4e8b45c6/html5/thumbnails/15.jpg)
http://docs.jquery.com/Plugins/Authoring
Call jQuery Call plug-in JS Call CSS
in sequence
![Page 16: webstudy jquery](https://reader031.fdocuments.net/reader031/viewer/2022012922/54c71dab4a79595e4e8b45c6/html5/thumbnails/16.jpg)
jQueryUI
http://jqueryui.com/
http://jsfiddle.net/shilpe/kNQS4/
![Page 19: webstudy jquery](https://reader031.fdocuments.net/reader031/viewer/2022012922/54c71dab4a79595e4e8b45c6/html5/thumbnails/19.jpg)
Flex slider
http://flex.madebymufffin.com/
![Page 20: webstudy jquery](https://reader031.fdocuments.net/reader031/viewer/2022012922/54c71dab4a79595e4e8b45c6/html5/thumbnails/20.jpg)
{Thank you