webstudy jquery
Download as PPTX, PDF0 likes1,003 views
jQuery is a JavaScript library that makes HTML document manipulation and event handling easier. It works by allowing JavaScript code to select elements using CSS-style selectors and then apply methods to modify properties or trigger actions. Common uses of jQuery include showing/hiding elements, fading elements in/out, and animating element properties. Plugins extend jQuery's functionality for tasks like building menus, image sliders, and other interactive elements.
![$(‘Selectors’). method(...);
example
$(‘#box1’). hide();
$(‘.box2 a’). fadeout();
$(‘#box1, .box2 a’). show();
$(‘div’). css(‘display', none);
http://oscarotero.com/jquery/
API [Application Program Interface]
http://visualjquery.com/](https://image.slidesharecdn.com/2webstudyjquery3week-120218141325-phpapp01/85/webstudy-jquery-6-320.jpg)
webstudy jquery
- 1. jQuery { JavaScript Library [email protected] Han seung ho 한승호
- 2. Index jQuery & Basic tutorial Develop helper jQuery plug-in
- 3. Ready 1. TeamViewer http://www.teamviewer.com http://www.teamviewer.com/download/TeamViewerQS_ko.exe 2. Google chrome setup https://www.google.com/chrome 3. Google chrome extension Chrome web store jQuery Selectors jQuery Plugins Inspector
- 4. { jQuery & Basic tutorial
- 5. JavaScript Library jQuery is designed to change the way that you write JavaScript. 9260 line (1.71 dev) 9260 line + 1 line <script src="jquery.js"></script> <script> $(‘div’).show(); </script> http://jquery.com/
- 6. $(‘Selectors’). method(...); example $(‘#box1’). hide(); $(‘.box2 a’). fadeout(); $(‘#box1, .box2 a’). show(); $(‘div’). css(‘display', none); http://oscarotero.com/jquery/ API [Application Program Interface] http://visualjquery.com/
- 7. $(‘Selectors’). .method(...) .method(...); example $(‘#box1’).show().css(‘left', 300).animate( { left: 600 }, 1000 ).fadeout(); $(‘#box1’).show().addClass('over'); http://cfs.tistory.com/custom/blog/68/68469 8/skin/images/jquery.html http://jsfiddle.net/shilpe/r7MgY/11840/
- 8. var name = $(‘Selectors’). .method(...) .method(...); example var box2a = $(‘.box2’).find(‘a’); box2a.show();
- 9. Navigation Design Main-menu Html + CSS jQuery click & hover Sub-menu html + CSS
- 10. { Develop helper
- 11. Jsfiddle http://jsfiddle.net
- 12. jQuery Selectors
- 14. { jQuery plug-in
- 15. in sequence Call jQuery Call plug-in JS Call CSS http://docs.jquery.com/Plugins/Authoring
- 16. jQueryUI http://jqueryui.com/ http://jsfiddle.net/shilpe/kNQS4/
- 17. BX Slider http://bxslider.com/
- 18. Apycom menus http://apycom.com/
- 19. Flex slider http://flex.madebymufffin.com/
- 20. { Thank you