영역의 크기 메소드

영역의 크기 페이지 내의 모든 사각형 영역의 너비와 높이를 알아내거나 수정할 때 사용한다. 영역의 크기를 가져오거나 설정하는 메소드 메소드 설명 .height() 영역의 높이를 리턴한다. (바깥 여백, 테두리, 안쪽 여백 X) .width() 영역의 너비를 리턴한다. (바깥 여백, 테두리, 안쪽 여백 X) 메소드 설명 .innerHeight() 영역의 높이에 안쪽 여백을 더한 값을 리턴한다. .innerWidth() 영역의 너비에 안쪽 여백을 더한 값을 리턴한다. .outerHeight() 영역의 높이에 안쪽 여백과 테두리 두께를 더한 값을 리턴한다. .outerWidth() 영역의 너비에 안쪽 여백과 테두리 뚜께를 더한 값을 리턴한다. .outerHeight(true) 영역의 높이에 안쪽 여백과 테두리..

2022.01.11

.on(events[,selector][,data],function)

.on(events[,selector][,data],function) .on() 메서드는 .bind() 메서드와 마찬거지로 이벤트 핸들러를 등록하기 위하여 사용되는 메서드이다. on() 메서드는 동적으로 생성될 요소에 대해서도 이벤트 처리가 가능하다. new $(function(){ $('#create').on('click', function(){ $('div').html('ok'); }); $('body').on('click', '#newButton', function(){ console.log('click'); }); }) 참고:) https://xianeml.tistory.com/71 jQuery 제이쿼리 이벤트, Ajax 비동기 처리 🎯 자바스크립트 라이브러리 jQuery 이벤트 처리와 Ajax ..

2022.01.04

Ajax로 불러온 엘리먼트의 이벤트가 작동 하지 않을때

Ajax로 불러온 클래스에 클래스명으로 이벤트를 걸면 해당 이벤트가 작동하지 않는다. click이벤트는 이미 페이지에 있는 요소에 대해서만 작동을 하기 때문에, Ajax를 이용해 동적으로 가져온 요소에 대해서는 작동하지 않기 때문이다. $('.class').click(function(){ }); 이럴때는 위의 소스를 아래와 같이 변경해준다. $('document').on('click', '.class', function(){ }); 동적으로 가져온 요소에 대해서는 이벤트 핸들러 등록을 해야한다. 이벤트 핸들러 등록을 하기 위해 .on()메서드를 사용한다. 참고:) https://xianeml.tistory.com/71 jQuery 제이쿼리 이벤트, Ajax 비동기 처리 🎯 자바스크립트 라이브러리 jQue..

2021.12.31

jQuery Swiper

jQuery Swiper PC, Mobile 2가지 환경에서 사용하기 위해 2가지 이벤트를 한번에 줘야 한다. 초기 Y값과 마지막(드래그 후) Y값을 비교하여 어떤 방향으로 swipe 되었는지 if문을 사용해 걸러낸다. 이벤트 주기 $('선택자').on(touchstart mousedown) $('선택자').on(touchend mouseup) 페이지 Y좌표 구하기 startY = e.pageY; // pc(마우스) e.originalEvent.touches[0].pageY; // touchstart Y좌표 모바일(터치) e.originalEvent.changedTouches[0].pageY; // touchend Y좌표 모바일(터치) start, down 과 end, up Y좌표 비교하기 if( sta..

2021.12.27

jQuery scroll 스크롤 끝을 확인하는 방법

브라우저 창 끝 이벤트 $(window).scroll(function(){ if ($(window).scrollTop() == $(document).height() - $(window).height()) { alert('End of Window'); } }); DIV 끝 이벤트 $("#inside").scroll( function() { var elem = $("#inside"); if ( elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) { alert("End of Yellow"); } });

2021.12.21

jQuery sticky menu, scroll spy

See the Pen jQuery sticky, spy by miok (@slog-miok) on CodePen. CSS *{margin: 0 ; padding: 0} ol,ul{list-style: none} a{color: #333; text-decoration: none} #wrap{width:1000px; margin: 0 auto; overflow: hidden} header{position: fixed; left:0; top:0; height:150px; background: #0f0; width: 100%; z-index: 50} .main{height: 200px; background: orange; margin-top: 150px} .navBox{ background: #ccc} /* 상..

2021.12.16