Attr() / removeAttr()

attr() 메서드는 선택한 요소에 새 속성을 생성하거나 기존의 속성을 변경할 때, 또는 요소의 속성값을 불러올 때 사용합니다. removeAttr() 메서드는 선택한 요소에서 기존의 속성을 삭제할 때 사용합니다.

$("선택자").attr("속성"); $("선택자").attr("속성","속성값"); $("선택자").attr("속성","속성값","속성","속성값",....); $("선택자").removeAttr("속성");

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQueray10 attr(2)</title>
    <style>
         * {margin: 0; padding: 0;}
        ul {list-style: none;}
        a {text-decoration: none; color: #fff;}
        #tab-menu {width: 500px; margin: 50px auto; background: #ccc;}
        #tab-btn {}
        #tab-btn ul {overflow: hidden;}
        #tab-btn li {float: left; width: 20%; text-align: center;}
        #tab-btn li a {display: block; padding: 20px; background: #1e88e5;}
        #tab-cont {width: 500px; height: 334px;}

    </style>
</head>
<body>
    <div id="tab-menu">
        <div id="tab-btn">
            <ul>
                <li><a href="#">Tab1</a></li>
                <li><a href="#">Tab2</a></li>
                <li><a href="#">Tab3</a></li>
                <li><a href="#">Tab4</a></li>
                <li><a href="#">Tab5</a></li>
            </ul>
        </div>
        <div id="tab-cont">
            <img src="img/img01.jpg" alt="이미지01" width="500">
        </div>
    </div>

    <!-- script -->
    <script src="jquery.min_1.1.24.js"></script>
    <script>
        // 버튼을 클릭하면 모든 글씨를 "menu"로 변경해주세요!
        // $("#tab-btn ul li").click(function(){
        //     $("#tab-btn ul li a").text("menu");
        // });
        // 버튼을 클릭하면 클릭한 글씨를 "menu"로 변경해주세요!
        $("#tab-btn ul li a").click(function(){
            $(this).text("menu");
        });

        // 첫 번째 버튼을 클릭하면 첫 번째 이미지 주소로 속성을 변경해주세요!
        $("#tab-btn ul li:eq(0)").click(function(){
            $("#tab-cont img").attr({"src":"img/img01.jpg", "alt":"이미지1"});
        });
        // 두 번째 버튼을 클릭하면 첫 번째 이미지 주소로 속성을 변경해주세요!
        $("#tab-btn ul li:eq(1)").click(function(){
            $("#tab-cont img").attr({"src":"img/img02.jpg", "alt":"이미지2"});
        });
        // 세 번째 버튼을 클릭하면 첫 번째 이미지 주소로 속성을 변경해주세요!
        $("#tab-btn ul li:eq(2)").click(function(){
            $("#tab-cont img").attr({"src":"img/img03.jpg", "alt":"이미지3"});
        });
        // 네 번째 버튼을 클릭하면 첫 번째 이미지 주소로 속성을 변경해주세요!
        $("#tab-btn ul li:eq(3)").click(function(){
            $("#tab-cont img").attr({"src":"img/img04.jpg", "alt":"이미지4"});
        });
        // 다섯 번째 버튼을 클릭하면 첫 번째 이미지 주소로 속성을 변경해주세요!
        $("#tab-btn ul li:eq(4)").click(function(){
            $("#tab-cont img").attr({"src":"img/img05.jpg", "alt":"이미지5"});
        });
    </script>

</body>
</html>

PrevioushasClass()NextscrollTop() / scrollLeft()

Last updated 4 years ago

Was this helpful?

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQueray10 attr(2)</title> <style> * {margin: 0; padding: 0;} ul {list-style: none;} a {text-decoration: none; color: #fff;} #tab-menu {width: 500px; margin: 50px auto; background: #ccc;} #tab-btn {} #tab-btn ul {overflow: hidden;} #tab-btn li {float: left; width: 20%; text-align: center;} #tab-btn li a {display: block; padding: 20px; background: #1e88e5;} #tab-cont {width: 500px; height: 334px;} </style> </head> <body> <div id="tab-menu"> <div id="tab-btn"> <ul> <li><a href="#">Tab1</a></li> <li><a href="#">Tab2</a></li> <li><a href="#">Tab3</a></li> <li><a href="#">Tab4</a></li> <li><a href="#">Tab5</a></li> </ul> </div> <div id="tab-cont"> <img src="img/img01.jpg" alt="이미지01" width="500"> </div> </div>  <script src="jquery.min_1.1.24.js"></script> <script> // 버튼을 클릭하면 모든 글씨를 "menu"로 변경해주세요! // $("#tab-btn ul li").click(function(){ // $("#tab-btn ul li a").text("menu"); // }); // 버튼을 클릭하면 클릭한 글씨를 "menu"로 변경해주세요! $("#tab-btn ul li a").click(function(){ $(this).text("menu"); }); // 첫 번째 버튼을 클릭하면 첫 번째 이미지 주소로 속성을 변경해주세요! $("#tab-btn ul li:eq(0)").click(function(){ $("#tab-cont img").attr({"src":"img/img01.jpg", "alt":"이미지1"}); }); // 두 번째 버튼을 클릭하면 첫 번째 이미지 주소로 속성을 변경해주세요! $("#tab-btn ul li:eq(1)").click(function(){ $("#tab-cont img").attr({"src":"img/img02.jpg", "alt":"이미지2"}); }); // 세 번째 버튼을 클릭하면 첫 번째 이미지 주소로 속성을 변경해주세요! $("#tab-btn ul li:eq(2)").click(function(){ $("#tab-cont img").attr({"src":"img/img03.jpg", "alt":"이미지3"}); }); // 네 번째 버튼을 클릭하면 첫 번째 이미지 주소로 속성을 변경해주세요! $("#tab-btn ul li:eq(3)").click(function(){ $("#tab-cont img").attr({"src":"img/img04.jpg", "alt":"이미지4"}); }); // 다섯 번째 버튼을 클릭하면 첫 번째 이미지 주소로 속성을 변경해주세요! $("#tab-btn ul li:eq(4)").click(function(){ $("#tab-cont img").attr({"src":"img/img05.jpg", "alt":"이미지5"}); }); </script> </body> </html>