정집사의 개발로그

1 2 3 4 5 // 기본, class요소 값이 'name'과 정확히 일하는 class를 선택한다. $('div[class="name"]').html('change'); // change: 1 // class요소의 값이 'name'으로 시작하는 모든 class를 선택한다. $('div[class^="name"]').html('change'); // change: 1, 2, 3 // class요소의 값이 'name'이 포함된 모든 class를 선택한다. $('div[class*="name"]').html('change'); // change: all // class요소의 값이 'name'으로 끝나는 모든 class를 선택한다. $('div[class$="name"]').html('change'); // ..

$(document).on('DOMSubtreeModified', 'div', function(e){ $(this).removeClass('animation'); // offsetWidth을 사용해서 요소의 상태를 초기화 처리 e.currentTarget.offsetWidth; $(this).show().addClass('animation'); }); remoClass와 addClass를 반복하면 .animation의 애니메이션효과는 반복되지 않는 현상이 있다. 이럴 때 e.currentTarget.offsetWidth; 를 사용하여 요소의 상태를 초기화를 해주면 애니메이션을 반복하여 실행시킬 수 있다.

$(document).on('DOMSubtreeModified', 'div', function(e){ console.log('내용 변경됨'); }); 위 코드를 이용하요 DOM의 내용 및 구조가 바뀌었을때 감지 가능하다.

jquery function으로 만들어본 input 숫자만 입력받게 하는 부분입니다. 숫자와 더불어 3자리 단위로 콤마까지 자동으로 찍히게 합니다. JavaScript 코드입니다. (function ($) { // 숫자 제외하고 모든 문자 삭제. $.fn.removeText = function(_v){ //console.log("removeText: 숫자 제거 합니다."); if (typeof(_v)==="undefined") { $(this).each(function(){ this.value = this.value.replace(/[^0-9]/g,''); }); } else { return _v.replace(/[^0-9]/g,''); } }; // php의 number_format과 같은 효과. $...

Click 위 태그처럼 앵커태그를 클릭했을때 페이지가 맨위로 이동되는 현상이 있습니다. 대체적으로 페이지내에서 스크롤 이동할때나 "맨 위로 이동"등의 이벤트를 발생시키기 위해 자주 사용합니다. 하지만 이런 이벤트를 발생시키지 않아야 할 때도 있습니다. 예를들어 앵커태그를 클릭하여 데이터가 나오는 형식으로 마크업 할때 입니다.(아래 코드 참조) # HTML ############################################# Click # JavaScript ######################################### jQuery(function($){ $(".detail").click(function(){ // do nothing }); }); 이럴때 사용하는 것이 jQuery..

기존 자식창(팝업)에서 부모창으로 값을 전달할 때 아래와 같은 코드를 사용 했었는데. opener.document.getElementById("key").value = key; jQuery로 아래와 같이 간단하게 사용 할 수있다. $("#key", opener.document).val(key);