Web

[Javascript / jQuery] Ajax

1. Ajax 개요 Ajax는 웹브라우저가 서버와 통신하는 방식을 말합니다. 전통적인 웹브라우저의 동작 방식은 웹브라우저가 필요한 데이터를 서버에 요청하고 서버가 그 결과를 반환하면 웹브라우저가 결과를 받아 화면에 표시합니다. 이 과정에서 웹브라우저는 서버에 요청하고 서버의 응답을 받아 표시하는 과정에서 페이지 전환이 이루어지게 되는데 이때 사용자는 화면이 제대로 표시될 때까지 매번 기다려야 합니다. 뿐만 아니라 서버에서 결과를 받아 새롭게 표시해야 할 내용이 전체 페이지 내용 중에서 일부분에 불과한 경우에는 이 일부분의 결과를 표시하기 위해 페이지 전체를 새로 받아 표시해야 하므로 대역 팽나무 비도 초래하죠. 이 문제를 해결하고자 하는 통신방식이 바로 Ajax입니다. 예를 들어 티스토리 블로그에서 덧글..

[jQuery] 전역함수

jQuery에서 전역 함수는 다음과 같이 생성합니다. javascript에서 단순 함수를 만들어 사용해도 되는 부분이지만 jQuery에서는 이렇게 사용하는 것도 가능하다는 것만 참고로 하면 될 것 같습니다. $.[함수명]의 형태로 선언한 뒤에 원하는 함수를 구현하고 $.[함수명]의 형태로 호출합니다. 만약 함수를 호출하는데 선택자가 사용되어야 한다면 jQuery의 fn속성을 사용해야 합니다. $.fn.myfunc = function () { $(this).animate({ opacity: 0.2 }, 'slow', function() { alert('완료'); }); }; $(function () { $('img').myfunc(); }); 이때 this는 선택자에서 선택된 요소를 의미하며 함수를 호출할..

[jQuery] 효과

1. 기본 메서드 JQuery는 시각적인 효과를 내기 위해 기본적으로 아래의 메서드를 제공하고 있습니다. show() 화면에 표시합니다. hide() 화면에서 숨김니다. toggle() show()와 hide()가 번갈아 실행됩니다. slideDown() 슬라이드 형태로 표시합니다. slideUp() 슬라이드 형태로 숨김니다. slideToggle() slideDown()과 slideUp()을 번갈아 실행합니다. fadeIn() 페이드 형태로 표시합니다. fadeOut() 페이드 형태로 숨김니다. fadeToggle() fadeIn()과 fadeOut()을 번갈아 실행합니다. ※ 번갈아 실행된다는 의미는 예를 들어 show()일 때 hide()를 한번 수행하고 hide()일 때 show()를 한번 수행한..

[jQuery] 이벤트 다루기

1. 이벤트 이벤트는 '사건'을 의미합니다. 요소를 클릭하는 경우에는 클릭이라는 행위 자체를 하나의 이벤트라고 볼 수 있으며 ready와 같은 경우에도 문서가 준비됨을 알리는 이벤트라고 할 수 있습니다. 2. 이벤트 연결 jQuery에서 이벤트를 연결하는데 사용되는 메서드로 on이 있습니다. 이벤트를 연결하는 기본적인 메서드입니다. 아래 예제에서는 요소를 클릭했을 때 이벤트를 연결하는 과정을 보여주고 있습니다. 클릭 문자열 이외에 객체를 통한 이벤트 연결도 가능합니다. $(function () { $('span').on({ click: function() { alert($(this).text()); } }) }); 위 예제의 경우 this키워드가 사용되었는데 바로 이벤트를 발생시킨 요소를 의미합니다. t..

[jQuery] 요소 조작 메서드

jQuery는 문서 내부의 요소를 변경하는 여러가지 메서드를 사용할 수 있습니다. (1) addClass() 요소에 클래스 속성을 추가합니다. 자동차 자전거 비행기 배 오토바이 문자열 형태의 값을 지정하는것 이외에 매개변수로 함수를 지정할 수도 있습니다. 이는 이후에서 살펴보는 대부분의 메서드에 동일하게 적용됩니다. $(function () { $('div').find('span').each(function (index) { $(this).addClass(function (index){ return 'myclass'; }); }); }); (2) removeClass() 클래스 속성을 제거합니다. 자동차 자전거 비행기 배 오토바이 만약 요소에 여러 클래스가 지정되어 있는경우 특정 클래스만 제거하고자 한다..

[jQuery] 요소 탐색 메서드

jQuery는 문서의 특정 요소를 선택하거나 탐색할 때 필요한 몇 가지 메서드를 지원하고 있습니다. (1) filter filter는 필터선택자를 통해 요소를 선택할 수 있도록 합니다. 필터 선택자에 대해선 아래 글을 참고해 주세요. [Web/JQuery] - [jQuery] 선택자 아래 예제는 filter메서드를 이용해 다수의 span에서 2번째 요소를 가져와 배경색을 변경합니다. 자동차 자전거 비행기 배 오토바이 또는 다음과 같이 메서드를 추가해 사용할 수도 있습니다. $(function () { $('span').filter(function (index) { return index == 1; }).css({ color: 'red' }); }); (2) end end는 문서의 탐색상태를 이전으로 되돌..

[jQuery] 객체 합치기 ($.extend)

jQuery의 $.extend 메서드는 두 번째 매개변수에 지정된 객체의 속성을 첫 번째 매개변수에 지정한 객체와 합쳐주는 역할을 수행합니다. 아래 예제는 기존 javascript에서 객체를 생성 후 해당 객체에 원하는 속성을 추가하는 방법을 보여주고 있습니다. $(function () { var obj = {}; obj.name = '홍길동'; alert(obj.name); }); 이것을 jQuery의 $.extend를 사용하면 다음과 같이 바꿀 수 있습니다. $(function () { var obj = {}; $.extend(obj, { name : '홍길동' }); alert(obj.name); }); 물론 다수의 속성을 추가하는데도 사용할 수 있으며 속성이 많으면 많을수록 $.extend메서드를..

[jQuery] 배열처리

jQuery에서는 배열을 순회하기 위한 메서드로 $.each가 있습니다. 아래 예제는 숫자로 된 단순 배열을 $.each를 통해 순회하는 방법을 보여주고 있습니다. $(function () { var obj = [ 1, 2, 3, 4, 5 ]; $.each(obj, function (index, item) { alert(item); }); }); 배열이 객체인 경우에도 같은 방법으로 순회합니다. $(function () { var obj = [ { name : '홍길동', addr : '서울시' }, { name : '홍길순', addr : '부산시' }, { name : '홍길남', addr : '대구시' } ]; $.each(obj, function (index, item) { alert(item.n..