πŸ”Ή jQuery - traversing

jea_iΒ·2022λ…„ 1μ›” 8일
jquery
0

jQuery

λͺ©λ‘ 보기
3/11
post-thumbnail

πŸ”… 계측 νƒμƒ‰λ©”μ„œλ“œ

traversingμ΄λž€?
DOM을 자유자재둜 μ΄λ™ν•˜λŠ” 방법이닀.
각각의 μš”μ†Œκ°„μ˜ μ ‘κ·Όλ°©λ²•μœΌλ‘œ 예λ₯Ό λ“€μ–΄ μ–΄λ–€ μš”μ†Œμ˜ μžμ‹μš”μ†Œ, λΆ€λͺ¨μš”μ†Œλ₯Ό μ°Ύμ•„κ°ˆ λ•Œ μ‚¬μš©ν•˜λŠ” 방법이닀.
μš”μ†Œμ— id 속성을 λΆ€μ—¬ν•΄μ„œ μ ‘κ·Όν•˜λŠ” 방법이 μžˆμ§€λ§Œ traversing을 μ‚¬μš©ν•˜λ©΄ idλ₯Ό λΆ€μ—¬ν•˜μ§€ λͺ»ν•˜λŠ” μƒν™©μ—μ„œλ„ 접근이 κ°€λŠ₯ν•˜λ‹€.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>day63-3_traversing.html</title>
    <link rel="stylesheet" href="css/basicStyle.css">
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/day63-3_script.js"></script>
</head>
<body>
    <div id="wrapper">
        <div class="header">
            <h3>ν—€λ”μ œλͺ©</h3>
            <p>λ¬Έμž₯1</p>
        </div>
        <div class="section">
            <h3 class="part">μ„Ήμ…˜μ œλͺ©</h3>
            <p class="part">λ¬Έμž₯2</p>
            <p class="part">λ¬Έμž₯3</p>
            <ol class="part">
                <li>ν•­λͺ©1</li>
                <li>ν•­λͺ©2</li>
                <li>ν•­λͺ©3</li>
                <li>ν•­λͺ©4</li>
            </ol>
            <ul class="part">
                <li>ν•­λͺ©1</li>
                <li>ν•­λͺ©2</li>
                <li>ν•­λͺ©3</li>
                <li>ν•­λͺ©4</li>
            </ul>
        </div>
    </div>
</body>
</html>
<script>
$(function(){
    //λ¬Έμ„œκ°μ²΄ 탐색
    //계측 νƒμƒ‰λ©”μ„œλ“œ
    //μžμ‹μ„ νƒμž -> μžμ‹νƒμƒ‰λ©”μ„œλ“œ
    //ν—€λ”μ˜ μžμ‹h3을 μ„ νƒν•©λ‹ˆλ‹€.
    $('.header').children('h3').css({borderColor:'#f00'});

    //ν›„μ†μ„ νƒμž - > ν›„μ†νƒμƒ‰μž('*')
    //.header p
    $('.header').find('p').css({borderColor:'#00f'});

    //λΆ€λͺ¨μ„ νƒμž
    //parent()
    $('h3').parent().css({borderWidth:'10'});
    $('h3').parent('.section').css({borderWidth:'5'});

    $('li').parent('ol').css({borderColor:'#0f0'});

    //μ‘°μƒμ„ νƒμž
    //parents()
    $('li').parents('#wrapper').css({borderColor:'olive'});
    $('li').parents('.section').css({borderColor:'blue'});

    //λ™μœ„μ„ νƒμž(동생선택, 동생듀선택)
    //h3.part+p{}
    //λ™μƒνƒμƒ‰μž .next()
    $('h3.part').next().css({backgroundColor:'#fee'});
    //h3.part~ul{}
    //λ™μƒλ“€νƒμƒ‰μž .nextAll()
    $('h3.part').nextAll('ul').css({backgroundColor:'#ffc'});

    //ν˜•μ„ νƒμž, ν˜•λ“€μ„ νƒμž, λͺ¨λ“ ν˜•μ œλ“€ μ„ νƒμž

    //ol의 ν˜•μ œλ“€μ„ νƒ .siblings()
    $('ol').siblings().css({borderColor:'#f0c'});
    //ul의 ν˜•μ„ νƒ
    $('ul').prev().css({borderStyle:'dotted'});
    $('p').prev('h3.part').css({borderWidth: 10});
});

</script>
profile
jea_i
μ—΄μ •μ—΄μ •μ—΄μ •πŸ”₯
이전 포슀트

πŸ”Ή jQuery - selectors

λ‹€μŒ 포슀트

πŸ”Ή jQuery - filtering

0개의 λŒ“κΈ€

κ΄€λ ¨ μ±„μš© 정보