[YERIEL] 개발일기/.etc12 동적 바인딩 & 트리거 & 이벤트 제거 1. 동적 바인딩 - html 실행 순서에 따라 dom 객체도 생성되기 때문에 이벤트 실행 완료 이후에 생성되는 html에는 이벤트를 걸 수 없다. 이에 따라 동적으로 이벤트를 걸거나 객체 생성시에 이벤트를 걸어야 한다. $(document).on('click','.add',function(){ var clone = $(this).parent().clone(); $('body').append(clone); }); $(document).on('click','.del',function(){ $(this).parent().remove(); }); 2. 트리거 이미 걸린 이벤트를 스크립트 상에서 작동되게 하는 방법(사용자가 이벤트 발동한 것처럼 작동 시킬 수 있다.) $('선택자').trigger('이벤트명').. 2020. 3. 30. 수치 조작 메서드 & 객체 편집 메서드 1. 수치 조작 메서드 선택한 객체의 사이즈 및 위치 사이즈를 가지고 오거나 변경이 가능하다. 1) 1) $('선택자').width() - 선택된 대상의 가로 사이즈를 가지고 오거나 변경 $('body').width() 2020. 3. 30. 속성 조작 메서드 1) $('선택자').html() - 선택된 객체의 html 요소를 가지고 오거나 삽입한다. $('body').html(); 2020. 3. 30. jquery 시작하기 1. 제이쿼리란? 제이쿼리는 엄청 똑똑한 양반(존 레식 john Resig)이 자바스크립트를 이용해 만든 라이브러리 언어이다. 라이브러리 언어는 자바스크립트로 만들어진 다양한 함수들의 집합이다. 미리 만들어진 다양한 함수이기 때문에 필요할 때마다 사용자가 호출해서 사용하면 된다. 단, 자동완성 기능은 없다...ㅠ 2. 제이쿼리 라이브러리 연동하기 1] 다운로드 방식 (js) 제이쿼리 사이트에서 제이쿼리 라이브러리 파일을 직접 다운 받아 HTML에 불러오는 형식 ① 종류 종류 설명 jquery.js 소스에 들여쓰기, 줄 바꿈, 주석까지 정리된 비압축 파일로, 제이쿼리 자체를 개발 할때 유용 jquery.min.js 소스에 들여쓰기, 줄 바꿈, 주석이 무시된 압축 파일로, 소스가 압축되어 있어 용량이 작아 .. 2020. 3. 24. jquery - 탐색 선택자 1. 탐색 선택자 기본 선택자로 이미 선택된 객체를 한번 더 검색하여 객체를 반환하는 방식 - 선택된 것 중에서 검색 대표적인 탐색 선택자에는 위치 탐색 선택자와 속성 탐색 선택자가 있다. 2. 위치 탐색 선택자 기본 선택자로 선택한 요소는 배열에 담긴다. 배열의 인덱스로 특정 요소를 좀 더 정확하게 선택할 수 있다. ① $('선택자').first( ); 선택된 객체 중 첫번째 객체 요소를 반환한다. ② $('선택자').last( ); 선택된 객체 중 마지막 객체 요소를 반환한다. ③ $('선택자').eq(index); 선택된 객체 중 인수값과 일치하는 인덱스 요소 선택 반환한다. 인덱스이기 때문에 0부터 시작 3. 배열 관련 메서드 다중으로 선택된 객체를 반복문 형태와 비슷하게 풀 수 있다. ① $('.. 2020. 3. 24. jquery - 선택자 ; 기본 선택자 1. 선택자란? 선택자는 HTML 요소를 선택하여 가져온다. 기본 선택자와 제이쿼리 탐색 선택자로 나눌 수 있다. 2. 선택자 사용하기 선택자를 사용하려면 문서 객체를 불러와야 하는데 1] 제이쿼리가 먼저 실행 되고 영역에 문서 객체를 불러오는 경우 가 생성되기 이전에 선택자가 먼저 실행되기 때문에 선택자로 문서 객체를 선택할 수 없다. 2] 그러면 제이쿼리가 무조건 문서객체 밑에 존재해야 하는가? 아니요~ ① $(document)ready(function( ){ }); 명령어를 적어주면 문서 객체 위에서도 문서 객체를 선택자로 사용할 수 있다. ② $(function( ){ }); (document)ready를 생략하고 바로 function으로 사용할 수 있다. 단, 동적으로 html을 생성하는 경우는.. 2020. 3. 24. 이전 1 2 다음 728x90 반응형
