πŸ”Ή jQuery - attribute

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

jQuery

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

πŸ”Ή jQuery - attribute

πŸ”… λ¬Έμ„œκ°μ²΄ νŠΉμ • μ œμ–΄ν•˜κΈ°

νƒœκ·ΈλŠ” μš”μ†ŒλΌ λΆˆλ¦¬κΈ°λ„ ν•˜μ§€λ§Œ 객체라 λΆˆλ¦¬κΈ°λ„ ν•©λ‹ˆλ‹€.
객체라 뢈릴 수 μžˆλŠ”κ±΄ 속성과 속성값을 가지고 있기 λ•Œλ¬Έμž…λ‹ˆλ‹€.

<ElementNode AttributeNode="Value">TextNode | Other </ElementNode>

<μš”μ†Œλͺ… νŠΉμ„±λͺ…="νŠΉμ„±κ°’">TextNode | Other </μš”μ†Œλͺ…>

<body>
    <!-- λ‹«νžŒ νƒœκ·Έ -->
    <div class="object">
        <h3>λ¬Έμ„œκ°μ²΄μ˜ ꡬ쑰</h3>
    </div>
    <!-- μ—΄λ¦° νƒœκ·Έ -->
    <img src="" alt="λΉ¨κ°„κ΅­ν™”">
</body>
<script>
$(function(){
    //λ©”μ„œλ“œμ˜ λ°˜ν™˜(return)
    var test = '%%%%%%';
    //html() λ©”μ„œλ“œλŠ” νƒœκ·Έλ₯Ό λ°˜ν™˜ν•©λ‹ˆλ‹€.
    test = $('.object').text();
    console.log(test);
    $('.object').text('λ¬Έμ„œκ°μ²΄μ˜ ꡬ쑰λ₯Ό μ•Œμ•„λ΄…λ‹ˆλ‹€.');

    //νŠΉμ •μ œμ–΄ν•˜κΈ°, λ§€κ°œλ³€μˆ˜μ— 값을 λŒ€μž…ν•˜λ©΄ λ¬Έμ„œμ— 적용이 λ˜μ§€λ§Œ λ©”μ„œλ“œλ₯Ό λ³€μˆ˜μ— λŒ€μž…ν•˜λ©΄ λ©”μ„œλ“œκ°€ λ™μž‘ν•˜λŠ” 값을 λ°˜ν™˜ν•©λ‹ˆλ‹€.
    var altval = $('img').attr('alt');
    console.log(altval);
    $('img').attr('src', 'img/pic01.jpg');
    $('img').attr('width', '400px');
    $('img').removeAttr('alt');
});
</script>





<body>
    <div class="content ct20">
        <header>
            <h3>Content Title</h3>
            <p>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                <br>Quas recusandae in itaque nisi, quia iure.
            </p>
        </header>
        <section>
            <div class="imgGroup">
                <div class="image i1"><img src="img/pic01.jpg" alt=""></div>
                <div class="image i2"><img src="img/pic02.jpg" alt=""></div>
                <div class="image i3"><img src="img/pic03.jpg" alt=""></div>
            </div>
            <div class="imgView"><img src="img/pic02.jpg" alt=""></div>
            <div class="imgGroup">
                <div class="image i4"><img src="img/pic04.jpg" alt=""></div>
                <div class="image i5"><img src="img/pic05.jpg" alt=""></div>
                <div class="image i6"><img src="img/pic09.jpg" alt=""></div>
            </div>
        </section>
    </div>
</body>
<script>
$(function(){
    /*
    .ct20 .imgGroup imgλ₯Ό click ν–ˆμ„ λ•Œ function
    fn{.ct20 .imgView img의 κ²½λ‘œκ°€ λ°”λ€Œμ–΄μ•Ό ν•©λ‹ˆλ‹€.}
    */
    
    $('.ct20 .imgGroup img').click(changeImg);
    function changeImg(){
        //this ν‚€μ›Œλ“œλŠ” ν•¨μˆ˜κ°€ μ μš©λ˜λŠ” λŒ€μƒμ„ κ°€λ¦¬ν‚΅λ‹ˆλ‹€.
        var path = $(this);
        path = $(this).attr('src');
        console.log(path);
        $('.ct20 .imgView img').attr('src', path);
    };    
});
</script>
profile
jea_i
μ—΄μ •μ—΄μ •μ—΄μ •πŸ”₯
이전 포슀트

πŸ”Ή jQuery - manipulation [outside]

λ‹€μŒ 포슀트

πŸ”Ή jQuery - css

0개의 λŒ“κΈ€