top

속성 메서드

종류 제이쿼리 예시 자바스크립트 설명
Attributes .attr() setAttribute()
getAttribute()		 -
.removeAttr() - -
.prop() - -
.removeProp() - -
.val() - -
CSS .css() - -
.addClass() classList.add() 클래스 명을 추가
.removeClass() classList.remove() 클래스 명을 삭제
.toggleClass() classList.toggle() 클래스 명을 추가 / 삭제
.hasClass() classList.contains() 클래스 명을 검색
Dimensions .width() - 요소의 가로 값(패딩/보더/마진 불포함)을 가져오거나 설정
.innerWidth() element.innerWidth 요소의 가로 값(패딩 포함)을 가져오거나 설정
.offsetWidth() element.offsetWidth 요소의 가로 값(패딩/보더 포함)을 가져오거나 설정
.outerWidth(true) - 요소의 가로 값(패딩/보더/마진 포함)을 가져오거나 설정
.height() - 요소의 세로 값(패딩/보더/마진 불포함)을 가져오거나 설정
.innerHeight() element.clientHeight 요소의 세로 값(패딩 포함)을 가져오거나 설정
.outerHeight() element.offsetHeight 요소의 세로 값(패딩/보더 포함)을 가져오거나 설정-
.outerHeight(true) - 요소의 세로 값(패딩/보더/마진 포함)을 가져오거나 설정-
$(document).width() - 문서의 가로 값을 가져오거나 설정
$(window).width() window.innerWidth() 브라우저의 가로 값을 가져오거나 설정
$(window).height() window.innerHeight() 브라우저의 세로 값을 가져오거나 설정
offset .offset() - 요소의 좌표 값(문서를 기준)을 가져오거나 설정
.offsetParent() - 요소의 좌표 값(부모 위치를 기준)을 가져오거나 설정
.postion() - 요소의 좌표 값(기준점 기준)을 가져오거나 설정
.scrollLeft() - 요소의 가로 스크롤 값을 가져오거나 설정
.scrollTop() - 요소의 세로 스크롤 값을 가져오거나 설정
Data .data() - -
.removeData() - -

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

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

02. 속성 메소드 : toggleClass()

이미지1
이미지2
이미지3
이미지4
이미지5
이미지를 클릭하면 클래스(active)를 추가/삭제합니다. 
{
    //모든 이미지 선택
    $(".ex2 div").click(function () {
        $(".ex2 div").toggleClass("active");
    });

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

03. 속성 메소드 : hasClass()

이미지1
이미지2
이미지3
이미지4
이미지5
리셋 클릭하면 .active 클래스를 찾은 후에 클래스를 제거합니다. 
{
    //리셋버튼을 클릭하면 1,4번째 클래스 추가
    $(".btn3-0").click(function () {
        $(".ex3 > div:nth-child(1)").addClass("active");
        $(".ex3 > div:nth-child(4)").addClass("active");
    });
    $(".btn3-1").click(function () {
        if ($(".ex3 > div").hasClass("active")) {
            $(".ex3 > div.active").removeClass("active");
        }
    });
}

04. 속성 메소드 : width() / innerWidth() / outerWidth() / height() / innerheight() / outerheight()

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

클릭하면 원의 가로(width)값을 구합니다 클릭하면 원의 가로(innerWidth)값을 구합니다 클릭하면 원의 가로(outerWidth)값을 구합니다 클릭하면 원의 가로(outerWidth(true))값을 구합니다 클릭하면 원의 세로(height)값을 구합니다 클릭하면 원의 세로(innerWidth)값을 구합니다 클릭하면 원의 세로(outerHeight)값을 구합니다 클릭하면 원의 세로(outerHeight(true))값을 구합니다
클릭하면 샘플 박스의 가로/세로값을 구합니다 클릭하면 문서의 가로/세로값을 구합니다 클릭하면 브라우저의 가로/세로값을 구합니다 
{
    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)', $('.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)', $('.circle4').outerHeight(true));
    });

    $('.btn4-9').click(function () {
      $('.text4').text(`이 샘플 박스의 가로값은 ${$('#sample04').width()}px 이고, 세로 값은 ${$('#sample04').height()}px 입니다.`);
    });

    $('.btn4-10').click(function () {
      $('.text4').text(`이 문서의 가로값은 ${$(document).width()}px 이고, 세로값은 ${$(document).height()}px 입나다.`);

    });

    $('.btn4-11').click(function () {
      $('.text4').text(`이 브라우저의 가로값은 ${$(window).width()}px 이고, 세로값은 ${$(window).height()}px 입나다.`);
    });
}

05. 속성 메소드 : width() / innerWidth() / outerWidth()

리셋 클릭하면 원의 가로 값을 300px로 변경합니다. 클릭하면 원의 세로 값을 300px로 변경합니다. 클릭하면 원의 가로와 세로 값을 200px로 변경합니다. 
{
    $('.btn5-0').click(function () {
        $('.circle5').width("100").height("100");
    });
    $('.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({
        containment:"#sample07 .view",
        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("드래그가 끝났습니다.");
        }
    });
}