20
{ jQuery JavaScript Library Han seung ho 한한한 [email protected]

webstudy jquery

Embed Size (px)

DESCRIPTION

http://hansh.krweb study jquery

Citation preview

Page 1: webstudy jquery

{jQuery

JavaScript Library

Han seung ho 한승호[email protected]

Page 2: webstudy jquery

jQuery & Basic tutorial Develop helper jQuery plug-in

Index

Page 3: webstudy jquery

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

{jQuery & Basic tuto-rial

Page 5: webstudy jquery

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

$(‘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

$(‘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

$(‘Selec-tors’).

.method(...)

example

var box2a = $(‘.box2’).find(‘a’);

.method(...);

box2a.show();

var name =

Page 9: webstudy jquery

Main-menu Html + CSS

jQuery click & hover

Sub-menuhtml + CSS

Navigation Design

Page 10: webstudy jquery

{Develop helper

Page 11: webstudy jquery

Jsfiddle

http://jsfiddle.net

Page 12: webstudy jquery

jQuery Selectors

Page 13: webstudy jquery

jQuery Plugins Inspec-tor

Page 14: webstudy jquery

{ jQuery plug-in

Page 15: webstudy jquery

http://docs.jquery.com/Plugins/Authoring

Call jQuery Call plug-in JS Call CSS

in sequence

Page 16: webstudy jquery

jQueryUI

http://jqueryui.com/

http://jsfiddle.net/shilpe/kNQS4/

Page 17: webstudy jquery

BX Slider

http://bxslider.com/

Page 18: webstudy jquery

Apycom menus

http://apycom.com/

Page 19: webstudy jquery

Flex slider

http://flex.madebymufffin.com/

Page 20: webstudy jquery

{Thank you