webstudy jquery

Preview:

DESCRIPTION

http://hansh.krweb study jquery

Citation preview

{jQuery

JavaScript Library

Han seung ho 한승호penguns@naver.com

jQuery & Basic tutorial Develop helper jQuery plug-in

Index

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

{jQuery & Basic tuto-rial

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)

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

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

$(‘Selec-tors’).

.method(...)

example

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

.method(...);

box2a.show();

var name =

Main-menu Html + CSS

jQuery click & hover

Sub-menuhtml + CSS

Navigation Design

{Develop helper

Jsfiddle

http://jsfiddle.net

jQuery Selectors

jQuery Plugins Inspec-tor

{ jQuery plug-in

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

Call jQuery Call plug-in JS Call CSS

in sequence

jQueryUI

http://jqueryui.com/

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

BX Slider

http://bxslider.com/

Apycom menus

http://apycom.com/

Flex slider

http://flex.madebymufffin.com/

{Thank you

Recommended