JavaScript&JQuery (31) 썸네일형 리스트형 객체 조작 메서드 활용 - 동적 바인딩 동적 바인딩 html 실행 순서에 따라 dom 객체도 생성되기 때문에 이벤트 실행 완료 이후에 생성되는 html에는 이벤트를 걸 수가 없다. 이에 따라 동적으로 이벤트를 걸거나 객체 생성시에 이벤트를 걸어야 한다. 버튼 생성 or 제거 생성 제거 다음 과 같은 결과 도출>> 생성 제거 방법1. $(document).on('click','.add',function(){ var clone = $(this).parent().clone(); $('body').append(clone); }); $(document).on('click','.del',function(){ $('body').parent().remove(); }); 방법2. $('.add').click(function(){ var clone = $(th.. 객체 조작 메서드 - 편집 메서드 객체 편집 메서드 선택한 객체의 옵션(메서드에 위치 옵션 포함) 위치에 html 요소를 삽입하거나 삭제 또는 복제하는 메소드 종류 사용법 설명 before() $('선택자').before('html요소'); 선택한 대상의 이전 위치에 html 삽입 after() $('선택자').after('html요소'); 선택한 대상의 다음 위치에 html 삽입 append() $('선택자').append('html 요소'); 선택한 대상의 자식요소에 제일 끝에 html 삽입 prepend() $('선택자').prepend('html 요소'); 선택한 대상의 자식요소에 제일 처음에 html 삽입 clone() )$('선택자').clone(true or false); 선택한 대상을 복제한다. remove() $('선택자.. 객체 조작 메서드 - 수치 조작 메서드 수치 조작 메서드 요소의 속성을 조작할 때 사용하는 메서드로, 선택한 객체의 사이즈 및 위치 사이즈를 가지고 오거나 변경이 가능하다. 종류 사용법 설명 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번째 인수의 함수의 매개변수로 받도록 하.. 이전 1 2 3 4 다음
