Search

jQuery 기본 ꡬ문

jQuery 객체

jQueryμ—μ„œλŠ” μ„ νƒμžλ₯Ό 톡해 μ„ νƒν•œ μš”μ†Œλ“€μ„ jQuery 객체둜 λ°˜ν™˜ν•©λ‹ˆλ‹€.
$(μ„ νƒμž)
JavaScript
볡사
β€’
κΈ°λ³Έ ν˜•μ‹: $(μ„ νƒμž)
β€’
μ˜ˆμ‹œ: $('#id'), $('.class'), $('div')
β€’
jQuery κ°μ²΄λŠ” λ°°μ—΄κ³Ό μœ μ‚¬ν•œ ν˜•νƒœλ‘œ μš”μ†Œλ“€μ„ μ €μž₯

jQuery λ©”μ†Œλ“œ

jQuery 객체에 λŒ€ν•΄ μˆ˜ν–‰ν•  수 μžˆλŠ” λ‹€μ–‘ν•œ λ©”μ†Œλ“œλ“€μ΄ μ œκ³΅λ©λ‹ˆλ‹€.
λΆ„λ₯˜
μ£Όμš” λ©”μ†Œλ“œ
이벀트 처리
click(), hover(), on()
효과
hide(), show(), toggle(), fadeIn()
DOM μ‘°μž‘
append(), remove(), html(), text()
속성 κ΄€λ ¨
attr(), prop(), addClass(), removeClass()
탐색
find(), parent(), children(), siblings()

이벀트 λ©”μ†Œλ“œ 상세 μ„€λͺ…

λ©”μ†Œλ“œ
μ„€λͺ…
μ˜ˆμ‹œ
click()
μš”μ†Œλ₯Ό ν΄λ¦­ν–ˆμ„ λ•Œ 싀행될 ν•¨μˆ˜λ₯Ό μ •μ˜
$('#btn').click(function() { });
hover()
마우슀λ₯Ό μ˜¬λ Έμ„ λ•Œμ™€ 벗어났을 λ•Œ 싀행될 ν•¨μˆ˜λ₯Ό 각각 μ •μ˜
$('#element').hover(function() { /* 마우슀 μ§„μž… */}, function() { /* 마우슀 μ΄νƒˆ */});
on()
ν•˜λ‚˜ μ΄μƒμ˜ μ΄λ²€νŠΈμ— λŒ€ν•œ ν•Έλ“€λŸ¬λ₯Ό μ—°κ²°, λ™μ μœΌλ‘œ μƒμ„±λœ μš”μ†Œμ—λ„ 적용 κ°€λŠ₯
$('#div').on('click mouseover', function() { /* 이벀트 처리 */});

효과 λ©”μ†Œλ“œ 상세 μ„€λͺ…

λ©”μ†Œλ“œ
μ„€λͺ…
μ˜ˆμ‹œ
hide()
μš”μ†Œλ₯Ό μˆ¨κΈ°λŠ” λ©”μ†Œλ“œ
$('#element').hide();
show()
μˆ¨κ²¨μ§„ μš”μ†Œλ₯Ό ν‘œμ‹œν•˜λŠ” λ©”μ†Œλ“œ
$('#element').show();
toggle()
μš”μ†Œμ˜ ν‘œμ‹œ/μˆ¨κΉ€ μƒνƒœλ₯Ό μ „ν™˜ν•˜λŠ” λ©”μ†Œλ“œ
$('#element').toggle();
fadeIn()
점차적으둜 μš”μ†Œλ₯Ό λ‚˜νƒ€λ‚˜κ²Œ ν•˜λŠ” λ©”μ†Œλ“œ
$('#element').fadeIn('slow');

DOM μ‘°μž‘ λ©”μ†Œλ“œ 상세 μ„€λͺ…

λ©”μ†Œλ“œ
μ„€λͺ…
μ˜ˆμ‹œ
append()
μ„ νƒν•œ μš”μ†Œμ˜ 끝에 μƒˆλ‘œμš΄ μ½˜ν…μΈ λ₯Ό μΆ”κ°€ν•˜λŠ” λ©”μ†Œλ“œ
$('#div').append('μƒˆλ‘œμš΄ λ‚΄μš©');
remove()
μ„ νƒν•œ μš”μ†Œλ₯Ό DOMμ—μ„œ μ œκ±°ν•˜λŠ” λ©”μ†Œλ“œ
$('#element').remove();
html()
μš”μ†Œμ˜ HTML μ½˜ν…μΈ λ₯Ό κ°€μ Έμ˜€κ±°λ‚˜ μ„€μ •ν•˜λŠ” λ©”μ†Œλ“œ
$('#div').html('μƒˆλ‘œμš΄ HTML');
text()
μš”μ†Œμ˜ ν…μŠ€νŠΈ μ½˜ν…μΈ λ₯Ό κ°€μ Έμ˜€κ±°λ‚˜ μ„€μ •ν•˜λŠ” λ©”μ†Œλ“œ
$('#div').text('μƒˆλ‘œμš΄ ν…μŠ€νŠΈ');

속성 κ΄€λ ¨ λ©”μ†Œλ“œ 상세 μ„€λͺ…

λ©”μ†Œλ“œ
μ„€λͺ…
μ˜ˆμ‹œ
attr()
HTML 속성을 κ°€μ Έμ˜€κ±°λ‚˜ μ„€μ •ν•˜λŠ” λ©”μ†Œλ“œ
$('#img').attr('src', 'image.jpg');
prop()
JavaScript ν”„λ‘œνΌν‹°λ₯Ό κ°€μ Έμ˜€κ±°λ‚˜ μ„€μ •ν•˜λŠ” λ©”μ†Œλ“œ
$('#checkbox').prop('checked', true);
addClass()
μ„ νƒν•œ μš”μ†Œμ— ν•˜λ‚˜ μ΄μƒμ˜ 클래슀λ₯Ό μΆ”κ°€ν•˜λŠ” λ©”μ†Œλ“œ
$('#div').addClass('highlight');
removeClass()
μ„ νƒν•œ μš”μ†Œμ—μ„œ ν•˜λ‚˜ μ΄μƒμ˜ 클래슀λ₯Ό μ œκ±°ν•˜λŠ” λ©”μ†Œλ“œ
$('#div').removeClass('highlight');

탐색 λ©”μ†Œλ“œ 상세 μ„€λͺ…

λ©”μ†Œλ“œ
μ„€λͺ…
μ˜ˆμ‹œ
find()
μ„ νƒν•œ μš”μ†Œμ˜ ν•˜μœ„ μš”μ†Œ μ€‘μ—μ„œ νŠΉμ • μš”μ†Œλ₯Ό μ°ΎλŠ” λ©”μ†Œλ“œ
$('#div').find('.item');
parent()
μ„ νƒν•œ μš”μ†Œμ˜ λΆ€λͺ¨ μš”μ†Œλ₯Ό μ„ νƒν•˜λŠ” λ©”μ†Œλ“œ
$('.child').parent();
children()
μ„ νƒν•œ μš”μ†Œμ˜ 직계 μžμ‹ μš”μ†Œλ₯Ό μ„ νƒν•˜λŠ” λ©”μ†Œλ“œ
$('#parent').children('.child');
siblings()
μ„ νƒν•œ μš”μ†Œμ˜ ν˜•μ œ μš”μ†Œλ₯Ό μ„ νƒν•˜λŠ” λ©”μ†Œλ“œ
$('#element').siblings();