JAVASCRIPT & jQuery
jQuery μ μ© μ νμ μ’ λ₯
codena
2024. 3. 5. 22:16
π κΈ°λ³Έ νν° μ νμ(Basic Filter)
| μ νμ | μμ | μ€λͺ |
| :odd | $("div:odd") | νμ λ²μ§Έμ μμΉν λ¬Έμ κ°μ²΄λ₯Ό μ νν¨ |
| :even | $("div:even") | μ§μ λ²μ§Έμ μμΉν λ¬Έμ κ°μ²΄λ₯Ό μ νν¨ |
| :first | $("div:first") | 첫 λ²μ§Έ μμΉν λ¬Έμ κ°μ²΄λ₯Ό μ νν¨ |
| :last | $("div:last") | λ§μ§λ§μ μμΉν λ¬Έμ κ°μ²΄λ₯Ό μ νν¨ |
| μ νμ | μμ | μ€λͺ |
| :root | $("div:root") | documentμ λ£¨νΈ μμ μ ν |
| :target | $("div:target") | documentμ URLμ flagment μλ³μλ‘ μ§μ λ λμ μμλ₯Ό μ ν |
| :header | $("div:header") | h1, h2, h3 λ±κ³Ό κ°μ΄ ν€λμΈ λͺ¨λ μμλ₯Ό μ ν |
| :empty | $("div:empty") | μμμ΄ μλ λͺ¨λ μμ(ν μ€νΈ λ Έλ ν¬ν¨)λ₯Ό μ ν |
| :parent | $("div:parent") | νλ μ΄μμ νμ λ Έλ(μμ λλ ν μ€νΈ)κ° μλ λͺ¨λ μμλ₯Ό μ ν |
β
π ν¨μ νν° μ νμ(function Filter)
| μ νμ | μμ | μ€λͺ |
| :eq(index) | $("div:eq(1)") | μΌμΉνλ μ§ν© λ΄μ μΈλ±μ€ nμ μλ μμλ₯Ό μ ν |
| :gt(index) | $("div:gt(2)") | μΌμΉνλ μΈνΈ λ΄μ μΈλ±μ€λ³΄λ€ ν° μΈλ±μ€μμ λͺ¨λ μμλ₯Ό μ ν |
| :lang(language) | $("div:lang(en-us)") | μ§μ λ μΈμ΄μ λͺ¨λ μμλ₯Ό μ ν |
| :lt(index) | $("div:lt(4)") | μΌμΉνλ μ§ν© λ΄μ μΈλ±μ€λ³΄λ€ μμ μΈλ±μ€μμ λͺ¨λ μμλ₯Ό μ ν |
| :not(selector) | $("div:not(:checked)") | μ§μ λ μ νμμ μΌμΉνμ§ μμ λͺ¨λ μμλ₯Ό μ ν |
| :contains(text) | $("div:contains('Hello'") | μ§μ λ ν μ€νΈλ₯Ό ν¬ν¨νλ λͺ¨λ μμλ₯Ό μ ν |
| :has(selector) | $("div:has(p)") | μ§μ ν μ νμμ μΌμΉνλ μμλ₯Ό νλ μ΄μ ν¬ν¨νλ μμλ₯Ό μ ν |
| :animated | $("div:animated") | μ νμλ₯Ό μ€νν λ μ λλ©μ΄μ
μ§ν μνμ μλ λͺ¨λ μμλ₯Ό μ ν ":not(:animated)" => μ λλ©μ΄μ μ€μ΄μ§ μμκ² |
β
π μ λ ₯ μμ νΌ(Form) νν° μ νμ
| μ νμ | μμ | μ€λͺ |
| :button | $(":button") | input νκ·Έμ€ type μμ±μ΄ buttonμΈ λ¬Έμ κ°μ²΄μ button νκ·Έλ₯Ό μ ν |
| :checkbox | $(":checkbox") | 체ν¬λ°μ€ μ νμ λͺ¨λ μμ μ ν |
| :checked | $(":checked") | 체ν¬λκ±°λ μ νλ λͺ¨λ μμμ μΌμΉν μμ μ ν |
| :disabled | $(":disabled") | λΉνμ±νλ λͺ¨λ μμ μ ν |
| :enabled | $(":enabled") | νμ±νλ λͺ¨λ μμ μ ν |
| :file | $(":file") | νμΌ μ νμ λͺ¨λ μμλ₯Ό μ ν |
| :focus | $(":focus") | νμ¬ ν¬μ»€μ€κ° μλ μμ μ ν |
| :image | $(":image") | μ΄λ―Έμ§ μ νμ λͺ¨λ μμ μ ν |
| :input | $(":input") | λͺ¨λ input, textarea, select, button μμ μ ν |
| :password | $(":password") | ν¨μ€μλ μ νμ λͺ¨λ μμ μ ν |
| :radio | $(":radio") | λΌλμ€ μ νμ λͺ¨λ μμ μ ν |
| :reset | $(":reset") | reset μ νμ λͺ¨λ μμ μ ν |
| :selected | $(":selected") | μ νλ λͺ¨λ μμ μ ν |
| :submit | $(":submit") | submit μ νμ λͺ¨λ μμ μ ν |
| :text | $(":text") | text μ νμ λͺ¨λ input μμ μ ν |
<select>
<option>μ¬κ³Ό </option>
<option>λΈκΈ° </option>
<option>μλ° </option>
<option>λ©λ‘ </option>
</select>
<script>
$('select > option:selected').val(); // select λ‘ μ νλ κ°μ΄ μ°ΎκΈ°
</script>
μΆμ²: https://inpa.tistory.com/entry/jQuery-π-μ μ΄μΏΌλ¦¬-μ νμ-Selector-π―-μ 리 [Inpa Dev π¨π»:ν°μ€ν 리]π κ°μμ± νν° μ νμ (Visibility Fileter)
| μ νμ | μμ | μ€λͺ |
| :hidden | $("div:hidden") | hidden λ λͺ¨λ μμ μ ν |
| :visible | $("div:visible") | visibleμΈ λͺ¨λ μμ μ ν |