공부하는 비오

$.ajax( ) :데이터를 서버에 HTTP PSt, GET방식으로 전송할 수 있으며, HTML, XML, JSOn, 텍스트 유형에 데이터를 요청할 수 있는 통합적인 메서드. $.post( ), $.get( ), $.getJSON( ) 메서드의 기능을 하나로 합쳐 놓은 것. $.ajax({ url: 'url 주소'. type: '전송 방식(get, post)', data: '전송할 데이터', dataType: '요청한 데이터 형식(html, xml, json, text, jsonp)', success: function( ) { 콜백함수 } }); **콜백함수 : 일정 조건이 충족되면 실행되는 함수 Ajax로 JSON 데이터 바인딩하기 mockaroo.com 에서 가상의 데이터베이스 생성 가능. $.aja..

jQuery/Ajax 2020. 7. 8. 10:04

load( ) 메서드 : 외부 콘텐츠를 가져옴. $(요소선택).load(url, data, 함수); ex.

jQuery/Ajax 2020. 7. 7. 10:10

Ajax (Asynchronous JavaScript and XML) : 클라이언트가 비동기 방식으로 자바스크립트를 이용하여 화면 전환없이 서버 측에 자료(XML, HTML, JSON, text 등등)를 요청할 때 사용. Ajax 를 생각할 때, 덧글창을 생각하면 쉬움. html 파일의 일부를 바꾸기 위해서는 페이지 전체를 새로고침해야하지만, 나머지 부분은 다 그래도인데, 한 부분(덧글창)만 바꾸기 위해 전체를 새로고침하는건 낭비가 되니까, 그 부분만 새로고침 할 수 있도록 만든 것이 Ajax! 그 영역만 Ajax로 전체페이지와 비동기화되어 개별적으로 움직임. Ajax를 사용하기 위해, 내 컴퓨터에 웹 서버를 설치해야 함. 오토셋(autoset.net/)을 사용하여 내 컴퓨터를 아파치서버로 만들어 줄 수..

jQuery/Ajax 2020. 7. 6. 11:14

연습 1. 이미지가 왼쪽에서 나와서 왼쪽으로 사라지는 슬라이드 load 메서드를 사용하지 않을 경우, 딜레이가 생김. 이미지가 다 로드되기 전 siblings().css가 시행되어, 적용되지 않은채 slide 함수가 실행됨. (img2,3,4가 사라지지 않은채 로드될때가지 화면에 남아있음) 이미지가 왼쪽으로 사라지고, 그 다음이미지가 오른쪽으로 나타나는 슬라이드. 연습 2. 이미지가 왼쪽에서 나와서 오른쪽으로 사라지는 슬라이드 animate 메서드는 중복 적용 x gird로 하늘색 박스 영역을 분홍색박스와 겹쳐서 0~3으로 설정하려했으나 안됨. 그래서 margin-left 값을 마이너스로 적용함. 이미지는 하늘색 박스 안에만 있음. 이미지가 왼쪽에서 나와 중간에 2초머물다가 오른쪽으로 사라지고, 다음 사..

jQuery 2020. 5. 29. 12:26

애니메이션 적용 원리 애니메이션 메서드는 함수가 적용된 순서대로 큐(queue)에 저장됨. 큐는 FIFO(First In First Out)형식으로 작동. (== 먼저 들어간 효과가 먼저 적용됨.) 제어메서드(ex. stop 메서드)가 왜 필요할까? 스탑메서드가 없는 경우, 파란 박스 위에 마우스를 올렸다가 뺐다가를 30회 반복했을 때, 마우스가 파란박스 밖에만 있어도 30회를 반복할 때 까지 애니메이션 실행. 스탑메서드가 있는 경우, 마우스를 상자위로 이동했다가 밖으로 옮길 때, 아직 박스가 다 늘어나지 않더라도 마우스를 상자밖으로 옮기면 늘어나는 것을 멈추고 원래 크기로 돌아옴. // 제어메서드를 사용할 경우, 사용자의 움직임에 따라 애니메이션이 바로 반응함. // 제어메서드를 사용하지 않는다면, 사..

jQuery 2020. 5. 28. 12:10

효과 메서드 사용법 $('요소 선택').효과메서드(효과 소요 시간, 가속도, 콜백함수); -효과 소요시간 'slow', 'normal', 'fast' 1000(1초), 500(0.5초) -가속도 'swing' : 시작과 끝은 느리고 중간은 빠른 속도로. 'linear' : 일정한 속도로. -콜백함수 : 효과가 끝난후 실행할 함수. 생략가능. 효과 메서드 숨김 hide( ) 요소를 숨김. fadeOut( ) 요소가 점점 투명해지며 숨겨짐. slideUp( ) 요소가 위로 접히며 숨겨짐. 노출 show( ) 숨겨진 요소 노출. fadeIn( ) 숨겨진 요소가 점점 선명해짐. slideDown( ) 숨겨진 요소가 아래로 펼쳐짐. 노출, 숨김 toggle( ) hide( ), show( ) 효과 적용. fade..

jQuery 2020. 5. 28. 10:38

focus blur focusin focusout focus와 blur는 선택요소를 직접 focus 할 경우 적용되고, focusin과 focusout은 선택요소의 하위요소를 focus할 경우 선택요소에 적용된다. 메서드 두개 사용 moseover, mouseout만 사용한 버튼1에서는 마우스를 버튼위에 가져다 놓을 때 'javascript'라는 문구가 화면에 나타나는 것을 볼 수 있다. mouseover과 focus, mouseout과 blur를 함께 사용한 버튼2에서는 마우스를 버툰위에 가져다 놓거나 키보드로 버튼을 선택하거나 마우스로 버튼을 선택(클릭)할 때 (focus) 'welcom'이라는 문구가 화면에 나타나는 것을 볼 수 있다. >>> 더 많은 경우(마우스외에 키보드를 사용하는 경우)의 호환..

jQuery 2020. 5. 28. 10:04

click dbclick hover 버튼1을 클릭했을 때, 텍스트1의 배경색이 변함. (preventDefault 속성을 사용하여 a의 링크 이벤트 사용중지.) 버튼2를 더블클릭했을 때, 텍스트2의 배경색이 변함. 버튼3에 마우스 포인터를 가져갔을 때, 텍스트3의 배경색이 변함. 버튼3 밖으로 포인터를 가져가는 경우, 텍스트3의 배경색이 다시 원래색으로 돌아감. mouseout mouseleave 내용1에서 마우스포인터가 벗어나면 배경이 노란색으로 변함. 내용4를 포함한 범위에서 마우스포인터가 벗어나면 배경이 분홍색으로 변함. mousemove 화면에서 마우스 포인터의 위치에 따라 값이 변함. scroll 스크롤의 위치에 따라 값이 변함.

jQuery 2020. 5. 27. 15:21