Ajax의 개요 Ajax 란? Ajax란 Asynchronous JavaScript and XML을 의미한다. Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있게 해준다.Ajax는 백그라운드 영역에서 서버와 데이터를 교환하여 웹 페이지에 표시해 준다. 예제 $function( ) {$("#requestBtn").on("click", function() {$("#text").load("/examples/media/jquery_ajax_data.txt");});}); Ajax 프레임 워크 Ajax를 사용하여 손쉽게 개발할 수 있도록 미리 여러 가지 기능들을 포함해 놓은 개발 환경을 Ajax 프레임워크라고 한다. 이러한 Ajax 프레임워크 중에서도 가장 많이 사용되는 대..
이펙트 효과(페이드/슬라이드/jQuery.fx 객체/animate) 이펙트(effect) 효과 제이쿼리는 웹 페이지에 이펙츠 효과를 손쉽게 넣을 수 있는 다양한 메소드를 제공한다. 이러한 이펙트 효과는 기본 설정으로 바로 사용할 수도 있고, animate( ) 메소드를 통해 설정을 변경해서 사용할 수도 있다. 요소의 표시와 숨김 .hide( ) 메소드는 선택한 요소를 순간적으로 사라지게 하고, show( ) 메소드는 나타나게 한다. .hide( ) 메소드를 통해 숨겨진 요소는 CSS display 속성값이 none으로 설정된다.즉, 이렇게 숨겨진 요소는 더는 웹 페이지의 레이아웃에 영향을 주지 않고 완전히 사라지게 된다. 예제12345678910111213141516171819202122232425262..
이벤트 처리 이벤트(event)란? 오늘날 웹 페이지는 사용자와 수많은 상호작용을 하게 된다.사용자는 마우스를 움직이거나, 요소를 클릭하거나, 텍스트 박스에 글을 쓰는 등 수많은 종류의 동작(action)을 수행한다. 위에서 예를 든 사용자의 동작들이 모두 이벤트(event)를 발생시킨다.즉, 이벤트가 발생했다는 것은 웹 페이지에서 특정 동작을 발생하여, 웹 브라우저가 그 사실을 알려주는 것을 의미한다. 이벤트 핸들러(event handler) 웹 페이지에서는 수많은 이벤트가 계속해서 발생한다. 특정 요소에서 발생하는 이벤트를 처리하기 위해서는 이벤트 핸들러(event handler)라는 함수를 작성하여 연결해야만 한다.이벤트 핸들러가 연결된 특정 요소에서 지정된 타입의 이벤트가 발생하면, 웹 브라우저는..
스타일 설정(프로퍼티/클래스) CSS 설정 제이쿼리를 사용하면 선택한 요소의 스타일에 관한 속성값을 손쉽게 받아오거나 설정할 수 있다. .css( ) 메소드 제이쿼리에서는 .css( ) 메소드를 사용하여 선택한 요소의 CSS 스타일을 간단하게 설정할 수 있다. .css( ) 메소드는 선택한 요소 집합의 첫 번째 요소의 스타일 속성값을 반환하거나, 선택한 요소의 스타일 속성을 인수로 전달받은 값으로 설정한다. 예제123456789101112131415161718192021222324252627 jQuery Style $(function() { $("button").on("click", function() { $("p").css("fontSize", "25px"); // 모든 요소의 글씨 크기를 25px로 ..
요소의 영역(크기 / 위치) 요소의 크기 제이쿼리는 선택한 요소의 크기에 관한 정보를 손쉽게 받아오거나 설정할 수 있도록 다양한 메소드를 제공한다. inner와 outer 제이쿼리에서 요소의 크기는 다음과 같이 구성된다.접두사로 inner가 붙은 메소드는 선택한 요소의 크기에 패딩(padding) 영역이 포함된 크기 정보를 반환한다. 접두사로 outer가 붙은 메소드는 패딩 영역뿐만 아니라 테두리(border) 영역까지 포함된 크기 정보를 반환한다.또한, 접두사로 outer가 붙은 메소드에 인수로 true 값을 전달하면, 패딩과 테두리 영역뿐만 아니라 마진(margin) 영역까지 포함된 크기 정보를 반환한다. 위의 내용을 표로 정리하면 다음과 같다. 메소드 설명 .windth( ), .height( ) ..
필터링 메소드 필터링(filtering) 메소드 DOM 트리에서 선택한 요소를 필터링하기 위한 메소드는 다음과 같다..first( ) .last( ).eq( ).filter( ).not( ) .first( ) 메소드와 last( ) 메소드 .first( ) 메소드는 선택한 요소 중에서 첫 번째 요소를 선택하고, .last( ) 메소드는 마지막 요소를 선택한다. 예제1234567891011121314151617181920212223242526272829303132333435 jQuery Filtering $(function() { $("#firstBtn").on("click", function() { $("li").first() // 선택한 요소 중에서 첫 번째 요소만을 선택함. .css({"border"..
조상 요소의 탐색 / 형제 요소의 탐색 / 자손 요소의 탐색 트리 탐색(tree traversing) 트리 탐색(tree traversing)이란 특정 요소로부터 다른 요소들과의 관계를 통해 선택하길 원하는 요소까지 DOM 트리를 검색해 나아가는 과정을 의미한다. 이러한 트리 탐색은 다음과 같이 세 영역으로 나눌 수 있다. 조상(ancestor) 요소 탐색형제(sibling) 요소 탐색자손(descendant) 요소 탐색 조상(ancestor) 요소의 탐색 DOM 트리에서 특정 요소의 부모(parent) 요소를 포함한 상위의 요소를 탐색하기 위한 메소드는 다음과 같다. parent( )parents( )parentsUntil( )closest( ) .parent( ) 메소드 .parent( ) 메소드는 ..
요소의 추가 / 복사 및 삭제 요소의 추가 제이쿼리는 새로운 요소나 콘텐츠를 손쉽게 추가할 수 있도록 여러 메소드를 제공한다. 기존 요소의 내부에 추가 다음 메소드를 사용하면 기존 요소의 내부에 새로운 요소나 콘텐츠를 추가할 수 있다. .append( ).prepend( ).appendTo( ).prependTo( ) .append( ) 메소드 .append( ) 메소드는 선택한 요소의 '마지막'에 새로운 요소나 콘텐츠를 추가한다. 예제1234567891011121314151617181920212223242526272829 jQuery Element Insert $(function() { $("button").on("click", function() { $("#list").append("새로 추가된 아이..