속성 메서드

종류 jQuery Javascript 설명
Attributes .attr() setAttribute()
getAttribute()
.removeAttr()
.prop()
.removeProp()
.val()
CSS .addClass() .classList.add() 클래스(active) 추가합니다.
.removeClass() .classList.remove() 클래스(active) 삭제합니다.
.toggleClass() .classList.toggle() 클래스(active)를 추가/삭제합니다.
.hasClass() .classList.contains() 클래스를 찾은 후에 클래스를 제거합니다.
Dimensions .width() - 요소의 가로 값(padding/border/margin 불포함)을 가져오거나 설정합니다.
.innerWidth() element.clientWidth 요소의 안쪽(padding 포함, border/margin 불포함) 가로 값을 가져오거나 설정합니다.
.outerWidth() element.offsettWidth 요소의 바깥쪽(padding/border 포함, margin 불포함) 가로 값을 가져오거나 설정합니다.
.outerWidth(true) - 요소의 바깥쪽(padding/border/margin 포함) 가로 값을 가져오거나 설정합니다.
.height() - 요소의 세로 값(padding/border/margin 불포함)을 가져오거나 설정합니다.
.innerHeight() element.clientHeight 요소의 안쪽(padding 포함, border/margin 불포함) 세로 값을 가져오거나 설정합니다.
.outerHeight() element.offsettHeight 요소의 바깥쪽(padding/border 포함, margin 불포함) 세로 값을 가져오거나 설정합니다.
.outerHeight(true) - 요소의 바깥쪽(padding/border/margin 포함) 세로 값을 가져오거나 설정합니다.
$(document).width() - 문서의 가로 값을 가져오거나 설정합니다.
$(window)).width() window.innerWidth 브라우저의 가로 값을 가져오거나 설정합니다.
$(window)).height() window.innerHeight 브라우저의 세로 값을 가져오거나 설정합니다.
offset .offset().top / .offset().left .offsetTop / .offsetLeft 요소의 좌표 값(문서를 기준)을 가져오거나 설정합니다.
.offsetParent() - 요소의 좌표 값(부모 위치를 기준)을 가져오거나 설정합니다.
.position() - 요소의 좌표 값(기준점 기준)을 가져오거나 설정합니다.
.scollLeft() - 요소의 가로 스크롤 값을 가져오거나 설정합니다.
.scollTop() - 요소의 세로 스크롤 값을 가져오거나 설정합니다.
Data .data() -
.removeData() -

01. 속성 메서드 : addClass() / removeClass()

이미지1
이미지2
이미지3
이미지4
이미지5
이미지6
클릭하면 모든 이미지에 클래스(active)를 추가합니다. 클릭하면 모든 이미지에 클래스(active)를 삭제합니다. 
{
    $(".btn1-1").click(function(){
        $(".ex1 div").addClass("active");
    });

    $(".btn1-2").click(function(){
        $(".ex1 div").removeClass("active");
    });
}

02. 속성 메서드 : .toggleClass()

이미지6
이미지7
이미지8
이미지9
이미지10
이미지1
이미지를 클릭하면 클래스(active)를 추가/삭제합니다. 
{
    // 모든 이미지가 선택이 되는것.
    $(".ex2 div").click(function(){
        $(".ex2 div").toggleClass("active");
    });

    // 내가 클릭한 이미지만 선택이 되는것.(this사용)
    $(".ex2 div").click(function(){
        $(this).toggleClass("active");
    });
}

03. 속성 메서드 : .hasClass()

이미지11
이미지12
이미지13
이미지14
이미지15
이미지16
리셋 클릭하면 active 클래스를 찾은 후에 클래스를 제거합니다. 
{
    //리셋버튼을 클릭하면 세번째, 네번째 클래스 추가
    $(".btn3-0").click(function(){
        $(".ex3 > div:nth-child(3), .ex3 > div:nth-child(4)").addClass("active")
    })

    $(".btn3-1").click(function(){
        if( $(".ex3 > div").hasClass("active") ){
            $(".ex3 > div").removeClass("active");
        }
    });
}

04. width(), innerWidth(), outerWidth(), outerWidth(true), height(), innerHeight(), outerHeight(), outerHeight(true)

여기는 텍스트영역 입니다.

클릭하면 원의 가로(width)값을 구합니다. 클릭하면 원의 가로(innerWidth)값을 구합니다. 클릭하면 원의 가로(outerWidth)값을 구합니다. 클릭하면 원의 가로(outerWidth(true))값을 구합니다. 클릭하면 원의 세로(height)값을 구합니다. 클릭하면 원의 세로(innerHeight)값을 구합니다. 클릭하면 원의 세로(outerHeight)값을 구합니다. 클릭하면 원의 세로(outerHeight(true))값을 구합니다.
클릭하면 샘플 박스의 가로/세로 값을 구합니다. 클릭하면 문서(HTML)의 가로/세로 값을 구합니다. 클릭하면 브라우저의 가로/세로 값을 구합니다. 
{
    //width = 마진 + 패딩 + 보더

    // $(".btn4-1").click(function(){
    //     let circleWidth = $(".circle4").width();
    //     $(".text4").text(circleWidth)
    // });

    // $(".btn4-1").click(function(){
    //     $(".text4").text("이 원의 가로(width)는 " + $(".circle4").width() + "px 입니다.");
    // });

    function demension(name, size){
        $(".text4").text("이 원의 " + name + " 값은 " + size + "px 입니다.");
    }

    $(".btn4-1").click(function(){
        demension("가로(width)", $(".circle4").width());
    });
    $(".btn4-2").click(function(){
        demension("가로(innerWidth)", $(".circle4").innerWidth());
    });
    $(".btn4-3").click(function(){
        demension("가로(outerWidth)", $(".circle4").outerWidth());
    });
    $(".btn4-4").click(function(){
        demension("가로(outerWidth(true))", $(".circle4").outerWidth(true));
    });
    $(".btn4-5").click(function(){
        demension("세로(height)", $(".circle4").height());
    });
    $(".btn4-6").click(function(){
        demension("세로(innerHeight)", $(".circle4").innerHeight());
    });
    $(".btn4-7").click(function(){
        demension("세로(outerHeight)", $(".circle4").outerHeight());
    });
    $(".btn4-8").click(function(){
        demension("세로(outerHeight(true))", $(".circle4").outerHeight(true));
    });
    $(".btn4-9").click(function(){
        $(".text4").html("이 샘플 박스의 가로 값은 " + $("#sample04").width() + "px 입니다. 
이 샘플 박스의 세로 값은 " + $("#sample04").height() + "px 입니다.")
    });
    $(".btn4-10").click(function(){
        $(".text4").html("이 문서의 가로 값은 " + $(document).width() + "px 입니다. 
이 문서의 세로 값은 " + $(document).height() + "px 입니다.")
    });
    $(".btn4-11").click(function(){
        $(".text4").html("이 브라우저의 가로 값은 " + $(window).width() + "px 입니다. 
이 브라우저의 세로 값은 " + $(window).height() + "px 입니다.")
    });
}

05. width() / height() 변경

리셋 클릭하면 원의 가로 값을 300px로 변경합니다. 클릭하면 원의 세로 값을 300px로 변경합니다. 클릭하면 원의 가로, 세로 값을 200px로 변경합니다. 
{
    $(".btn5-0").click(function(){
        $(".circle5").width("70").height("70");
    });
    $(".btn5-1").click(function(){
        $(".circle5").width("300");
    });
    $(".btn5-2").click(function(){
        $(".circle5").height("300");
    });
    $(".btn5-3").click(function(){
        $(".circle5").width("200").height("200");
    });
}

06. offset() / position()

여기는 텍스트영역 입니다.

클릭하면 원의 x축 위치 값(offset)을 구합니다. 클릭하면 원의 y축 위치 값(offset)을 구합니다. 클릭하면 원의 x축 위치 값(position)을 구합니다. 클릭하면 원의 y축 위치 값(position)을 구합니다. 
{
    $(".btn6-1").click(function(){
        $(".text6").text("이 원의 x축 값은 " + parseInt($(".circle6").offset().left) + "px 입니다.")
    })
    $(".btn6-2").click(function(){
        $(".text6").text("이 원의 y축 값은 " + parseInt($(".circle6").offset().top) + "px 입니다.")
    })
    $(".btn6-3").click(function(){
        $(".text6").text("이 원의 x축 값은 " + parseInt($(".circle6").position().left) + "px 입니다.")
    })
    $(".btn6-4").click(function(){
        $(".text6").text("이 원의 y축 값은 " + parseInt($(".circle6").position().top) + "px 입니다.")
    })
}

07. offset() / position() 활용

offset().left = 0

offset().top = 0

position().left = 0

position().top = 0

원을 드래그하세요! 
{
    $( ".circle7" ).draggable({
        start: function() {
            $(".text7-5").text("드래그가 시작되었습니다.");
        },
        drag: function() {
            $(".text7-1 span").text( parseInt($(".circle7").offset().left) + "px" );
            $(".text7-2 span").text( parseInt($(".circle7").offset().top) + "px" );
            $(".text7-3 span").text( parseInt($(".circle7").position().left) + "px" );
            $(".text7-4 span").text( parseInt($(".circle7").position().top) + "px" );
        },
        stop: function() {
            $(".text7-5").text("드래그가 끝났습니다.");
        }
    });
}