728x90
πselectors νν°λ§ : DOMνΈλ¦¬μμ 1μ°¨ νν°λ§
πTraversing : 2μ°¨ νν°λ§
νν°λ§ Filtering
| λ©μλ | μμ | μ€λͺ |
|---|---|---|
| π‘ .eq() | $(selector).eq(index) | μ νλ μ§ν©μμ indexμ μΌμΉνλ μμ |
| π‘ .filter() | $(selector1).filter(selector2) | μ νλ μ§ν©μμ selector2 μΈ μμ |
| π‘ .not() | $(selector1).not(selector2) | μ νλ μ§ν©μμ selector2κ° μλ μμ |
| π‘ .is() | $(selector1).is(selector2) | μ νλ μ§ν©μμ selector2μ ν΄λΉνλ μμκ° μ‘΄μ¬νλ©΄ true λ°ν |
| π‘ .has() | $(selector1).has(selector2) | μ νλ μ§ν©μμ selector2λ₯Ό ν¬ν¨νλ μμ |
| π‘ .first() | $(selector1).first() | μ νλ μ§ν©μμ 첫λ²μ§Έ μμ |
| π‘ .last() | $(selector1).last() | μ νλ μ§ν©μμ λ§μ§λ§ μμ |
| π‘ .slice() | $(selector1).slice(start, [end]) | μ νλ μ§ν©μμ start ~ end λ²μμ μμ λ°ν |
| π‘ .map() | $(selector1).slice(func) | μ νλ μ§ν©μμ func ν¨μλ₯Ό μ μ©ν΄μ λ€μ λ°ν |
<head>
<script>
$(document).ready(function () {
$("li").eq(0).css("color", "red");
$("p").filter(".middle").css("color", "red");
$("p").not(".middle").css("color", "blue");
var result = $("p").filter("[class]").is(".middle");
console.log(result); // true λ°ν
$("li").has("span").css("color", "green");
$("li").first().css("background-color", "bisque");
$("li").last().css("background-color", "darksalmon");
$("li").slice(0, 3).css("font-size", "2rem"); // 0,1,2 (3μ ν¬ν¨X)
var result = $("li").map(function (idx, ele) {
return $(ele).text().toUpperCase(); // μμλ€ λλ¬Έμλ‘ λ³ννλ ν¨μ
});
console.log(result); // ['LIST ITEM 1', 'LIST ITEM 2', 'LIST ITEM 3', 'LIST ITEM 4'] λ°ν
});
</script>
</head>
<body>
<p>text</p>
<p class="middle">Middle <span>text</span></p>
<p class="final">final text</p>
<div>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li><span>list item 3</span></li>
<li>list item 4</li>
</ul>
</div>
</body>
Tree Traversal
| λ©μλ | μμ | μ€λͺ |
| π‘ .children() | $(selector1).children() | μ νλ μμμ λͺ¨λ μμ μμ (μμX) |
| $(selector1).children(selector2) | μ νλ μμμμ selector2μ μΌμΉνλ μμ μμ (μμX) | |
| π‘ .find() | $(selector1).find(selector2) | μ νλ μμμμ selector2μ μΌμΉνλ μμ μμ |
| π‘ .parent() | $(selector1).parent() | μ νλ μμμ λͺ¨λ λΆλͺ¨ μμ |
| $(selector1).parent(selector2) | μ νλ μμμμ selector2μ μΌμΉνλ λΆλͺ¨ μμ | |
| π‘ .parents() | $(selector1).parents() | μ νλ μμμ λͺ¨λ μ‘°μ μμ |
| $(selector1).parents(selector2) | μ νλ μμμμ selector2μ μΌμΉνλ μ‘°μ μμ | |
| π‘ .next() | $(selector1).next() | μ νλ μμ λ°λ‘ λ€μ νμ μμλ§ |
| $(selector1).next(selector2) | μ νλ μμμμ selector2μ μΌμΉνλ λ°λ‘ λ€μ νμ μμ | |
| π‘ .nextAll() | $(selector1).nextAll() | μ νλ μμ λ€μ λͺ¨λ νμ μμ |
| $(selector1).nextAll(selector2) | μ νλ μμ λ€μ λͺ¨λ νμ μμ μ€ selector2μ μΌμΉνλ μμ | |
| π‘ .prev() | $(selector1).prev() | μ νλ μμ λ°λ‘ μμ νμ μμλ§ |
| $(selector1).prev(selector2) | μ νλ μμμμ selector2μ μΌμΉνλ λ°λ‘ μμ νμ μμ | |
| π‘ .prevAll() | $(selector1).prevAll() | μ νλ μμ μμ λͺ¨λ νμ μμ |
| $(selector1).prevAll(selector2) | μ νλ μμ μμ λͺ¨λ νμ μμ μ€ selector2μ μΌμΉνλ μμ | |
| π‘ .siblings() | $(selector1).siblings() | μ νλ μμμ λͺ¨λ μ/λ€ νμ μμ |
| $(selector1).siblings(selector2) | μ νλ μμμμ λͺ¨λ μ/λ€ νμ μμ μ€ selector2μ μΌμΉνλ μμ |
728x90
'Framework & Library > JQeury' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
| [JQuery] Utility method μ νΈλ¦¬ν° λ©μλ (0) | 2023.07.14 |
|---|---|
| [JQuery] Mainipulation method (1) | 2023.07.14 |
| [JQeury] Attributes method μμ± λ©μλ (0) | 2023.07.14 |
| [JQuery] νν° μ νμ(Filter Selector) μ’ λ₯ (0) | 2023.07.13 |
| [JQuery] μ μ΄μΏΌλ¦¬ κΈ°λ³Έ (0) | 2023.07.13 |
