본문 바로가기

jQuery

[jQuery] 해쉬체인지를 이용한 AJAX 게시판에서 뒤로가기(back) 기능 구현 ■ [jQuery] 해쉬체인지를 이용한 AJAX에서 뒤로가기(back) 기능 구현 AJAX 게시판 기능 구현중 리스트(List)영역에서 뷰(View) 영역으로 이동 후 뒤로가기 버튼을 눌렀을때 다시 게시판 리스트 페이지로 이동하지 못하는 문제가 발생하였는데 해당 포스팅(http://www.erzsamatory.net/29) 내용을 참고하여 해결할 수 있었다. 이 포스팅은 참고한 포스팅에서 필자에게 필요한 부분만 뽑아서 다시 정리한 것이다. hashchange_wicked.php | 홈 | 현대마법의 공방 | 발길향하는 공간 | 스윙튜브 | 반쪽달이 떠오르는 서가 | 기록의 지평선 | 출력결과 위와같이 해결 할 수 있었다. ※ 출처 : 해시체인지 이벤트를 활용하여 페이지 이동을 최대한 줄이는 방법(http.. 더보기
[jQuery] append vs html 비교 [jQuery] append vs html 비교 ajax를 이용해 게시판 리스트를 뿌려주고 있었다. 근데 아래와 같은 문제가 발생했다. 에러가 발생한 이유는 애래와 같이 append를 사용하는경우 jQuery("#id").append(data); : 기존 데이터에 내용이 추가된다. 값이 초기화 되지 않고 중복되어서 쌓여만 간다. remove 등을 사용하여 해결하려 했지만. 생각보다 간단한 해결책이 있었다. jQuery("#id").html(data); : 초기화하고 새로운 내용이 들어간다. html을 사용하면 새로운 데이터가 기존 내용을 대체하는 구조더라. 이렇게 교체하니까 간단히 해결 되었다. 더보기
[jQuery] jQuery Ajax 부가 메서드 ■ jQuery Ajax 부가 메서드 jQuery가 지원하는 추가적인 Ajax 메서드를 사용하면 정말 간단한 $.ajax( ) 메서드를 더 간단하게 사용할 수 있다. jQuery는 아래와 같이 Ajax 메서드를 지원한다. ※ jQuery의 Ajax 관련 메서드 메서드 이름 설명 $.get( ) get 방식으로 Ajax를 수행한다. $.post( ) post 방식으로 Ajax를 수행한다. $.getJSON( ) get 방식으로 Ajax를 수행해 JSON 데이터를 가져온다. $.getScript( ) get 방식으로 Ajax를 수행해 Script 데이터를 가져온다. $.(selector).load( ) Ajax를 수행한 후에 선택자로 선택한 문자 객체 안에 응답받을 문자열을 넣는다. 이 메서드는 $.ajax.. 더보기
[jQuery] jQuery Ajax의 기초 ■ jQuery Ajax의 기초 코드1 jQuery는 Ajax와 관련된 다양한 종류의 메서드를 제공한다. 이번 절에서는 가장 기본적인 jQuery의 Ajax 관련 메서드인 $.ajax( ) 메소드를 배워봅시다. $.ajax( ) 메서드를 다음 두 가지 형태로 사용할 수 있다. 01. $.ajax(options); 02. $.ajax(url, options); 간단하게 $.ajax( ) 메드를 사용해 Ajax를 수행한다. $.ajax( ) 메서드의 첫 번째 매개 변수에 문자열 /Home/MuFirstStringAction을 넣고 두 번째 매개 변수에는 옵션 객체를 넣어준다. 코드2 : $ajax( ) 메서드 코드2에서 입력한 success 속성은 이벤트 이다. $.ajax( ) 메서드는 Ajax가 성공햇을.. 더보기
[jQuery] DOM 요소 선택하기 01. 셀렉터와 jQuery 함수를 사용하여 DOM 요소 선택하기 문제점 jQuery 메서드를 사용하여 요소를다루기 위해서 단일 DOM 요소나 DOM 요소의 집합을 선택할 필요가 있다. 해결방법 jQuery는 DOM에서 요소를 선택하기 위한 두 가지 방법을 제공하는데, 두 방법 모두 jQuery 함수(jQuery( ), 또는 $( ))를 사용한다. CSS 셀렉터와 사용자 정의 셀렉터를 사용하는 첫 번째 방법은 가장 많이 사용되며, 가장 훌륭한 해결방법이기도 하다. 셀렉터 식을 포함하는 문자열을 jQuery 함수에 전달하면 함수는 DOM을 탐색하여 표현식에 부합하는 DOM 노드들을 알아낼 것이다. 다음 예제 코드는 HTML 문서에 존재하는 모든 요소를 선택할 것이다. ex01.html link link l.. 더보기