오봉이와 함께하는 개발 블로그

jQuery - DOM 요소의 추가 및 삭제 본문

FE/jQuery

jQuery - DOM 요소의 추가 및 삭제

오봉봉이 2021. 12. 15. 14:22
728x90

DOM 요소의 추가 및 삭제

  • attr('속성명', 값) : 속성 추가
  • removeAttr('속성명') : 속성 제거
DOM 요소의 추가 및 삭제 예제 - DOMattr.html
        <script src="jquery-3.6.0.min.js"></script>
        <script type="text/javascript">
           $(document).ready(function() {
                $('#img')
                .on('mouseover', function() {
                    $(this).attr('src', 'image/apple.png');
                })
                .on('mouseout', function() {
                    $(this).attr('src', 'image/heart.png');
                });
           });
        </script>
</head>
<body>
    <h1>DOM 요소 속성 추가</h1>
    <img src="image/heart.png" id="img">
</body>
DOM 요소의 추가 및 삭제 연습문제 - DOMattrIndex.html
        <script src="jquery-3.6.0.min.js"></script>
        <script type="text/javascript">
           //(1) <img> 태그를 선택해서 (객체 변수 생성 생략하고 바로 선택자를 객체로 사용)
                // var $img = $('img'); 해서 배열 객체 생성해도 되고
                // 바로 선택자로 each() 메소드 앞에 적어도 됨 : $('img').each()
                //<img> 4개 : 배열로 객체 생성

                //(2) 각 이미지에 마우스 올렸다 뗐을 때 처리 : 각각을 처리해야 하므로 each() 사용
                // each()에는 기본 파라미터 index 가 포함되어 있음
                // 마우스 올렸다 뗐을 때 처리하는 메소드로 hover() 사용
                $('img').each(function(index){
                    $(this).hover(
                        function() {    // 첫 번재 함수 : 마우스 올렸을 때 처리
                            // 이미지 변경 : <img> 태그의 src 속성값을 변경 : attr() 메소드 사용
                            $(this).attr('src', "image/img2-" + (index+1) + ".jpg");
                        }, 
                        function(){  // 두 번째 함수 : 마우스 뗐을 때 처리
                            $(this).attr('src', "image/img1-" + (index+1) + ".jpg");
                        }
                    );                    
                });                
        </script>
</head>
<body>
    <img src="image/img1-1.jpg" id="img1">
    <img src="image/img1-2.jpg" id="img2">
    <img src="image/img1-3.jpg" id="img3">
    <img src="image/img1-4.jpg" id="img4">
</body>
728x90
저작자표시

'FE > jQuery' 카테고리의 다른 글

jQuery - 효과  (0) 2021.12.15
jQuery - DOM 요소 클래스 속성(CSS 동적 적용)  (0) 2021.12.15
jQuery - DOM 요소 조작  (0) 2021.12.15
jQuery - each() 메소드  (0) 2021.12.15
jQuery - 이벤트  (0) 2021.12.14
'FE/jQuery' Related Articles more
Comments