공부하는 비오

이벤트? 방문자가 웹페이지에서 행동하는 행위. 이벤트 핸들러? 이벤트가 발생 했을 때 실행되는 코드. 이벤트 등록? 이벤트 핸들러 메서드(함수)를 등록하는 것. (함수 정의와 같은 개념. 사용자가 발동시켰을 때 실행. 혹은 함수 실행처럼, 이벤트를 실행시켜주면 사용자와 관계없이 강제실행가능) 단독 이벤트 등록 방법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

JSON : JavaScript Object Notation 의 약자. 교환하기 좋은 형식의 객체. 딕셔너리(사전)구조를 가지고 있음. (ex. 'a' : 'apple', 'b' : 'bear' ...) 기본구조 var object = { 'key' : 'value' }; JSON을 사용했을 때, 데이터 검색속도가 훨씬 빠름. key만 안다면, 값을 쉽게 찾을 수 있음. ex. JSON 배열로 사용하기 var obj = [{ 'key1' : 'value1', 'key2' : 'value2' }, { 'key3' : 'value3', 'key4' : 'value4' }]; ex.

JavaScript 2020. 5. 26. 14:25

탐색 선택자를 사용하면, 기본 선택자로 선택한 요소 중 원하는 요소를 한 번 더 탐색하여 더 정확하게 선택 가능. 위치 탐색 선택자 : 기본 선택자로 선택한 요소를 배열에 담아, 하위요소를 배열의 인덱스(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

브라우저 객체 모델이란? 브라우저에 내장된 객체를 브라우저객체 라고 한다. 브라우저 객체의 최상위 객체는 window 객체이며, window 객체에는 하위 객체(document, sereen, location, history, navigator)가 포함되어 있다. 이 계층적 구조를 브라우저 객체모델(BOM)이라고 한다. Window 객체 메서드 open("URL", "새 창 이름", "새 창 옵션") URL 페이지를 새 창으로 나타냄. alert(data) 경고 창을 나타내고 데이터를 보여줌. 방문자가 [확인]을 누르면 alert( )를 사용한 다음 위치의 코드 수행 prompt("질문","답변") 질문과 답변으로 질의 응답 창을 나타냄. confirm("질문") 질문 내용으로 [확인] [취소] 창을 나..

JavaScript 2020. 5. 22. 15:30