공부하는 비오

ready : 지정한 HTML 문서 객체의 로딩 완료후 이벤트 발생. (연동된 소스의 로딩 이전) load : 선택한 이미지 또는 프레임 요소에 연동된 소스의 로딩 완료 이후 이벤트 발생. 직접경로로 이미지를 넣었을 때와 간접경로로 이미지를 넣었을 때 결과가 다름. 1. 간접경로(인터넷 이미지 주소)로 이미지를 넣은 경우. ready 1 : 0 load 1 : 300 2. 직접경로로 이미지를 넣은 경우. ready 2 : 300 load 2 : 300

jQuery 2020. 5. 27. 14:52

이벤트 발생시, 이벤트 핸들러의 매개변수에 이벤트 객체 생성. 객체에는 이벤트 타입에 맞는 속성과 메서드 포함. 이벤트 객체 생성 $('이벤트 대상 선택').이벤트등록메서드(function(매개변수){ 매개변수(이벤트객체).속성; } 이벤트 객체 속성 마우스 이벤트 clientX 마우스 포인터의 X 좌표값을 반환. clientY 마우스 포인터의 Y 좌표값을 반환. pageX 스크롤 X축의 이동거리를 계산하여 마우스 포인터의 X좌표값 반환. pageY 스크롤 Y축의 이동거리를 계산하여 마우스 포인터의 X좌표값 반환. screenX 화면 모니터를 기준으로 마우스 포인터의 X좌표값을 반환. screenY 화면 모니터를 기준으로 마우스 포인터의 Y좌표값을 반환. layerX position을 적용한 요소를 기준..

jQuery 2020. 5. 27. 14:21

이벤트? 방문자가 웹페이지에서 행동하는 행위. 이벤트 핸들러? 이벤트가 발생 했을 때 실행되는 코드. 이벤트 등록? 이벤트 핸들러 메서드(함수)를 등록하는 것. (함수 정의와 같은 개념. 사용자가 발동시켰을 때 실행. 혹은 함수 실행처럼, 이벤트를 실행시켜주면 사용자와 관계없이 강제실행가능) 단독 이벤트 등록 방법1 $('이벤트 대상').on('이벤트메서드', function( ){ 코드; }); 방법2 $('이벤트 대상').이벤트등록메서드(function( ){ 이벤트 코드}); -보통 방법1 사용 ready 메서드의 경우 방법2 사용 그룹 이벤트 등록 방법1 $('이벤트 대상').on('이벤트1 이벤트2 ... 이벤트n', function( ){코드;)}; 방법2 $('이벤트 대상').on({'이벤트..

jQuery 2020. 5. 27. 12:50

속성 조작 메서드 요소의 속성을 바꿀 때 사용 $('요소 선택').속성메서드( ); 속성 조작 메서드 html( ) html('새 요소') 선택한 요소의 하위요소를 가져옴. 선택한 요소의 하위요소를 제거하고, 그 위에 새 요소를 생성. text( ) text('새 텍스트') 선택한 요소가 감싸는 모든 텍스트를 가져옴. 선택한 요소의 하위 요소를 모두 제거하고, 그 위치에 지정한 새 텍스트 생성. attr('속성명') attr('새 속성명','새 값') 선택한 요소의 지정한 속성 값을 가져옴. 선택한 요소의 지정한 속성 값에 새 값을 적용. removeAttr('속성명') 선택한 요소의 지정한 속성 제거. prop('상태 속성명') prop('상태 속성명', '새 값') 선택한 요소의 상태 속성값을 가져옴..

jQuery 2020. 5. 27. 12:49

제이쿼리 배열 메서드 $('요소 선택').each(function(매개변수1, 매개변수2){ }); $.each($('요소 선택').function(매개변수1, 매개변수2){ }); 배열에 저장된 객체만큼 메서드 반복 실행. 배열에 저장된 객체의 인덱스 순서대로 객체를 선택하고 인덱스를 구함. $.map(Array, function(매개변수1, 매개변수2){ return 데이터; }) 배열에 저장된 데이터 수만큼 메서드 반복 실행. 함수에서 반환된 데이터는 새 배열에 순서대로 저장되어, 새 배열 반환. $.grep(Array, function(매개변수1, 매개변수2){ return [true or false]; }) 배열에 저장된 데이터 수만큼 메서드 반복 실행. 반환 값이 true인 경우에만 새 배열에..

jQuery 2020. 5. 26. 14:58

탐색 선택자를 사용하면, 기본 선택자로 선택한 요소 중 원하는 요소를 한 번 더 탐색하여 더 정확하게 선택 가능. 위치 탐색 선택자 : 기본 선택자로 선택한 요소를 배열에 담아, 하위요소를 배열의 인덱스(index)를 사용하여 선택 $('요소 선택:first') $('요소 선택').first( ) 전체 요소 중 첫번째 요소만 선택. $('요소 선택:last') $('요소 선택').last( ) 전체 요소 중 마지막 요소만 선택. $('요소 선택:odd') 요소 무리 중 짝수 번째(홀수 인덱스) 요소만 선택. $('요소 선택:even') 요소 무리 중 홀수 번째(짝수 인덱스) 요소만 선택. $('요소 선택:first-of-type') 요소 무리 중 첫 번째 요소만 선택. $('요소 선택:last-of-ty..

jQuery 2020. 5. 26. 13:26

선택자를 사용하여 문서객체 불러오기 $( ) 에 CSS 선택자를 입력하여 가져옴. 1. $('CSS 선택자').css('스타일 속성명', '값'); 2. $('CSS 선택자').attr('속성명', '값'); 선택자 사용하기 방법 1 $( function( ){ $('CSS 선택자').css('스타일 속성명', '값'); } ); 방법 2 $( function( ){ $('CSS 선택자').css({ '스타일 속성명':'값' }); }); ex. 기본 선택자 : css에서 요소 선택하는 방법과 동일함. 직접 선택자 $('*') 모든 요소 선택. $('#아이디명') id 속성에 지정한 값을 가진 요소 선택. $('.클래스명') class 속성에 지정한 값을 가진 요소 선택. $('요소명') 지정한 요소명과..

jQuery 2020. 5. 25. 11:40

제이쿼리란? 존 레식(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 ..

jQuery 2020. 5. 25. 09:38