본문 바로가기

분류 전체보기128

jQuery - 이벤트(키보드 이벤트, 입력 양식 이벤트) 이벤트 유형 윈도우 이벤트 입력 양식 이벤트 마우스 이벤트 키보드 이벤트 입력 양식 이벤트 입력 양식 이벤트 종류 submit : submit(전송) 버튼 눌렸을 때 발생 reset : reset(취소) 버튼 눌렀을 때 발생 change : 입력 양식의 내용을 변경할 때 발생 (select 입력 시) focus : 입력 양식에 커서를 놓을 때 발생 blur : 입력 양식이 커서를 잃을 때 발생 입력 양식 관련메소드 value : val() focus : focus() 체크 되었는 지 : is(':checked') 입력란에서 엔터키 쳤을 때 문제 입력란에서 엔터키를 치면 무조건 submit() 호출되면서 서버로 전송 현재 ID 입력란에서 엔터키 치면 submit 이벤트가 발생하면 "아이디를 .. 2021. 12. 14.
jQuery - 이벤트(마우스 이벤트, 동적 이벤트) 이벤트 유형 윈도우 이벤트 입력 양식 이벤트 마우스 이벤트 키보드 이벤트 마우스 이벤트 마우스 이벤트 종류 click : 마우스를 클릭했을 때 발생 dbclick : 마우스를 더블 클릭했을 대 발생 mousedown : 마우스 버튼을 누를 때 발생 mouseup : 마우스 버튼을 뗄 때 발생 mouseenter : 마우스가 요소의 경계 외부에서 내부로 이동할 때 발생 mouseleave : 마우스가 요소의 경계 내부에서 외부로 이동할 때 발생 mousemove : 마우스를 움직일 때 발생 mouseout : 마우스가 요소를 벗어날 때 발생 mouseover : 마우스가 요소 안에 들어올 때 발생 hover : 마우스를 over 했을 때, out 했을 때 발생 contextmenu : 마우스 오른쪽 버튼을.. 2021. 12. 14.
jQuery - 이벤트(윈도우 이벤트) 이벤트 유형 윈도우 이벤트 입력 양식 이벤트 마우스 이벤트 키보드 이벤트 윈도우 이벤트 윈도우 이벤트 종류 ready(document) : 문서 객체 요소(DOM 요소)가 로드 되었을 때 발생 문서 객체 요소가 자바스크립트에서 사용 가능한 상태인지 확인하고 작동이 가능한 안전 상태일 때 발생 resize : 윈도우 창 크기 변경 시 발생 scroll : 윈도우 창 스크롤 이동 시 발생 load : 문서 객체 요소가 모두 로드 되었을 때 발생. ready와 차이점은 리소스, 이미지 또는 음악 등 로드가 완료된 경우 unload : 문서 객체를 닫을 때 발생 $(document).ready() document의 DOM 객체가 로드되고, 브라우저가 DOM 트리를 생성한 직후 외부 리소스, 이미지 등의로드 여부.. 2021. 12. 14.
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.

티스토리툴바