본문 바로가기

개발/jQuery 기초 정리

(17)
[jQuery기초] ajax AJAX 통신 jQuery는 AJAX 통신 관련해서 다양하고 편리한 메서드들을 제공한다. 실무에서 많이 사용하는 메소드 위주로 요약해서 작성하였으며 모든 메서드나 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트 AJAX를 참조하면 된다. 메소드 $.ajax 비동기식 Ajax를 이용하여 HTTP 요청을 전송 $.get 전달받은 주소로 GET 방식의 HTTP 요청을 전송 (데이터 요청에 많이 사용) $.post 전달받은 주소로 POST 방식의 HTTP 요청을 전송 (데이터 전송에 많이 사용, 데이터를 캐시하지 않는다.) $.getScript 웹 페이지에 스크립트를 추가함 $.getJSON 전달받은 주소로 GET 방식의 HTTP 요청을 전송하여 JSON 파일로 응답 받음 .load() 서버에서 데이터..
[jQuery기초] 요소조작_이벤트_slice_trim_extend_each jQuery는 DOM 객체를 탐색, 접근하여 조작하는 여러가지 방법을 제공한다. 실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다. slice 선택자를 기준으로 시작과 끝 index의 값에 의해 요소를 반환한다. index는 0부터 시작한다. // HTML 1번 2번 3번 4번 // jQuery $('#box div').slice(1); // 2번 div 반환 $('#box div').slice(1,3); // 2번, 3번 div 반환 var array = ['red', 'green', 'blue', 'black', 'pink']; array.slice(2,4); // 'blue', 'black' 반환 trim 문자열의 시..
[jQuery기초] 요소조작_이벤트_replaceAll_replaceWith jQuery는 DOM 객체를 탐색, 접근하여 조작하는 여러가지 방법을 제공한다. 실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다. replaceAll & replaceWith 선택자 DOM을 제거하고 새 콘텐츠를 삽입한다 replaceAll, replaceWith 메서드들은 같은 동작을 하고 있으며 구문의 차이가 있다. // HTML 1번 2번 // jQuery $( "새로운" ).replaceAll( ".inner" ); $( ".inner" ).replaceWith( "새로운" ); // 출력 새로운 새로운
[jQuery기초] 요소조작_이벤트_animate_show&hide_css 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기초] 요소조작_이벤트_width_innerWidth_height_innerHeight jQuery는 DOM 객체를 탐색, 접근하여 조작하는 여러가지 방법을 제공한다. 실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다. width 요소의 너비 값을 가져온다. css의 padding 값을 무시한다. // CSS #box { padding:50px; width:300px; } // HTML // jQuery $('#box').width(); // 300을 반환 innerWidth 요소의 너비 값을 가져온다. css의 padding 값을 포함한 값을 가져온다. // CSS #box { padding:50px; width:300px; } // HTML // jQuery $('#box').innerWidth(); //..
[jQuery기초] 요소조작_이벤트_data, removeData, attr, removeAttr, prop, removeProp jQuery는 DOM 객체를 탐색, 접근하여 조작하는 여러가지 방법을 제공한다. 실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다. data 일치하는 요소의 데이터 저장소의 값을 설정하거나 가져올 수 있다. 빈 값으로 호출하게되면 데이터 저장소에 저장된 모든 key, value값을 가져온다. data 메서드를 통해 DOM에 데이터 값을 업데이트해도 DOM 속성에는 영향을 미치지 않는다. data-* 속성 값을 설정하려면 attr을 사용하면된다. removeData 메서드를 통해 데이터 저장소의 값을 제거할 수 있다. // HTML // jQuery // tag 반환 $('#box').data('type'); // color..
[jQuery기초] 요소조작_이벤트_before, insertBefore, after, insertAfter jQuery는 DOM 객체를 탐색, 접근하여 조작하는 여러가지 방법을 제공한다. 실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다. after 선택자 요소 다음에 콘텐츠가 삽입된다. 구문의 차이만 빼고는 insertAfter와 동일한 작업을 수행한다. // HTML 내용 // jQuery $('#wrap').after('새로운내용'); // 출력 내용 새로운내용 insertAfter 선택자 요소 다음에 콘텐츠가 삽입된다. 구문의 차이만 빼고는 after와 동일한 작업을 수행한다. // HTML 내용 // jQuery $('새로운').insertAfter('#wrap'); // 출력 내용 새로운내용 before 선택자 요소 ..
[jQuery기초] 요소조작_이벤트_append, appendTo, prepend, prependTo jQuery는 DOM 객체를 탐색, 접근하여 조작하는 여러가지 방법을 제공한다. 실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다. append 콘텐츠를 선택자 내부의 끝에 삽입한다. 구문의 차이만 빼고는 appendTo와 동일한 작업을 수행한다. // HTML 내용 // jQuery $('#wrap').append('새로운내용'); // 출력 내용 새로운내용 appendTo 콘텐츠를 선택자 내부의 끝에 삽입한다. 구문의 차이만 빼고는 append와 동일한 작업을 수행한다. // HTML 내용 // jQuery $('새로운내용').appendTo('#wrap'); // 출력 내용 새로운내용 prepend 콘텐츠를 선택자 내..