[JS + jquery] μ„ νƒμž (직접 μ„ νƒμž μ’…λ₯˜, 인접 관계 μ„ νƒμž μ’…λ₯˜)

2021. 10. 28. 13:37ㆍHTML + CSS + JS/JS μžλ°”μŠ€ν¬λ¦½νŠΈ

728x90

1. λ¬Έμ„œ 객체 λͺ¨λΈ 

λ¬Έμ„œ 객체 λͺ¨λΈ DOM 은 HTML λ¬Έμ„œ 객체 ꡬ쑰λ₯Ό λ§ν•œλ‹€. 

HTML λ¬Έμ„œμ˜ μ΅œμƒμœ„μ—λŠ” <html> 이 있고, ν•˜μœ„ 객체둜 <head>, <body> κ°€ μžˆλ‹€. 

κ°€μž₯ μƒμœ„μ— μœ„μΉ˜ν•˜λŠ” <html>이 root 뿌리이고, λΏŒλ¦¬μ—μ„œ κ°€μ§€μ²˜λŸΌ λ»—μ–΄λ‚˜κ°€λŠ” λͺ¨μ–‘μ˜ μš”μ†Œλ₯Ό λ…Έλ“œ node라고 λΆ€λ₯Έλ‹€. 

λ…Έλ“œμ˜ μ’…λ₯˜μ—λŠ” μš”μ†Œ λ…Έλ“œ Element node, ν…μŠ€νŠΈ λ…Έλ“œ Text node, 속성 λ…Έλ“œ Attribute node κ°€ μžˆλ‹€. 

 

 

2. μ„ νƒμž 

μ„ νƒμž μ‚¬μš©ν•˜λŠ” κ°€μž₯ κΈ°λ³Έ μœ ν˜•μœΌλ‘œ μŠ€νƒ€μΌμ„ μ§€μ •ν•˜λŠ” 것이닀. 

전체 * μš”μ†Œμ— 1px solid blue μŠ€νƒ€μΌ 지정 

 

3. κΈ°λ³Έ μ„ νƒμž μ’…λ₯˜ 

 

- 직접 μ„ νƒμž 

직접 μ„ νƒμžλŠ” 주둜 멀리 떨어진 μš”μ†Œλ₯Ό 직접 선택할 λ•Œ μ‚¬μš©ν•˜λŠ” μ„ νƒμžμ΄λ‹€. 

직접 μ„ νƒμž μ’…λ₯˜λŠ” *(전체) #(아이디) .(클래슀) μš”μ†Œλͺ…, κ·Έλ£Ήμ„ νƒμžκ°€ μžˆλ‹€.

 

1️⃣ 전체 μ„ νƒμž 

μ „μ²΄μš”μ†Œλ₯Ό 선택할 λ•Œ μ‚¬μš©ν•œλ‹€. 이 μ„ νƒμžλ₯Ό μ‚¬μš©ν•˜λ©΄ ν˜„μž¬ html 의 λͺ¨λ“  νƒœκ·Έλ₯Ό μ„ νƒν•œλ‹€. 

$("*")

전체 μš”μ†Œμ— border 1px solid blue 지정 
전체 * μš”μ†Œμ— 1px solid blue μŠ€νƒ€μΌ 지정 κ²°κ³Ό  

 

2️⃣ 아이디 μ„ νƒμž 

아이디 μ„ νƒμžλŠ” 아이디 속성에 μ§€μ •ν•œ 값을 ν¬ν•¨ν•˜λŠ” μš”μ†Œλ₯Ό μ„ νƒν•œλ‹€. 

$("#아이디λͺ…")

아이디가 tit 인 μŠ€νƒ€μΌ 지정 

체이닝 기법을 μ΄μš©ν•΄ μš”μ†Œμ— λ©”μ„œλ“œλ₯Ό μ—°μ†ν•΄μ„œ μ‚¬μš©ν•΄μ€Œ. 

 

3️⃣ 클래슀 μ„ νƒμž 

클래슀 μ„ νƒμžλŠ” 클래슀 속성에 μ§€μ •ν•œ 값을 ν¬ν•¨ν•˜λŠ” μš”μ†Œλ₯Ό μ„ νƒν•œλ‹€. 

$(".클래슀λͺ…")

ν΄λž˜μŠ€κ°€ tit인 μ†μ„±μ˜ μŠ€νƒ€μΌ 지정 

 

4️⃣ μš”μ†Œλͺ… μ„ νƒμž 

μ§€μ •ν•œ μš”μ†Œλͺ…(tag Name)κ³Ό μΌμΉ˜ν•˜λŠ” μš”μ†Œλ₯Ό λͺ¨λ‘ μ„ νƒν•œλ‹€. 

$("μš”μ†Œλͺ…")

h2 μš”μ†Œλ§Œ μŠ€νƒ€μΌ 속성 지정 

 

5️⃣ κ·Έλ£Ή μ„ νƒμž 

κ·Έλ£Ή μ„ νƒμžλŠ” ν•œ λ²ˆμ— μ—¬λŸ¬ 개의 μš”μ†Œλ₯Ό 선택할 λ•Œ μ‚¬μš©ν•œλ‹€. 

$("μš”μ†Œ 선택1, μš”μ†Œ 선택2,...")

아이디가 tit3인 μš”μ†Œμ™€ h1 μš”μ†Œμ— μŠ€νƒ€μΌ 지정 

6️⃣ 쒅속 μ„ νƒμž 

쒅속 μ„ νƒμžλŠ” μ„ νƒν•œ μš”μ†Œμ˜ id λ˜λŠ” class 값이 μΌμΉ˜ν•˜λŠ” μš”μ†Œλ₯Ό 선택할 λ•Œ μ‚¬μš©ν•œλ‹€. 

$("μš”μ†Œλͺ…#id κ°’")

$("μš”μ†Œλͺ….class κ°’")

h1μš”μ†Œ 쀑 ν΄λž˜μŠ€κ°€ tit인 μš”μ†Œμ— μŠ€νƒ€μΌ 지정 

 

- 인접 관계 μ„ νƒμž 

인접 관계 μ„ νƒμžλŠ” 직접 μ„ νƒμžλ‘œ μš”μ†Œλ₯Ό λ¨Όμ € μ„ νƒν•˜κ³  κ·Έ λ‹€μŒ μ„ νƒν•œ μš”μ†Œμ™€ κ°€κΉŒμ΄μ— μžˆλŠ” μš”μ†Œλ₯Ό 선택할 λ•Œ μ‚¬μš©ν•œλ‹€. 

 

1️⃣ λΆ€λͺ¨ μš”μ†Œ μ„ νƒμž 

λΆ€λͺ¨ μš”μ†Œ μ„ νƒμžλŠ” μ„ νƒν•œ μš”μ†Œλ₯Ό 감싸고 μžˆλŠ” λΆ€λͺ¨ μš”μ†Œλ₯Ό μ„ νƒν•œλ‹€. 

$("μš”μ†Œ 선택").parent()

idκ°€ list_1인 μš”μ†Œμ˜ λΆ€λͺ¨μ— μŠ€νƒ€μΌ 지정 즉 ul에 μŠ€νƒ€μΌ 지정 

2️⃣ ν•˜μœ„ μš”μ†Œ μ„ νƒμž 

ν•˜μœ„ μš”μ†Œ μ„ νƒμžλŠ” κΈ°μ€€ μš”μ†Œλ‘œ μ„ νƒν•œ ν•˜μœ„ μš”μ†Œλ§Œ μ„ νƒν•œλ‹€. 

$("κΈ°μ€€ μš”μ†Œ 선택1 μš”μ†Œ 선택2")

아이디가 wrap의 ν•˜μœ„μš”μ†ŒμΈ h1νƒœκ·Έμ— μŠ€νƒ€μΌ 지정 

3️⃣ μžμ‹ μš”μ†Œ μ„ νƒμž 

μžμ‹ μš”μ†Œ μ„ νƒμžλŠ” μ„ νƒλœ μš”μ†Œλ₯Ό κΈ°μ€€μœΌλ‘œ μ§€μ •ν•œ μžμ‹ μš”μ†Œλ₯Ό μ„ νƒν•œλ‹€. 

$("μš”μ†Œ 선택 > μžμ‹ μš”μ†Œ 선택")

아이디가 wrap의 μžμ‹ λ…Έλ“œμΈ h1에 μŠ€νƒ€μΌ 지정, wrap μ•„μ΄λ””μ˜ section μžμ‹ λ…Έλ“œμ— μŠ€νƒ€μΌ 지정 

4️⃣ ν˜•(이전) / 동생 (λ‹€μŒ) μš”μ†Œ μ„ νƒμž 

ν˜• μš”μ†Œ μ„ νƒμžλŠ” μ„ νƒν•œ μš”μ†Œλ₯Ό κΈ°μ€€μœΌλ‘œ λ°”λ‘œ 이전 ν˜•μ œ μš”μ†Œλ§Œ μ„ νƒν•œλ‹€.

동생 μš”μ†Œ μ„ νƒμžλŠ” μ„ νƒν•œ μš”μ†Œλ₯Ό κΈ°μ€€μœΌλ‘œ λ°”λ‘œ λ‹€μŒ ν˜•μ œ μš”μ†Œλ§Œ μ„ νƒν•œλ‹€. 

$("μš”μ†Œ 선택").prev()

$("μš”μ†Œ 선택").next()

$("μš”μ†Œ 선택1 + μš”μ†Œ 선택2")

$("μš”μ†Œ μ„ νƒμž1 + μš”μ†Œ μ„ νƒμž2") 은 μ„ νƒν•œ μš”μ†Œλ₯Ό κΈ°μ€€μœΌλ‘œ λ°”λ‘œ λ‹€μŒμ— μ˜€λŠ” μš”μ†Œλ§Œ μ„ νƒν•œλ‹€. 

5️⃣ 전체 ν˜•(이전)/ 동생 (λ‹€μŒ) μš”μ†Œ μ„ νƒμž 

전체 ν˜• μš”μ†Œ μ„ νƒμžλŠ” μ„ νƒν•œ μš”μ†Œλ₯Ό κΈ°μ€€μœΌλ‘œ 이전에 μ˜€λŠ” 전체 ν˜•μ œ μš”μ†Œλ₯Ό μ„ νƒν•œλ‹€. 

전체 동생 μš”μ†Œ μ„ νƒμžλŠ” μ„ νƒν•œ μš”μ†Œλ₯Ό κΈ°μ€€μœΌλ‘œ λ‹€μŒμ— μ˜€λŠ” 전체 ν˜•μ œ μš”μ†Œλ₯Ό μ„ νƒν•œλ‹€. 

$("μš”μ†Œ 선택").prevAll()

$("μš”μ†Œ 선택").nextAll()

 

6️⃣ 전체 ν˜•μ œ μš”μ†Œ μ„ νƒμž 

전체 ν˜•μ œ μš”μ†Œ μ„ νƒμžλŠ” μ„ νƒν•œ μš”μ†Œμ˜ λͺ¨λ“  ν˜•μ œ μš”μ†Œλ₯Ό μ„ νƒν•œλ‹€. 

$("μš”μ†Œ 선택").sibilings();

 

7️⃣ λ²”μœ„ μ œν•œ 전체 ν˜•/ 동생 μš”μ†Œ μ„ νƒμž 

λ²”μœ„ μ œν•œ 전체 ν˜•/ 동생 μš”μ†Œ μ„ νƒμžλŠ” μ„ νƒν•œ μš”μ†Œλ₯Ό κΈ°μ€€μœΌλ‘œ ν˜•μ œ μš”μ†Œ 쀑 μ§€μ •ν•œ λ²”μœ„ λ‚΄μ˜ 전체 ν˜• μš”μ†Œ λ˜λŠ” 전체 동생 μš”μ†Œλ₯Ό μ„ νƒν•œλ‹€. 

$("μš”μ†Œ 선택").prevUntil("λ²”μœ„ μ œν•œ μš”μ†Œ 선택")

$("μš”μ†Œ 선택").nextUntil("λ²”μœ„ μ œν•œ μš”μ†Œ 선택")

8️⃣ μƒμœ„ μš”μ†Œ μ„ νƒμž 

μƒμœ„ μš”μ†Œ μ„ νƒμžλŠ” μ„ νƒν•œ μš”μ†Œλ₯Ό κΈ°μ€€μœΌλ‘œ λͺ¨λ“  μƒμœ„ μš”μ†Œλ₯Ό μ„ νƒν•˜κ±°λ‚˜ μƒμœ„ μš”μ†Œ 쀑 μ„ νƒν•˜κ³ μž ν•˜λŠ” μš”μ†Œλ§Œ 선택할 λ•Œ μ‚¬μš©ν•œλ‹€. 

$("μš”μ†Œ 선택").parents()

$("μš”μ†Œ 선택").parents("μš”μ†Œ 선택")

9️⃣ κ°€μž₯ κ°€κΉŒμš΄ μƒμœ„ μš”μ†Œ μ„ νƒμž 

κ°€μž₯ κ°€κΉŒμš΄ μƒμœ„ μš”μ†Œ μ„ νƒμžλŠ” μ„ νƒν•œ μš”μ†Œλ₯Ό κΈ°μ€€μœΌλ‘œ κ°€μž₯ κ°€κΉŒμš΄ μƒμœ„ μš”μ†Œλ§Œ 선택할 λ•Œ μ‚¬μš©ν•œλ‹€. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

728x90

'HTML + CSS + JS > JS μžλ°”μŠ€ν¬λ¦½νŠΈ' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

[JS + jquery] 제이쿼리 λ°°μ—΄ λ©”μ„œλ“œ  (0) 2021.10.28
[JS + jquery] 제이쿼리 탐색 μ„ νƒμž(μœ„μΉ˜ 탐색 μ„ νƒμž)  (0) 2021.10.28
[JS] 제이쿼리 라이브러리 μ—°λ™ν•˜λŠ” 방법 ( λ‹€μš΄λ‘œλ“œ, λ„€νŠΈμ›Œν¬ 전솑)  (0) 2021.10.28
[JS] ν•¨μˆ˜ μ—°μŠ΅λ¬Έμ œ 1, 2  (0) 2021.10.27
[JS] ν•¨μˆ˜ μŠ€μ½”ν”„(scope), 객체 μƒμ„±μž ν•¨μˆ˜, prototype, λ‚΄μž₯ν•¨μˆ˜, μ¦‰μ‹œ μ‹€ν–‰ ν•¨μˆ˜  (0) 2021.10.27

κ΄€λ ¨κΈ€

λŒ“κΈ€ 0

ν‹°μŠ€ν† λ¦¬νˆ΄λ°”