jQuery 메서드 - 종류별 분류

Selector(선택자)

• $('대상') : css 선택자를 그대로 따른다.
• children(), find(), parent(), parents(), prev(), next(), siblings()
• index(), eq()
• each() : 반복문

Event

• on()
• mouse: click(), mouseover(), mouseenter(), mouseleave(), wheel()
• keyboard: keyup(), keydown(),
• window: resize(), scroll()
• form: submit(), reset()

Animation

• show(), hide(), toggle()
• fadeIn(), fadeOut(), fadeToggle()
• slideDown(), slideUp(), slideToggle()
• animate()

DOM - HTML 관리

• empty(), remove()
• append(), appendTo(), prepend(), prependTo()
• html(), text()
• val()
• attr()

CSS - CSS 관리

• css()
• addClass(), removeCalss(), toggleClass(), hasClass()

Dimension

• width(), innerWidth(), outerWidth(), outerWidth(true)
• height(), innerHeight(), innerWidth(), innerWidth(true)

통신Ajax(Asynchronous javascript and xml)

• $.get(), $.post(), $.ajax()

 

return: $(대상)

$('대상').append('<div>hi</div>')

appendTo: ƒ (e)

설명: html을 대상안의 뒤에 넣는다.

return: $(html)

$('<div>hi</div>').appendTo('대상')

empty: ƒ ()

설명: 대상안의 html을 지운다.

$('.jq').empty()

on: ƒ (e,t,n,r)

설명: 이벤트를 등록한다.

$('.jq').on('click', function(){
// 할일
})

one: ƒ (e,t,n,r)

설명:

outerHeight: ƒ (e,t)

설명:

outerWidth: ƒ (e,t)

설명:

parent: ƒ (e,t)

설명:

parents: ƒ (e,t)

설명:

parentsUntil: ƒ (e,t)

설명:

position: ƒ ()

설명:

prepend: ƒ ()

설명: 대상안의 앞에 html을 넣는다.

return: $(대상)

$('대상').prepend('<div>hi</div>')

prependTo: ƒ (e)

설명: html을 대상안의 앞에 넣는다.

return: $(html)

$('<div>hi</div>').prependTo('대상')

prev: ƒ (e,t)

설명:

prevAll: ƒ (e,t)

설명:

prevUntil: ƒ (e,t)

설명:

promise: ƒ (e,t)

설명:

prop: ƒ (e,t)

설명:

push: ƒ push()

설명:

pushStack: ƒ (e)

설명:

queue: ƒ (t,n)

설명:

ready: ƒ (e)

설명:

remove: ƒ (e)

설명: 대상을 지운다.

$('.jq').remove()

 

val: ƒ (n)

설명: form요소(input, select ...)의 값을 반환한다.

<input type="text" id="username" value="홍길동">

var username = $('#username').val()// 홍길동
$('#username').val('홍길순')// username의 value가 '홍길순'으로 바뀐다.