티스토리

공부하는 비오

검색하기

블로그 홈

공부하는 비오

biio-studying.tistory.com/m

비오스터딩 님의 블로그입니다.

구독자: 2

방명록 방문하기

300x250

주요 글 목록

Ajax :: _ $.ajax( ) 메서드 $.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.. 공감수 0 댓글수 0 2020. 7. 8.
Ajax :: _ load( ) 메서드 load( ) 메서드 : 외부 콘텐츠를 가져옴. $(요소선택).load(url, data, 함수); ex. 공감수 0 댓글수 0 2020. 7. 7.
Ajax :: 제이쿼리 비동기 연동방식 Ajax (Asynchronous JavaScript and XML) : 클라이언트가 비동기 방식으로 자바스크립트를 이용하여 화면 전환없이 서버 측에 자료(XML, HTML, JSON, text 등등)를 요청할 때 사용. Ajax 를 생각할 때, 덧글창을 생각하면 쉬움. html 파일의 일부를 바꾸기 위해서는 페이지 전체를 새로고침해야하지만, 나머지 부분은 다 그래도인데, 한 부분(덧글창)만 바꾸기 위해 전체를 새로고침하는건 낭비가 되니까, 그 부분만 새로고침 할 수 있도록 만든 것이 Ajax! 그 영역만 Ajax로 전체페이지와 비동기화되어 개별적으로 움직임. Ajax를 사용하기 위해, 내 컴퓨터에 웹 서버를 설치해야 함. 오토셋(autoset.net/)을 사용하여 내 컴퓨터를 아파치서버로 만들어 줄 수.. 공감수 0 댓글수 0 2020. 7. 6.
jQuery :: 슬라이드 만들기 연습 연습 1. 이미지가 왼쪽에서 나와서 왼쪽으로 사라지는 슬라이드 load 메서드를 사용하지 않을 경우, 딜레이가 생김. 이미지가 다 로드되기 전 siblings().css가 시행되어, 적용되지 않은채 slide 함수가 실행됨. (img2,3,4가 사라지지 않은채 로드될때가지 화면에 남아있음) 이미지가 왼쪽으로 사라지고, 그 다음이미지가 오른쪽으로 나타나는 슬라이드. 연습 2. 이미지가 왼쪽에서 나와서 오른쪽으로 사라지는 슬라이드 animate 메서드는 중복 적용 x gird로 하늘색 박스 영역을 분홍색박스와 겹쳐서 0~3으로 설정하려했으나 안됨. 그래서 margin-left 값을 마이너스로 적용함. 이미지는 하늘색 박스 안에만 있음. 이미지가 왼쪽에서 나와 중간에 2초머물다가 오른쪽으로 사라지고, 다음 사.. 공감수 0 댓글수 0 2020. 5. 29.
jQuery :: 6 -2. 애니메이션 효과 제어 메서드 애니메이션 적용 원리 애니메이션 메서드는 함수가 적용된 순서대로 큐(queue)에 저장됨. 큐는 FIFO(First In First Out)형식으로 작동. (== 먼저 들어간 효과가 먼저 적용됨.) 제어메서드(ex. stop 메서드)가 왜 필요할까? 스탑메서드가 없는 경우, 파란 박스 위에 마우스를 올렸다가 뺐다가를 30회 반복했을 때, 마우스가 파란박스 밖에만 있어도 30회를 반복할 때 까지 애니메이션 실행. 스탑메서드가 있는 경우, 마우스를 상자위로 이동했다가 밖으로 옮길 때, 아직 박스가 다 늘어나지 않더라도 마우스를 상자밖으로 옮기면 늘어나는 것을 멈추고 원래 크기로 돌아옴. // 제어메서드를 사용할 경우, 사용자의 움직임에 따라 애니메이션이 바로 반응함. // 제어메서드를 사용하지 않는다면, 사.. 공감수 0 댓글수 0 2020. 5. 28.
jQuery :: 6 -1. 효과, 애니메이션 메서드 효과 메서드 사용법 $('요소 선택').효과메서드(효과 소요 시간, 가속도, 콜백함수); -효과 소요시간 'slow', 'normal', 'fast' 1000(1초), 500(0.5초) -가속도 'swing' : 시작과 끝은 느리고 중간은 빠른 속도로. 'linear' : 일정한 속도로. -콜백함수 : 효과가 끝난후 실행할 함수. 생략가능. 효과 메서드 숨김 hide( ) 요소를 숨김. fadeOut( ) 요소가 점점 투명해지며 숨겨짐. slideUp( ) 요소가 위로 접히며 숨겨짐. 노출 show( ) 숨겨진 요소 노출. fadeIn( ) 숨겨진 요소가 점점 선명해짐. slideDown( ) 숨겨진 요소가 아래로 펼쳐짐. 노출, 숨김 toggle( ) hide( ), show( ) 효과 적용. fade.. 공감수 0 댓글수 0 2020. 5. 28.
jQuery :: 5 -4. 포커스 이벤트, 키보드 이벤트 등록 예제 focus blur focusin focusout focus와 blur는 선택요소를 직접 focus 할 경우 적용되고, focusin과 focusout은 선택요소의 하위요소를 focus할 경우 선택요소에 적용된다. 메서드 두개 사용 moseover, mouseout만 사용한 버튼1에서는 마우스를 버튼위에 가져다 놓을 때 'javascript'라는 문구가 화면에 나타나는 것을 볼 수 있다. mouseover과 focus, mouseout과 blur를 함께 사용한 버튼2에서는 마우스를 버툰위에 가져다 놓거나 키보드로 버튼을 선택하거나 마우스로 버튼을 선택(클릭)할 때 (focus) 'welcom'이라는 문구가 화면에 나타나는 것을 볼 수 있다. >>> 더 많은 경우(마우스외에 키보드를 사용하는 경우)의 호환.. 공감수 0 댓글수 0 2020. 5. 28.
jQuery :: 5 -3. 마우스 이벤트 예제 click dbclick hover 버튼1을 클릭했을 때, 텍스트1의 배경색이 변함. (preventDefault 속성을 사용하여 a의 링크 이벤트 사용중지.) 버튼2를 더블클릭했을 때, 텍스트2의 배경색이 변함. 버튼3에 마우스 포인터를 가져갔을 때, 텍스트3의 배경색이 변함. 버튼3 밖으로 포인터를 가져가는 경우, 텍스트3의 배경색이 다시 원래색으로 돌아감. mouseout mouseleave 내용1에서 마우스포인터가 벗어나면 배경이 노란색으로 변함. 내용4를 포함한 범위에서 마우스포인터가 벗어나면 배경이 분홍색으로 변함. mousemove 화면에서 마우스 포인터의 위치에 따라 값이 변함. scroll 스크롤의 위치에 따라 값이 변함. 공감수 1 댓글수 1 2020. 5. 27.
jQuery :: 5 -2. 로딩 이벤트 예제 ready : 지정한 HTML 문서 객체의 로딩 완료후 이벤트 발생. (연동된 소스의 로딩 이전) load : 선택한 이미지 또는 프레임 요소에 연동된 소스의 로딩 완료 이후 이벤트 발생. 직접경로로 이미지를 넣었을 때와 간접경로로 이미지를 넣었을 때 결과가 다름. 1. 간접경로(인터넷 이미지 주소)로 이미지를 넣은 경우. ready 1 : 0 load 1 : 300 2. 직접경로로 이미지를 넣은 경우. ready 2 : 300 load 2 : 300 공감수 0 댓글수 0 2020. 5. 27.
jQuery :: 5 -1. 이벤트 객체 속성 이벤트 발생시, 이벤트 핸들러의 매개변수에 이벤트 객체 생성. 객체에는 이벤트 타입에 맞는 속성과 메서드 포함. 이벤트 객체 생성 $('이벤트 대상 선택').이벤트등록메서드(function(매개변수){ 매개변수(이벤트객체).속성; } 이벤트 객체 속성 마우스 이벤트 clientX 마우스 포인터의 X 좌표값을 반환. clientY 마우스 포인터의 Y 좌표값을 반환. pageX 스크롤 X축의 이동거리를 계산하여 마우스 포인터의 X좌표값 반환. pageY 스크롤 Y축의 이동거리를 계산하여 마우스 포인터의 X좌표값 반환. screenX 화면 모니터를 기준으로 마우스 포인터의 X좌표값을 반환. screenY 화면 모니터를 기준으로 마우스 포인터의 Y좌표값을 반환. layerX position을 적용한 요소를 기준.. 공감수 0 댓글수 0 2020. 5. 27.
jQuery :: 5. 이벤트 등록 메서드 이벤트? 방문자가 웹페이지에서 행동하는 행위. 이벤트 핸들러? 이벤트가 발생 했을 때 실행되는 코드. 이벤트 등록? 이벤트 핸들러 메서드(함수)를 등록하는 것. (함수 정의와 같은 개념. 사용자가 발동시켰을 때 실행. 혹은 함수 실행처럼, 이벤트를 실행시켜주면 사용자와 관계없이 강제실행가능) 단독 이벤트 등록 방법1 $('이벤트 대상').on('이벤트메서드', function( ){ 코드; }); 방법2 $('이벤트 대상').이벤트등록메서드(function( ){ 이벤트 코드}); -보통 방법1 사용 ready 메서드의 경우 방법2 사용 그룹 이벤트 등록 방법1 $('이벤트 대상').on('이벤트1 이벤트2 ... 이벤트n', function( ){코드;)}; 방법2 $('이벤트 대상').on({'이벤트.. 공감수 0 댓글수 0 2020. 5. 27.
jQuery :: 4 -1. 객체조작_ 속성 조작 메서드 속성 조작 메서드 요소의 속성을 바꿀 때 사용 $('요소 선택').속성메서드( ); 속성 조작 메서드 html( ) html('새 요소') 선택한 요소의 하위요소를 가져옴. 선택한 요소의 하위요소를 제거하고, 그 위에 새 요소를 생성. text( ) text('새 텍스트') 선택한 요소가 감싸는 모든 텍스트를 가져옴. 선택한 요소의 하위 요소를 모두 제거하고, 그 위치에 지정한 새 텍스트 생성. attr('속성명') attr('새 속성명','새 값') 선택한 요소의 지정한 속성 값을 가져옴. 선택한 요소의 지정한 속성 값에 새 값을 적용. removeAttr('속성명') 선택한 요소의 지정한 속성 제거. prop('상태 속성명') prop('상태 속성명', '새 값') 선택한 요소의 상태 속성값을 가져옴.. 공감수 0 댓글수 0 2020. 5. 27.
jQuery :: 3 -1. 제이쿼리 배열 메서드 제이쿼리 배열 메서드 $('요소 선택').each(function(매개변수1, 매개변수2){ }); $.each($('요소 선택').function(매개변수1, 매개변수2){ }); 배열에 저장된 객체만큼 메서드 반복 실행. 배열에 저장된 객체의 인덱스 순서대로 객체를 선택하고 인덱스를 구함. $.map(Array, function(매개변수1, 매개변수2){ return 데이터; }) 배열에 저장된 데이터 수만큼 메서드 반복 실행. 함수에서 반환된 데이터는 새 배열에 순서대로 저장되어, 새 배열 반환. $.grep(Array, function(매개변수1, 매개변수2){ return [true or false]; }) 배열에 저장된 데이터 수만큼 메서드 반복 실행. 반환 값이 true인 경우에만 새 배열에.. 공감수 0 댓글수 0 2020. 5. 26.
jQuery :: 2 -1. 위치 탐색 선택자 탐색 선택자를 사용하면, 기본 선택자로 선택한 요소 중 원하는 요소를 한 번 더 탐색하여 더 정확하게 선택 가능. 위치 탐색 선택자 : 기본 선택자로 선택한 요소를 배열에 담아, 하위요소를 배열의 인덱스(index)를 사용하여 선택 $('요소 선택:first') $('요소 선택').first( ) 전체 요소 중 첫번째 요소만 선택. $('요소 선택:last') $('요소 선택').last( ) 전체 요소 중 마지막 요소만 선택. $('요소 선택:odd') 요소 무리 중 짝수 번째(홀수 인덱스) 요소만 선택. $('요소 선택:even') 요소 무리 중 홀수 번째(짝수 인덱스) 요소만 선택. $('요소 선택:first-of-type') 요소 무리 중 첫 번째 요소만 선택. $('요소 선택:last-of-ty.. 공감수 0 댓글수 0 2020. 5. 26.
jQuery :: 1. 기본 선택자 선택자를 사용하여 문서객체 불러오기 $( ) 에 CSS 선택자를 입력하여 가져옴. 1. $('CSS 선택자').css('스타일 속성명', '값'); 2. $('CSS 선택자').attr('속성명', '값'); 선택자 사용하기 방법 1 $( function( ){ $('CSS 선택자').css('스타일 속성명', '값'); } ); 방법 2 $( function( ){ $('CSS 선택자').css({ '스타일 속성명':'값' }); }); ex. 기본 선택자 : css에서 요소 선택하는 방법과 동일함. 직접 선택자 $('*') 모든 요소 선택. $('#아이디명') id 속성에 지정한 값을 가진 요소 선택. $('.클래스명') class 속성에 지정한 값을 가진 요소 선택. $('요소명') 지정한 요소명과.. 공감수 0 댓글수 0 2020. 5. 25.
jQuery :: 0. 제이쿼리 라이브러리 연동하기 제이쿼리란? 존 레식(Jhon Resig)이 자바스크립트를 이용해 만든 라이브러리 언어, 즉 자바스크립트로 만들어진 다양한 함수들의 집합이다. 제이쿼리는 여러 브라우저의 호환성 문제를 해결하고, 다양한 메서드를 제공하기 때문에 개발 시간을 많이 단축할 수 있다. 연동하기 1. 다운로드한 라이브러리 파일을 HTML에 불러오기 2. 온라인에서 제공하는 라이브러리 파일을 HTML을 통해 불러오기 >>> CDNJS 사이트에서 jquery를 검색하여 제이쿼리 라이브러리 선택. https://cdnjs.com/libraries/jquery jquery - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites! jquery .. 공감수 0 댓글수 0 2020. 5. 25.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.