본문 바로가기

Dev. Web/JavaScript Jquery

[jQuery] 속성, 속성 추가 제거 (attr, removeAttr) 서방님

  • .attr(attributeName)  / version added : 1.0
     - 해당 속성 이름의 값을 return 한다.

    예)
    $(document).ready(function(){
        $("#test_id").click(function(){
            var title = $("#a").attr("title");
            $("#b").text(title);
        });
    });

     - test_id 라는 id를 가진 요소를 클릭하면 a라는 id를 가진 요소의 title 속성을 b라는 id를 가진 요소에 작성된다.

  • .attr(attributeName, value)  / version added : 1.0
     - 해당 요소의 속성(attributeName)의 값을 변경시킨다.

    예)
    $(document).ready(function(){
        $("#test_id").click(function(){
            $("#a").attr("src", "img/test.gif");
        });
    });

     - test_id라는 id를 가진 요소를 클릭하면 a라는 id를 가진 요소의 src경로를 img/test.gif로 변경한다.

  • .attr(attributeName, fn)  / version added : 1.1
     - 해당 요소의 속성(attributeName)의 값을 function으로 변경시킨다.

    예)
    $(document).ready(function(){
        $("#test_id").click(function(){
            $("#a").attr("src", function(){
                return "img" + this.title + ".gif";
            });
        });
    });

     - test_id라는 id를 가진 요소를 클릭하면 a라는 id를 가진 요소의 src경로를 img/ + 해당속성의 title + .gif 경로로 변경시킨다.

  • .attr(map)  / version added 1.0
     - 해당 요소에 여러 속성을 변경한다.

    예)
    $(document).ready(function(){
        $("#test_id").click(function(){
            $("#a").attr({
                src : "img/test.gif",
                title : "test",
                alt : "test"
            });
        });
    });
     - test_id라는 id를 가진 요소를 클릭하면 a라는 id를 가진 요소의 src경로를 img/test.gif로 title과 alt는 test로 변경한다.



  • .removeAttr(attributeName)  / version added : 1.0
     - 해당 요소의 속성(attributeName)을 제거한다.

    예)
    $(document).ready(function(){
        $("#test_id).click(function(){
            $("#a").removeAttr("disabled");
        });
    });

     - test_id라는 id를 가진 요소를 클릭하면 a라는 id를 가진 요소의 disabled속성을 제거한다.