JavaScript&JQuery (28) 썸네일형 리스트형 객체 조작 메서드 - 수치 조작 메서드 수치 조작 메서드 요소의 속성을 조작할 때 사용하는 메서드로, 선택한 객체의 사이즈 및 위치 사이즈를 가지고 오거나 변경이 가능하다. 종류 사용법 설명 width() $('선택자').width() 선택된 대상의 가로 사이즈를 가지고 오거나 변경한다. height() $('선택자').height() 선택된 대상의 가로 사이즈를 가지고 오거나 변경한다. scrollLeft() $('선택자').scrollLeft() 수평 스크롤의 이동 높이값을 반환한다. scrollTop() $('선택자').scrollTop() 수직 스크롤의 이동 높이값을 반환한다. 수치 조작 메서드 사용법 1) $('선택자').width() - $('body').width(); : body의 가로 사이즈를 가져온다. - $('body')... 객체 조작 메서드 - 속성 조작 메서드 속성 조작 메서드 선택된 객체의 속성값을 가지고 오거나 변경이 가능한 메서드. - parsing :서로다른 데이터를 변환하는 작업 - parser : 서로 다른 데이터를 변환하는 대상(플러그인 혹은 api (메서드)) 속성 조작 메서드의 종류 종류 사용법 설명 html() $('선택자').html(); $('선택자').html('새요소'); 선택된 객체의 html 요소를 가져오거나 삽입한다. text() $('선택자').text() ; $('선택자').text('새 텍스트') ; 선택된 객체의 하위 요소의 text를 가지고 오거나 삽입한다. attr() $('선택자').attr('속성명'); $('선택자').attr('속성명','새 값'); 선택된 객체의 속성을 가져 오거나 삽입한다. (웹 표준에 존재하.. 탐색 선택자 ▶ 탐색 선택자 선택자로 이미 선택된 객체를 한번 더 검색하여 객체를 반환하는 방식 - $('선택자').first(): 선택된 객체 중 첫번째 객체 요소를 반환한다 - $('선택자').last(): 선택된 객체 중 마지막 객체 요소를 반환한다 - $('선택자').eq(index): 선택된객체 중 인수값의 조건과 일치하는 인덱스 요소를 반환한다.(배열처럼 사용) - $('선택자').filter('선택자'): 선택된 객체 중 filter메서드의 선택자 값과 일치하는 객체를 선택해서 반환. ▶ 배열 관련 메서드 다중으로 선택된 객체를 반복문 형태와 비슷하게 풀 수 있다. - $('선택자').each() 다중으로 선택된 객체를 하나씩 풀어 함수를 실행한다. $('선택자').each(function(i){}); .. 선택자 선택자 ▶ 문서 객체 모델 (DOM)의 HTML 문서 객체 구조 선택자 사용을 위해서는 문서 객체를 불러와야 한다. javascript 에서 body 영역 생성 후 script 코드 실행이 되어야 원하는 결과를 얻을 수 있는 것처럼, 제이쿼리도 마찬가지이다. jquery를 body의 소스코드 영역보다 상위에 위치시킨후, body영역을 먼저 실행하고 싶다면 다음과 같은 body 영역을 가져오는 코드를 수행해야 한다. dom 객체를 읽기 완료 후에 ready 메서드의 함수를 실행한다. 위와 같은 함수로, 사용하기 편하게 제이쿼리 언어 자체에서 다음처럼 요약하여 사용이 가능하다. 제이쿼리가 dom 객체 읽기 완료 후에 실행할 준비가 되었다는 뜻이다. 하지만, html 코드를 동적으로 생성시에는 적용 되지 않는.. jQuery 제이쿼리란 자바스크립트를 이용해 만든 라이브러리 언어이다. 라이브러리 언어란 자바스크립트로 만들어진 다양한 함수들의 집합이다. · 호환성 보장. · 쉽고 편한 애니메이션 효과를 구현할 수 있다. · 외부 라이브러리 이므로 Import가 필수적이다. ▶ jQuery 사용 준비 1. 다운로드 방식 압축 된 프로덕션 jQuery 3.4.1 다운로드 (https://code.jquery.com/jquery-3.4.1.min.js) 2. 네트워크 전송 방식 CDN 소스 임포트 (https://developers.google.com/speed/libraries#jquery) ▶ jQuery 종류 · jquery.js : 소스에 들여쓰기, 줄바꿈, 주석까지 정리된 비 압축파일. 제이쿼리 자체 개발시 유용 · jque.. 콜백함수(Callback) Callback 함수 ▶ 콜백함수 인수값으로 던져진 함수가 실행되면서 값이 매개변수로 반환되는 상태 함수의 내부처리과정을 리턴하는 용도로 쓰인다. 1. 다른 함수의 인자로써 이용되는 함수. 2. 어떤 이벤트에 의해 호출되어지는 함수. var sum = function(n1, n2, fn){ if(typeof fn == 'function'){ fn(n1+n2); } } sum(10, 20, function(n){ console.log(n); }); addEventListener또한 콜백함수라고 볼 수 있다. ▶ 콜백함수 실습 실습1. sum이라는 함수가 있다. 함수를 실행하면서 첫번째 인수는 배열, 두번째 인수는 함수이다. sum함수를 실행시켜 배열의 총 합산값을 2번째 인수의 함수의 매개변수로 받도록 하.. 쿠키 쿠키 활용 컴퓨터에서 텍스트 파일로 저장된 데이터. 쿠키는 사용자에 관한 정보를 기억하는 용도의 데이터 이다. 세션과 쿠키를 확실하게 구분 지을 수 있어야 한다. 세션-서버에 저장, 쿠키-??? · 쿠키의 사용처 ☞ 데이터 저장 ▶ setCookie, getCookie w3school.com의 setCookie와 getCookie 소스코드를 활용해보자. - setCookie function setCookie(cname, cvalue, exdays) { var d = new Date(); d.setTime(d.getTime() + (exdays*24*60*60*1000)); var expires = "expires="+ d.toUTCString(); document.cookie = cname + "=" +.. 문자열 객체 문자열 객체 다루기 ▶ 문자열 객체의 선언 방법 new String() 형태를 생략하여 선언이 가능하지만 생성자 함수를 통해 객체를 생성하고 사용할 수 있게 해준다. - var 변수 = ' '; - var 변수 = new String(); - var 변수 = new String(' '); ▶ 문자열 객체의 메서드 및 속성 값에 의해 생성된 문자열 객체는 아래의 메서드 및 속성을 사용 할 수 있다. 다음은 자주쓰는 문자열 객체 메서드 및 속성을 정리한 표 이다. 어떤 것이 있는지, 그 사용법을 알아두자. 종류 사용법 설명 indexOf 변수.indexOf(' ') 변수값에 담긴 문자열을 indexOf의 인수값과 일치하는 인덱스 번호를 반환한다. lastIndexOf 변수.lastIndexOf(' ') 변수.. 이전 1 2 3 4 다음
