제이쿼리에서 엘리먼트에 정의된 이벤트를 확인 할 수 있습니다. var events = $._data(element, 'events'); 아래 코드를 실행하면 해당 버튼에 어떤 이벤트가 있는지 확인할 수 있습니다. This is demo text $("#demo").click(function() { console.log("Does event exists? - " + hasEvents); }); var events = $._data($("#demo")[0], "events"); var hasEvents = (events != null);

var divs = $('div > div'); for(var i = 0; i < divs.length; i+=3) { divs.slice(i, i + 3).wrapAll(''); }

페이지에서 DOM뿐만 아니라 리소스 호출까지 완료 되었을 경우 실행됩니다. $(window).on('load', function(){ // 실행 }); window.onload = function(){ // 실행 }; 소스와 상관없이 DOM만 생성되어도 실행이 됩니다. 즉, 이미지와 같은 리소스를 요구하는 페이지일 경우 이미지의 로딩 완료에 상관없이 진행됩니다. $(document).ready(function(){ // 실행 });

jquery를 사용하면서 가장 많이 쓰고 쓰이고 있고 사용되고 있는 이벤트 핸들러 메서드 bind(), on(), live(), delegate() 어느 누구는 bind를 써라. 아니다 bind보다는 on이다. live도 쓰이던데 delegate는? 대체 그 차이점은 무엇이고 언제 써야 하는 건지 정리해 보았습니다. bind() $(select).bind('click', function(){ ... }); jQuery1.7인 시점에서 bind는 사용하지 않습니다. 그 이유는 on메서드가 나오면서 새로운 기능 적용이 안될 예정이며 사라질 수도 있기 때문입니다. 단일 요소를 각 이벤트 처리기에 연결합니다. 업데이트(복제)된 요소는 이 이벤트 처리기를 받을 수 없습니다. 복제된 요소가 생긴 다음에 unbind..

Ajax는 비동기 방식으로 http통신을 통해 데이터를 주고받으며 화면 일부분을 페이지의 전환 없이 최신의 데이터로 업데이트 시켜줄 수 있는 개발방식입니다. 기본 속성 data: 서버에 전송할 데이터 key/value형식의 객체 dataType: 서버가 리턴하는 데이터 타입(xml, json, script, html) type: 서버로 전송하는 데이터의 타입(POST, GET) url: 데이터를 전송할 URL success: ajax통신이 성공했을 때 처리할 내용 error: ajax통신 에러 발생 시 처리할 내용 $.ajax({ data:{'data':$('#inputText').val()}, // URL 호출시 보낼 파라미터 데이터 dataType:'json', // http 통신 후 응답 데이터 타..

addClass() – 지정한 요소에 클래스를 추가 removeClass() – 지정한 요소에 클래스를 제거 hasClass() – 지정한 요소에 클래스 유무 확인 toggleClass() – 지정한 요소에 클래스를 추가/제거 $('#addClassBtn').click(function(){ $('#target').addClass('testClass'); }); $('#removeClassBtn').click(function(){ $('#target').removeClass('testClass'); }); $('#hasClassBtn').click(function(){ if($('#target').hasClass('testClass') == true) { alert('textClass 있음'); } els..

wrap() – 대상 요소를 감쌈 unwrap() – 감싸고 있는 부모를 삭제 wrapInner() – 대상 요소의 하위 요소를 감쌈 wrapAll() - 대상 요소들을 한번에 감쌈 $('#wrapBtn').click(function(){ $('#target').wrap($('#source')); }); $('#unwrapBtn').click(function(){ $('#innerTarget').unwrap(); }); $('#wrapInnerBtn').click(function(){ $('#target').wrapInner($('#source')); }); $('#wrapAllBtn').click(function(){ $('#target').wrapAll($('#source')); });

after() - 지정한 요소 뒤에 새로운 요소를 삽입 insertAfter() - 지정한 요소 뒤에 새로운 요소를 삽입 after()와 insertAfter()는 동일한 기능을 수행하지만, 삽입될 내용과 타겟의 위치가 다릅니다. A.after(B) – A 뒤에 B를 추가 A.insertAfter(B) – B 뒤에 A를 추가 $('#afterBtn').click(function(){ $('#target').after($('#source')); }); $('#insertAfterBtn').click(function(){ $('#source').insertAfter($('#target')); // after와 타겟, 소스 위치가 다름 }); before() – 지정한 요소의 시작 부분에 내용을 삽입 inse..

append() - 지정한 요소의 마지막에 내용 추가 appendTo() - 지정한 요소의 마지막에 내용 추가 append()와 appendTo()는 동일한 기능을 수행하지만, 추가될 내용과 타겟의 위치가 다릅니다. A.append(B) - A에 B를 추가 A.appendTo(B) – B에 A를 추가 prepend() – 지정한 요소의 시작 부분에 내용 추가 prependTo() – 지정한 요소의 시작 부분에 내용 추가 prepend ()와 prependTo()는 동일한 기능을 수행하지만, 추가될 내용과 타겟의 위치가 다릅니다. A.prepend(B) - A에 B를 추가 A.prependTo(B) – B에 A를 추가 text(value) – 지정한 요소 내부에 새로운 text 문자열(value) 추가 h..

bind() – 이벤트 연결 $('#click_btn').bind('click', function() { alert('OK'); }); unbind() – 이벤트 해제 $('#click_btn').bind('click', function() { $('#click_btn').unbind('click'); // click 이벤트를 해제(비활성) }); trigger() – 이벤트 자동 발생 $('#click_btn').trigger('click'); // 해당 엘리먼트의 이벤트 자동 실행

가능하면 ID selector를 사용하세요. jQuery에서는 document.getElementById()를 사용하기 때문에 ID selector가 빠릅니다. 하지만 가장 빠른 것은 native javascript 입니다. // Fastest document.getElementById(‘myId’); // Fast - still little slower than native $(‘#myId’); // Slow $('.myClass'); class selector를 사용할 때에는 element type을 selector 앞에 사용하지 마세요. // Fast var $products = $('.products'); // Slow var $products = $('div.products'); 특정 id를 기..

css display 속성을 이용해 컨텐츠 영역을 접거나 펼치는 방법 입니다. if ( $('.box').css('display') === 'none' ) { $('.box').show(); } else { $('.box').hide(); } 위 코드를 자바스크립트로 변경하면 아래와 같습니다. var box = document.querySelector('.box'); if ( box.style.display === 'none' ){ box.style.display = 'block'; } else { box.style.display = 'none'; }

jQuery에서 요소가 있는지 .length 속성을 사용해 확인 합니다. if ($('#elem').length) { alert('elem exists'); } 자바스크립트에서는 아래와 같이 해당 id가 있는지(exists) 체크를 합니다. if (document.getElementById('elem')) { alert('myDiv exists'); }

jQuery의 scrollTop 메서드는 선택한 요소의 y축 좌표를 알아내는 데에 쓰이거나, 혹은 값을 미리 지정하여 스크롤이 그만큼 내려가 있게 할 수 있느 메서드입니다. See the Pen jQuery scrollTop by ho (@ho) on CodePen. $(window).scrollTop(300); 그리고 스크롤 바를 원하는 좌표에 미리 셋팅하여 줄 수도 있습니다. 이렇게 scrollTop 에 300 만큼의 값을 넣어 준 만큼 미리 스크롤이 이동하였다는걸 알 수 있습니다.

jQuery로 애니메이션을 구현할 때 흔히 만나게 되는 문제가 하나 있습니다. 바로 애니메이션 큐(queue) 입니다. 예를들어, 네비게이션 메뉴에 마우스가 오면 애니메이션이 동작하게 코딩이 된 경우, 마우스를 여러번 움직였을 때, 이전 애니메이션이 멈추기 전까지 마지막 애니메이션이 동작하지 않는 현상이 바로 애니메이션 큐로 인해 발생하는 문제입니다. 이러한 문제가 일어나는 이유는 이벤트가 일어날 때마다 큐를 만들기 때문에 이들이 순차적으로 진행되면서 원하지 않는 효과가 나타납니다. See the Pen jQuery animate stop by ho (@ho) on CodePen. 위의 경우 마우스를 여러번 위아래로 움직이면 움직인 횟수만큼 바 애니메이션이 반복되는 것을 볼 수 있습니다. 반면 아래의 경..