'Front-End/jQuery'에 해당되는 글 36건

제이쿼리 객체를 json 문자열로 상호 변환 - $.parseJson

1. 구현

- $.parseJSON(), JSON.stringify 이용한다

var str = '{ "title":"hee", "age":100}'; var object = $.parseJSON(str); //change into object console.log(object.title); //change into json console.log(JSON.stringify(object))

페이지 이동 제어 - href, replace, pushState()

1. href

- 이동 페이지를 지정

$(function(){ $('#start').click(function(){ location.href = 'index.html'; }); });

2. replace

- 앞 페이지의 이력을 남기지 않을 때 사용한다

- 돌아오기 버튼으로 전 페이지도 돌아 갈 수 없다

$(function(){ $('#start').click(function(){ location.replace('closure.html'); }); });  

3. pushState()

- history.pushState()

- 브라우저의 이력을 추가한다.

- Ajax 통신으로 페이지의 내용을 편집하는 경우 리퀘스트 시, 키 정보가 된다

<input type="button" id="start" value="add"/> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(function(){ var state = 1; //이력추가 $('#start').click(function(){ history.pushState('state'+state, 'State'+state); state++; }) ; //뒤로가기 누루면 그 시점 상태 로그표시 $(window).on('popstate',function(e){ console.log(e.originalEvent.state); }) ; }); </script>  

- state 프로퍼티는 History API의 고유 이벤트 속성이다

- e는 jQuery의 고유 이벤트 객체이므로 그대로 state에 엑세스 할 수없다

- e.originalEvent 프로퍼티에서 원래 이벤트 객체를 구한뒤 state 엑세스

- javascript는 e.state가능

제이쿼리 일정시간 마다 처리 - setInterval(), clearInterval()

1. 구현

1) setInterval(fn, 시간)

- 반환 값으로 id를 반환

2) clearInterval(id)

3) 예

$(function(){ var timer; $('#start').click(function(){ timer = setInterval(function(){ $('#result').html(new Date()); },1000); }); $('#stop').click(function(){ clearInterval(timer); }); });

- 1초 마다 현재 시간을 화면에 표시한다

제이쿼리 일정시간후 처리 - setTimeout(), clearTimeout()

1. 구현

1) setTimeout(fn, 시간)

- 반환 값은 타이머를 식별하기 위한 id 값이다, id를 clearTimeout에 전달함으로 타이머 정지할 수 있다

2) clearTimeout(타이머 id)

3) 예

$(function(){ var timer; $('#start').click(function(){ timer = setTimeout(function(){ window.alert(new Date()); },5000); }); $('#stop').click(function(){ clearTimeout(timer); }); });

- start 버튼을 누룬후 5초 후에 팝업이 열린다

- stop을 누루면 timer가 멈춘다