[JS + jquery] 제이쿼리 속성 탐색 μ„ νƒμž , μ½˜ν…μΈ  탐색 μ„ νƒμž

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

728x90

 

 

1. 속성 탐색 μ„ νƒμž 

속성 탐색 μ„ νƒμžλŠ” μ„ νƒν•œ μš”μ†Œλ₯Ό κΈ°μ€€μœΌλ‘œ μΌμΉ˜ν•˜λŠ” μ†μ„±μ˜ 포함 μ—¬λΆ€λ₯Ό λ”°μ Έ μš”μ†Œλ₯Ό μ„ νƒν•˜λŠ” μ„ νƒμžμ΄λ‹€. 

 

- 속성과 값에 λ”°λ₯Έ 탐색 μ„ νƒμž 

$("μš”μ†Œ 선택[속성]")  μ„ νƒν•œ μš”μ†Œ 쀑 μ§€μ •ν•œ 속성이 ν¬ν•¨λœ μš”μ†Œλ§Œ μ„ νƒν•œλ‹€. 

$("μš”μ†Œ 선택[속성^=κ°’]") μ„ νƒν•œ μš”μ†Œ 쀑 속성값이 λͺ…μ‹œν•œ κ°’μœΌλ‘œ μ‹œμž‘ν•˜λŠ” μš”μ†Œλ§Œ μ„ νƒν•œλ‹€. 

$("μš”μ†Œ 선택[속성$= κ°’]") μ„ νƒν•œ μš”μ†Œ 쀑 속성값이 λͺ…μ‹œν•œ κ°’μœΌλ‘œ λλ‚˜λŠ” μš”μ†Œλ§Œ μ„ νƒν•œλ‹€. 

$("μš”μ†Œ 선택[속성*= κ°’]") μ„ νƒν•œ μš”μ†Œ 쀑 속성값이 λͺ…μ‹œν•œ 값을 ν¬ν•¨ν•˜λŠ” μš”μ†Œλ§Œ μ„ νƒν•œλ‹€.

$(":type 속성값") input μš”μ†Œ 쀑 type 속성값이 μΌμΉ˜ν•˜λŠ” μš”μ†Œλ§Œ μ„ νƒν•œλ‹€. 

- 속성 μƒνƒœμ— λ”°λ₯Έ 탐색 μ—°μ‚°μž 

$("μš”μ†Œ 선택:[visible | hidden]") μ„ νƒν•œ μš”μ†Œ 쀑 μˆ¨κ²¨μ§„ μƒνƒœ λ˜λŠ” λ³΄μ΄λŠ” μƒνƒœμ˜ μš”μ†Œλ§Œ μ„ νƒν•œλ‹€. 

$(":selected") 선택 μƒμž 쀑 ν˜„μž¬ μ„ νƒλœ μ˜΅μ…˜ μš”μ†Œλ§Œ μ„ νƒν•œλ‹€.

$(":checked") 체크 λ°•μŠ€ λ˜λŠ” λΌλ””μ˜€ λ²„νŠΌ μš”μ†Œ 쀑 체크된 μš”μ†Œλ§Œ μ„ νƒν•œλ‹€. 

 

 

 

2. μ½˜ν…μΈ  탐색 μ„ νƒμž 

μ½˜ν…μΈ  탐색 μ„ νƒμžλŠ” μš”μ†Œ λ˜λŠ” μ†μ„±μ˜ 포함 여뢀에 따라 νŠΉμ • μš”μ†Œλ₯Ό μ„ νƒν•˜λŠ” μ„ νƒμžμ΄λ‹€. 

 

1️⃣ contains()/ contents() / has() / not() / end() 탐색 μ„ νƒμž 

$("μš”μ†Œ 선택:contains(ν…μŠ€νŠΈ)") contains() 탐색 μ„ νƒμžλŠ” μ„ νƒν•œ μš”μ†Œ 쀑 μ§€μ •ν•œ ν…μŠ€νŠΈλ₯Ό ν¬ν•¨ν•˜λŠ” μš”μ†Œλ§Œ μ„ νƒν•œλ‹€.

$("μš”μ†Œ 선택").contents() contents() 탐색 μ„ νƒμžλŠ” μ„ νƒν•œ μš”μ†Œμ˜ ν•˜μœ„ μš”μ†Œ 쀑 깊이 1의 ν…μŠ€νŠΈμ™€ νƒœκ·Έ λ…Έλ“œλ₯Ό μ„ νƒν•œλ‹€. 

$("μš”μ†Œ 선택 :has(μš”μ†Œλͺ…)") / $("μš”μ†Œ 선택").has("μš”μ†Œλͺ…") has() 탐색 μ„ νƒμžλŠ” μ„ νƒν•œ μš”μ†Œ 쀑 μ§€μ •ν•œ νƒœκ·Έλ₯Ό ν¬ν•¨ν•˜λŠ” μš”μ†Œλ§Œ μ„ νƒν•œλ‹€. 

$("μš”μ†Œμ„ νƒ :not(μ œμ™Έν•  μš”μ†Œ 선택)") / $("μš”μ†Œ 선택").not(μ œμ™Έν•  μš”μ†Œ 선택) not() 탐색 μ„ νƒμžλŠ” μ„ νƒν•œ μš”μ†Œ 쀑 μ§€μ •ν•œ μš”μ†Œλ§Œ μ œμ™Έν•œ 채 μ„ νƒν•œλ‹€. 

$("μš”μ†Œ 선택").탐색 μ„ νƒμž().end() end() 탐색 μ„ νƒμžλŠ” 필터링 되기 μ΄μ „μ˜ μ„ νƒμžκ°€ μ μš©λ˜λ„λ‘ ν•œλ‹€. 

2️⃣ find() / filter() 탐색 μ„ νƒμž 

$("μš”μ†Œ 선택").find("ν•˜μœ„ μš”μ†Œ 쀑 필터링할 μš”μ†Œ 선택")  find() 탐색 μ„ νƒμžλŠ” μ„ νƒν•œ ν•˜μœ„ μš”μ†Œ μ€‘μ—μ„œ find둜 ν•„ν„°λ§ν•œ μš”μ†Œλ§Œ μ„ νƒν•œλ‹€. 

$("μš”μ†Œ 선택").filter("μ„ νƒν•œ μš”μ†Œ 쀑 필터링할 μš”μ†Œ 선택")  filter() 탐색 μ„ νƒμžλŠ” μ„ νƒν•œ μš”μ†Œ μ€‘μ—μ„œ filter()둜 ν•„ν„°λ§ν•œ μš”μ†Œλ§Œ μ„ νƒν•œλ‹€. 

 

 

3. μ„ νƒμžμ™€ ν•¨κ»˜ μ•Œμ•„λ‘λ©΄ μœ μš©ν•œ λ©”μ„œλ“œ 

1️⃣ is() λ©”μ„œλ“œ 

$("μš”μ†Œ 선택").is(":[checked | selected | visible | hidden | animated])

is() λ©”μ„œλ“œλŠ” μ„ νƒν•œ μš”μ†Œμ˜ μƒνƒœκ°€ μ§€μ •ν•œ 속성과 μΌμΉ˜ν•˜λ©΄ trueλ₯Ό λ°˜ν™˜ν•˜κ³  그렇지 μ•ŠμœΌλ©΄ falseλ₯Ό λ°˜ν™˜ν•œλ‹€. 

2️⃣ $.noConfilct() 

$.noConfilct() ν•¨μˆ˜λ₯Ό μ΄μš©ν•˜λ©΄ ν˜„μž¬ μ œμ΄μΏΌλ¦¬μ—μ„œ μ‚¬μš© 쀑인 $ λ©”μ„œλ“œ μ‚¬μš©μ„ μ€‘λ‹¨ν•˜κ³  μƒˆλ‘œ μ§€μ •ν•œ λ³€μˆ˜λͺ… λ©”μ„œλ“œλ₯Ό μ‚¬μš©ν•œλ‹€. 

 

3️⃣ get() 

μ„ νƒμž get(0)을 μ μš©ν•˜λ©΄ μžλ°”μŠ€ν¬λ¦½νŠΈ DOM λ°©μ‹μ˜ μŠ€νƒ€μΌμ„ μ‚¬μš©ν•  수 μžˆλ‹€. 

 

 

 

 

 

 

 

 

 

 

 

 

 

728x90