Front/jQuery17 jQuery - 이벤트 jQuery 이벤트 기존의 자바스크립트에서 사용했던 이벤트 대부분 사용 자바스크립트보다 훨씬 간단하고 쉽게 이벤트 처리 가능 이벤트 사용 기본 구조 (1) 이벤트 대상 : $('#btn') (2) 이벤트 등록 메소드 (이벤트 유형) : click() / click (3) 이벤트 핸들러 (이벤트 처리 함수) : function() { ... } 이벤트 등록 메소드 유형(이벤트 적용 방법) (1) 단독 이벤트 등록 메소드 한 동작에 대해 이벤트를 등록할 때 사용하는 메소드 선택자에 직접 이벤트 메소드를 적용하는 방법 $('선택자').이벤트유형(실행함수) 동적 연결 지원 안됨 $('#btn').click(function(){ }); (2) 그룹 이벤트 등록 메소드 (.. 2021. 12. 14. jQuery - 변수 jQuery 변수 변수명 앞에 $를 붙임 object로 jQuery 메소드 사용 가능 일반적으로 태그를 선택한 경우에는 객체로 $를 붙여서 사용 값을 가져온 경우에는 $를 붙이지 않고 var $div = $(‘div’); var $divLen = $(‘div’).length; 값을 저장한 경우 타입이 number 인 경우 var divLen = $(‘div’).length; jQuery 변수 예제 jQueryVariable.html box1 box2 box3 findElement.html hover 메소드를 사용하여 마우스 포인터가 올라갔을 때의 동작 확인하기 2개의 함수 호출 마우스 올렸을 때 : background : yellow, index 번호 적기 마우스 뗐을 때 : backgound : gre.. 2021. 12. 14. jQuery - 선택자(컨텐츠 탐색 선택자) jQuery 선택자(selector) jQuery 코드는 선택자와 메소드의 조합으로 구성되는 경우가 많음 중간에 자바스크립트 코드 같이 작성 HTML 태그를 쉽게 선택하기 위해 선택자 사용 선택자 종류 직접 선택자 인접 관계 선택자 필터 선택자 속성 선택자 컨텐츠 탐색 선택자 컨텐츠 탐색 선택자 $(‘선택자:contains(‘내용’)); : ‘내용’을 포함하는 요소 선택 $(‘선택자:has(‘span’)); : 태그를 포함하는 요소 선택 선택한 요소를 변수에 저장 여러 개를 찾은 경우 배열로 저장 형식 var $변수명 = $('선택자'); var 변수명 = document.getElementById('#id'); // 자바 스크립트와 동일 var tds = document.getElementByTagNa.. 2021. 12. 14. jQuery - 선택자(속성 선택자) jQuery 선택자(selector) jQuery 코드는 선택자와 메소드의 조합으로 구성되는 경우가 많음 중간에 자바스크립트 코드 같이 작성 HTML 태그를 쉽게 선택하기 위해 선택자 사용 선택자 종류 직접 선택자 인접 관계 선택자 필터 선택자 속성 선택자 컨텐츠 탐색 선택자 속성 선택자 HTML 태그(요소)의 지정된 속성 값에 따라 선택자로 정의 속성 선택자 문법 태그명[속성] : []만의 속성을 포함하는 모든 태그 선택 태그명[속성="값"] : 속성 값이 주어진 값과 동일한 모든 태그 선택 태그명[속성 ^= "깂"] : 속성 값이 주어진 값으로 시작하는 모든 태그 선택 태그명[속성 $= "값"] : 속성 값이 주어진 값으로 끝나는 모든 태그 선택 태그명[속성 *= "값"] : 속성 값이 주어진 값을 .. 2021. 12. 14. jQuery - 선택자(필터 선택자) jQuery 선택자(selector) jQuery 코드는 선택자와 메소드의 조합으로 구성되는 경우가 많음 중간에 자바스크립트 코드 같이 작성 HTML 태그를 쉽게 선택하기 위해 선택자 사용 선택자 종류 직접 선택자 인접 관계 선택자 필터 선택자 속성 선택자 컨텐츠 탐색 선택자 필터 선택자 태그의 상태나 순서 등으로 선택 $('태그명:순서필터') $('tr:odd') : 홀수 행만 선택 $('태그명:상태필터') $('input:checked') : 체크 상태인 태그 선택 필터 선택자 속성 요소 : odd - 홀수 번째 위치한 요소 선택 요소 : even - 짝수 번째 요소 : first - 첫 번째 요소 : last - 마지막 요소 : checked - 체크된 요소 선택(radio나 checkbox) 요소.. 2021. 12. 14. jQuery - 선택자(인접 관계 선택자) jQuery 선택자(selector) jQuery 코드는 선택자와 메소드의 조합으로 구성되는 경우가 많음 중간에 자바스크립트 코드 같이 작성 HTML 태그를 쉽게 선택하기 위해 선택자 사용 선택자 종류 직접 선택자 인접 관계 선택자 상위 요소(조상 / 부모) 선택자 하위 요소(자식 / 자손) 선택자 형제 선택자 필터 선택자 속성 선택자 컨텐츠 탐색 선택자 인접 관계 선택자 부모 요소 선택 : parent() 조상 : parents() 형제 : next() / nextAll() / nextUntil() / prev() / prevAll() / prevUntil() 인접 관계 선택자 예제 child-selector.html 자식 / 자손 선택자 자식/자손 선택자 자손 요소의 선택 방법 $(“선택자 선택자”).. 2021. 12. 13. jQuery - 선택자(직접 선택자) jQuery 선택자(selector) jQuery 코드는 선택자와 메소드의 조합으로 구성되는 경우가 많음 중간에 자바스크립트 코드 같이 작성 HTML 태그를 쉽게 선택하기 위해 선택자 사용 선택자 구조 $('선택자').메소드(매개변수, 함수 등) $('span').hide() 큰 따옴표 / 작은 따옴표 모두 사용 가능 선택자 종류 직접 선택자 전체 : $("*") 태그 : $('태그명') 아이디 : $('#id명') 클래스 : $('.클래스명') 그룹 선택자 인접 관계 선택자 필터 선택자 속성 선택자 컨텐츠 탐색 선택자 직접 선택자 예제 tag-selector 태그 선택자 Header1 Header2 Header3 id-selector.html 아이디 선택자 Header1 Header2 Header3 c.. 2021. 12. 13. jQuery란? jQuery jQuery란? 2006년 John Resig(존 레식)이 디자인한 자바스크립트 라이브러리 자바스크립트를 이용해 만든 다양한 함수들의 집합 무료 사용 가능한 오픈 소스 라이브러리 모든 웹 브라우저에서 동작 jQuery 특징 용량이 약 100KB로 가벼움 동적으로 HTML이나 CSS 컨트롤 능력이 탁월함 짧고 간결하게 코딩 가능 웹 표준과 타 브라우저 호환성 뛰어남 편리한 Ajax 호출 방법 메소드 체인 방식(여러 베소드를 연결하여 사용)으로 효유류적인 코딩이 가능하며, 간결하고 효과적인 코드 수정이 가능 다양한 플러그인 제공 jQuery 목적 쉬운 DOM 처리 쉽고 일관된 이벤트 연결 구현 쉬운 시각적 효과 구현 Ajax 기능 쉽게 구현 DOM(문서객체 모델) 객체 지향 모델로서 구조화된 문.. 2021. 12. 13. 이전 1 2 다음