Framework & Library/JQeury

[JQuery] Traversing

gangintheremark 2023. 7. 13. 18:55
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