jQuery(attr)

노건우·2023년 8월 11일

attr함수를 사용한 속성값 얻어오기

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>jQuery</title>
   
   
    <style>
        /* 전체 여백 제거 */
        *  { margin: 0; padding: 0; }

        /* 목록정의 태그 */
        ul { list-style: none; }

        /* float 처리용 클래스 및 마감제 클래스 정의 */
        .pull-left { float: left; }
        .clearfix:after { display: block; content: ''; clear: both; float: none; }
        
        /* 바깥의 박스 */
        .preview-box { margin: auto; width: 470px; border: 3px solid #d5d5d5; padding: 10px; }

        /* 큰 이미지 영역 */
        .preview { width: 100%; height: 470px; margin-bottom: 5px; }

        /* 목록정의 아이템 크기, 여백설정(왼쪽마진) */
        .item { width: 70px; height: 70px; margin-left: 10px; }

        /* 목록정의 첫 번째 항목은 왼쪽마진 제거 */
        .item:first-child { margin-left: 0; }

        /* 작은 크기의 이미지 사이즈 설정 및 마우스 커서 모양 설정 */
        .thumbnail { width: 100%; height: 100%; cursor: pointer; }
    </style>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

</head>

<body>
    <div class='preview-box'>
        <img src="img/captainamerica.png" class="preview" id="target" />
        <ul class="list clearfix">
            <li class='item pull-left'><img src="img/captainamerica.png" class='thumbnail' /></li>
            <li class='item pull-left'><img src="img/batman.png" class='thumbnail' /></li>
            <li class='item pull-left'><img src="img/spiderman.png" class='thumbnail' /></li>
            <li class='item pull-left'><img src="img/ironman.png" class='thumbnail' /></li>
            <li class='item pull-left'><img src="img/hulk.png" class='thumbnail' /></li>
            <li class='item pull-left'><img src="img/thor.png" class='thumbnail' /></li>
        </ul>
     
    </div>
    <script>
        //attr,$(this)
        $(".thumbnail").click(function(){
            let img = $(this).attr("src");
            //console.log(img)
            $("#target").attr('src',img);
        });


     
    </script>

먼저 img라는 변수를 설정해 주고 $에 요소값을 집어넣고 src속성 값을 가져온다. 속성의 이름이 src이고 값은 image를 뜻하므로 위에서 정의해준 png의 값을 가져온다.

✍️ 포인트는 요소값, 속성값, 속성 이름등 하나하느이 특징을 알고 호출할 때 그들의 관계를 아는 것이 포인트다. 코드가 컴팩트하고 길지 않기 때문에 코드만 보는 것이 아닌 로직을 분석해주자.

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>jQuery</title>
</head>

<body>
    <!-- 베너영역 -->
    <div id="banner">
        <a href="#" id="banner-link" target="_blank">
            <img src="" id="banner-img" width="320" />
        </a>
    </div>
    
    <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
        let banner = [
            { img:'img/captainamerica.png', url:'https://www.naver.com' },
            { img:'img/batman.png', url:'https://www.google.com' },
            { img:'img/ironman.png', url:'https://www.daum.net' },
            { img:'img/thor.png', url:'https://www.google.com' }
        ];

        // 페이지가 열린 후 호출될 함수
        $(function(){
            random_banner();

            // 1초마다 배너 변경을 위해서 타이머 가동
            setInterval(function(){
                random_banner();
            }, 1000);
        });

        function random_banner(){
            let rand = random(0, banner.length-1);
            let item = banner[rand];
            // 배너에 적용
            $("#banner-img").attr('src',item.img);
            $("#banner-link").attr('href', item.url);
        }

        function random(n1, n2){
            return parseInt(Math.random() * (n2 - n1 + 1)) + n1;
        }
    </script>
</body>

</html>

배너라는 배열값을 만들어 4가지의 이미지, 그에 따른 url을 설정해 준다.
먼저 페이지가 열린 후 호출될 함수를 만들고, 그 페이지의 사진들이 랜덤으로 나오게 하는 로직 생성
다음은 $,attr을 이용하여 배너에 적용하고, 함수를 호출해준다.

✍️ 이 코드에서 주목해야 할 점은 배너에 적용하는 과정이다. banner-img는 배너의 아이디에 설정되어 있기 때문에 #banner-img로 가고, 속성이름이 src이며 배열로 저장된 banner의 img값을 가져온다.
banner-link는 아이디 값이 href이며, 배열로 저장된 url값을 가져온다.

태그의 기능중단

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
    <a href="http://www.naver.com" id = "link1">link1</a>
    <a href="http://www.naver.com" id = "link2">link2</a>

    <script>
        $('#link1').click(function(){
            alert("link1를 클릭했습니다.")
        })
        //a태그의 href기능 중단
        $('#link2').click(function(e){
            e.preventDefault();
            alert("link2를 클릭했습니다.")
        })
    </script>
</body>
</html>

👊👊위의 코드에 비하면 난이도가 많이 낮은 쉬어가는 코드이다. 먼저 id가 link1울 클릭하면 "link1을 클릭했습니다."라는 알림창이 뜨고, ,naver로 접속하게 된다. link2같은 경우는preventDefault를 이용해 링크로의 접속을 막아두고 "link2를 클릭했습니다"알림창을 띄우게 된다.

노건우

초보 개발자 이야기

이전 포스트

자바스크립트 문제풀이

다음 포스트

jQuery(attr)

attr함수를 사용한 속성값 얻어오기

banner

태그의 기능중단

자바스크립트 문제풀이

자바스크립트

0개의 댓글