λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°
μžλ°”μŠ€ν¬λ¦½νŠΈ

JQuery 탐색 μ„ νƒμž

by Youcodein 2022. 8. 31.
728x90
λ°˜μ‘ν˜•

JQuery 탐색 μ„ νƒμž

1. κΈ°λ³Έ 탐색 μ„ νƒμž

μ„ νƒμž μ’…λ₯˜ μ„€λͺ…
children() $("div").children() div μš”μ†Œμ˜ μžμ‹ μš”μ†Œλ₯Ό μ„ νƒν•©λ‹ˆλ‹€.
parent() $("p").parent() p μš”μ†Œμ˜ λΆ€λͺ¨ μš”μ†Œλ₯Ό μ„ νƒν•©λ‹ˆλ‹€.
parents() $("p").parents("div") p μš”μ†Œμ˜ λΆ€λͺ¨κ°€ λ˜λŠ” λͺ¨λ“  div μš”μ†Œλ₯Ό μ„ νƒν•©λ‹ˆλ‹€.
closest() $("p").closest("div") p μš”μ†Œμ˜ λΆ€λͺ¨κ°€ λ˜λŠ” 첫 번째 div μš”μ†Œλ₯Ό μ„ νƒν•©λ‹ˆλ‹€.
next() $("div.m").next() div.m μš”μ†Œμ˜ λ‹€μŒ μš”μ†Œλ₯Ό μ„ νƒν•©λ‹ˆλ‹€.
nextAll() $("div.m").nextAll() div.m μš”μ†Œμ˜ λ‹€μŒ μš”μ†Œλ“€μ„ λͺ¨λ‘ μ„ νƒν•©λ‹ˆλ‹€.
nextUntil() $("div.m").nextUntil("p") div.m μš”μ†Œμ˜ λ‹€μŒ μš”μ†ŒλΆ€ν„° p μš”μ†Œ μ „κΉŒμ§€μ˜ μš”μ†Œλ₯Ό μ„ νƒν•©λ‹ˆλ‹€.
prev() $("div.m").prev() div.m μš”μ†Œμ˜ 이전 μš”μ†Œλ₯Ό μ„ νƒν•©λ‹ˆλ‹€.
prevAll() $("div.m").prevALL() div.m μš”μ†Œμ˜ 이전 μš”μ†Œλ“€μ„ λͺ¨λ‘ μ„ νƒν•©λ‹ˆλ‹€.
prevUntil() $("div.m").prevUntil("p") div.m μš”μ†Œμ˜ 이전 μš”μ†ŒλΆ€ν„° pμš”μ†Œ λ‹€μŒ μš”μ†ŒκΉŒμ§€ μ„ νƒν•©λ‹ˆλ‹€.
siblings() $("div").siblings("p") div μš”μ†Œμ˜ ν˜•μ œ μš”μ†Œ 쀑 p μš”μ†Œλ₯Ό μ„ νƒν•©λ‹ˆλ‹€.
find() $("div").find("span") div μš”μ†Œμ˜ ν•˜μœ„ μš”μ†Œ 쀑 span μš”μ†Œλ₯Ό μ„ νƒν•©λ‹ˆλ‹€.
filter() $("div").filter(".m") div μš”μ†Œ 쀑 class κ°€ "m"인 μš”μ†Œλ₯Ό μ„ νƒν•©λ‹ˆλ‹€.
not() $("div").not(".m") div μš”μ†Œ 쀑 class κ°€ "m"이 μ•„λ‹Œ μš”μ†Œλ₯Ό μ„ νƒν•©λ‹ˆλ‹€.
has() $("div").has("span") div μš”μ†Œ 쀑 span μš”μ†Œλ₯Ό ν¬ν•¨ν•˜κ³  μžˆλŠ” μš”μ†Œλ₯Ό μ„ νƒν•©λ‹ˆλ‹€.
eq() $("div").eq(0) div μš”μ†Œ 쀑 indexκ°€ 0인 μš”μ†Œλ“€μ„ μ„ νƒν•©λ‹ˆλ‹€
index 0λ²ˆμ€ 첫 번째 μš”μ†Œμž…λ‹ˆλ‹€.
gt() $("div").gt(0) div μš”μ†Œ 쀑 indexκ°€ 0보닀 큰 μš”μ†Œλ“€μ„ μ„ νƒν•©λ‹ˆλ‹€.
lt() $("div").lt(3) div μš”μ†Œ 쀑 indexκ°€ 3보닀 μž‘μ€ μš”μ†Œλ“€μ„ μ„ νƒν•©λ‹ˆλ‹€.

2. 기타 탐색 μ„ νƒμž

μ„ νƒμž μ’…λ₯˜ μ„€λͺ…
add() $("div").add("p")
div μš”μ†Œμ™€ p μš”μ†Œλ₯Ό μ„ νƒν•©λ‹ˆλ‹€.
addBack() $("div").children("p").addBack()
p μš”μ†Œμ™€ 이전 μ„ νƒμš”μ†Œ divλ₯Ό μ„ νƒν•©λ‹ˆλ‹€.
end() $("div").find("span").css(...).end().find("em").css(...)
$("div").find("span").css(...)의 싀행이 λλ‚˜λ©΄
처음 μ„ νƒμž $("div")둜 λ‹€μ‹œ λŒμ•„μ™€ $("div").find("em").css(...)κ°€ μ‹€ν–‰λ©λ‹ˆλ‹€.
is() μ„ νƒν•œ μš”μ†Œλ₯Ό νŒλ³„ν•΄ μ£ΌλŠ” μ„ νƒμžλ‘œ 보톡 if 문의 쑰건식에 μ‚¬μš©λ©λ‹ˆλ‹€.
if($("div").children().is("p")){
console.log("p μš”μ†Œκ°€ λ§žμŠ΅λ‹ˆλ‹€.")
}
p μš”μ†Œκ°€ μ‘΄μž¬ν•©λ‹ˆλ‹€.
728x90
λ°˜μ‘ν˜•

λŒ“κΈ€