본문 바로가기

Javascript

78개의 포스트
jQuery 순수 자바스크립트 DOM elements 접근 방법

기본적으로 jQuery에서 셀렉터(selector ), 함수(method)를 사용하면 jQuery object가 리턴됩니다. 이 오브젝트를 기반으로 여러 method들을 묶어서(chaining) 사용할 수 있습니다. 하지만 가끔씩 순수 자바스크립트의 DOM element를 직접 접근 해야 할 때가 있습니다. 이럴 경우를 대비해서 jQuery에는 get() method를 제공하는데, 예를 들어 특정 element의 tag 이름을 얻고 싶을 때는 다음과 같이 작성 할 수 있습니다. var tag = $('.element').get(0).tagName; .get() 메소드 대신 이렇게 바로 $('.element')[0] 사용할 수도 있습니다.

2013년 06월 19일
jQuery bind(), on(), live(), delegate()

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

2013년 06월 19일
jQuery find(), filter() 의 차이

.find() - 하위의 대상을 파라미터로 받습니다. -> $('#selector').find('a') #selector의 자식들 중 모든 a .filter() - 파라미터로 받은 셀렉터를 찾습니다. -> $('a').filter('#selector') #selector라는 ID를 가진 a

2013년 05월 02일
jQuery $.ajax() 옵션 정리 (동기식 처리:async 캐시 처리 : cache)

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 통신 후 응답 데이터 타..

2013년 04월 01일
jQuery submit()

.submit() – 폼 전송 $('form').submit(function() { if($('#inputText').val() == 'submittest') { return true; } else if ($('#inputText').val() != 'submit test') { $('span').text('텍스트를정확히 입력하여 주십시오').show().fadeOut(1000); return false; } }); Target 'submittest'를 입력하세요.

2013년 04월 01일
jQuery attr(), removeAttr(), val()

.attr() - 해당 요소의 속성값 가져오기, 해당 요소의 속성값 부여 .removeAttr() - 해당 요소의 속성값 제거 .val() - 해당 요소의 value 속성값 가져오기 $('#attrBtn').click(function(){ alert($('#target').attr('value')); }); $('#removeAttrBtn').click(function(){ $('#target').removeAttr('value'); }); $('#valBtn').click(function(){ alert($('#target').val()); }); Target

2013년 04월 01일
jQuery addClass(), removeClass(), hasClass(), toggleClass()

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..

2013년 04월 01일
jQuery replaceAll(), replaceWith()

.replaceAll() – 지정한 요소들을 다른 요소로 대체 합니다. .replaceWith() – 지정한 요소들을 새로운 요소로 대체 합니다. $('#replaceAllBtn').click(function(){ $('#source').replaceAll($('#target')); }); $('#replaceWithBtn').click(function(){ $('#target').replaceWith($('#source')); }); Source 적용되어질 텍스트입니다. Target 타겟 영역입니다.

2013년 04월 01일
jQuery detach(), empty(), remove()

.detach() – 지정한 요소를 포함 하위 요소 모두 제거 .empty() – 지정한 요소의 하위 요소를 제거 .remove() – 지정한 요소를 포함 하위 요소 모두 제거, 요소와 관련된 이벤트와 데이터 모두 제거 $('#detachBtn').click(function(){ $('#target').detach(); }); $('#emptyBtn').click(function(){ $('#target').empty(); }); $('#removeBtn').click(function(){ $('#target').remove(); }); Target

2013년 04월 01일
jQuery wrap(), unwrap(), wrapInner(), wrapAll()

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')); });

2013년 04월 01일
jQuery after(), insertAfter(), before(), insertBefore()

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..

2013년 04월 01일
jQuery append(), appendTo(), prepend(), prependTo(), text(), html()

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..

2013년 04월 01일
jQuery bind(), unbind(), trigger()

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

2013년 04월 01일
jQuery DOM 탐색 Selector

가능하면 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를 기..

2013년 04월 01일
jQuery display 속성 여부에 따라 show, hide

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'; }

2013년 03월 15일
jQuery if문 요소(element)가 있는지 확인 하기

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

2013년 03월 14일
jQuery scrollTop()

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

2013년 01월 28일
jQuery animate() stop() 사용방법

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

2013년 01월 27일