주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

jQuery는 DOM 객체를 탐색, 접근하여 조작하는 여러가지 방법을 제공한다. 실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다. animate css 속성의 애니메이션 효과를 만들 수 있다. // CSS #box { width:300px; height:300px; background:red; } // HTML // jQuery $('#box').animate({ opacity : 0.25, width : '100px', height : '100px' }, 5000, function(){ // 5000은 5초를 의미 // 종료 후 실행될 코드 작성 }); show & hide 선택자를 즉시 표시하거나 감춘다. css 메서..

jQuery는 DOM 객체를 탐색, 접근하여 조작하는 여러가지 방법을 제공한다. 실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다. data 일치하는 요소의 데이터 저장소의 값을 설정하거나 가져올 수 있다. 빈 값으로 호출하게되면 데이터 저장소에 저장된 모든 key, value값을 가져온다. data 메서드를 통해 DOM에 데이터 값을 업데이트해도 DOM 속성에는 영향을 미치지 않는다. data-* 속성 값을 설정하려면 attr을 사용하면된다. removeData 메서드를 통해 데이터 저장소의 값을 제거할 수 있다. // HTML // jQuery // tag 반환 $('#box').data('type'); // color..

jQuery는 DOM 객체를 탐색, 접근하여 조작하는 여러가지 방법을 제공한다. 실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다. after 선택자 요소 다음에 콘텐츠가 삽입된다. 구문의 차이만 빼고는 insertAfter와 동일한 작업을 수행한다. // HTML 내용 // jQuery $('#wrap').after('새로운내용'); // 출력 내용 새로운내용 insertAfter 선택자 요소 다음에 콘텐츠가 삽입된다. 구문의 차이만 빼고는 after와 동일한 작업을 수행한다. // HTML 내용 // jQuery $('새로운').insertAfter('#wrap'); // 출력 내용 새로운내용 before 선택자 요소 ..

jQuery는 DOM 객체를 탐색, 접근하여 조작하는 여러가지 방법을 제공한다. 실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다. append 콘텐츠를 선택자 내부의 끝에 삽입한다. 구문의 차이만 빼고는 appendTo와 동일한 작업을 수행한다. // HTML 내용 // jQuery $('#wrap').append('새로운내용'); // 출력 내용 새로운내용 appendTo 콘텐츠를 선택자 내부의 끝에 삽입한다. 구문의 차이만 빼고는 append와 동일한 작업을 수행한다. // HTML 내용 // jQuery $('새로운내용').appendTo('#wrap'); // 출력 내용 새로운내용 prepend 콘텐츠를 선택자 내..