자바를 자바

Ancestors(조상) 메소드 기준이 되는 요소의 상위요소들을 선택할 수 있는 메소드 $('선택자').parent() 선택된 요소를 기준으로 바로 위의 상위 부모 요소 하나만을 선택 $('선택자').parents() 선택된 요소를 기준으로 모든 상위 요소를 선택 $('선택자').parents('선택자') 선택된 요소를 기준으로 모든 상위요소들 중에서 제시한 값과 일치하는 상위요소들만 선택 $('선택자').parentsUntil('선택자') 선택된 요소를 기준으로 선택된 요소부터 제시한 값까지 모든 상위요소들을 선택

필터 관련 선택자 :first => 첫번째 요소를 의미 :last => 마지막 요소를 의미 :even => 짝수번째 요소를 의미(0부터 시작) :odd => 홀수번째 요소를 의미(0부터 시작) 필터 관련 메소드 기준이 되는 요소 중에서 특정 요소만을 걸러서 선택해주는 메소드 first() : 기준 중에서 가장 첫번째를 선택 last() : 기준 중에서도 가장 마지막을 선택 filter() : 기준 중에서도 해당 선택자만 선택 not() : 기준 중에서 해당 선택자가 아닌것만 선택 eq() : 0번부터 시작, 몇번재 요소 선택 ★중요! - text() : 선택된 요소의 innerText와 관련된 기능을 수행(태그 미적용해서 text그대로 출력) - html() : 선택된 요소의 innerHTML과 관련된 ..

자손 선택자(>)와 후손 선택자() 자손선택자 (>) : 부모요소 바로 밑 직계 자식요소만을 선택(손자X) 후손선택자 : 자손선택자를 포함한 그 하위의 모든 요소를 선택(손자O) 속성 선택자 선택자[속성] : 특정 속성을 가지고 있는 모든 요소 선택 선택자[속성=속성값] : 속성값이 특정값과 "일치"하는 모든 요소 선택 선택자[속성~=속성값] : 속성값에 특정값을 "포함"하는 요소 선택(공백 기준) 선택자[속성^=속성값] : 속성값에 특정값으로 "시작"하는 모든 요소 선택 선택자[속성$=속성값] : 속성값에 특정값으로 "끝"나는 모든 요소 선택 선택자[속성*=속성값] : 속성값에 특정값을 "포함"하는 요소 선택 - html() : innerHTML과 관련된 기능을 수행하는 메소드 인자로 값을 전달하면 컨..

아이디 선택자 특정 고유한 아이디 속성값을 가진 요소 단 하나만의 선택하고자 할 때 사용 $('#아이디명') 선택된 요소 객체에 메소드를 활용해서 값을 변경 * .html() : innerHTML과 관련된 기능을 수행하는 메소드 태그 선택자 해당 태그요소를 전부 다 가져오고자 할 때 사용 자바스크립트방식의 for문같은 복잡한 코드 필요 없이 단번에 속성값을 변경할 수 있다. 클래스 선택자 특정 클래스 속성값을 가진 요소들을 선택하고자 할 때 사용 클래스이름으로 요소를 꺼내올시에도 값이 여러개 이므로 배열에 요소객체들이 담기게된다. 따라서 for문을 이용하여 인덱스에 직접 접근해서 값을 변경한다.

jQuery란? 기존에 자바스크립트 언어만으로 구현하기에는 복잡했던 구문작성들을 간소화하기 위해 "존 래식"에 의해 개발된 JavaScript 기반의 라이브러리 (유용한 기능들의 모음집) 즉, JavaScript언어로 유용한 함수나 내용들이 이미 만들어져 있는 (정의되어있는)모음집 - jQuery의 장점 1) DOM요소와 관련된 스크립트를 보다 쉽게 구현할 수 있다. 2) AJAX(비동기식통신), 이벤트 처리 등 폭 넓게 지원한다. 2) jQuery와 관련된 확장 플러그인, 오픈 API등을 지원한다. => 적은 양의 코드로 빠르고, 풍부한 기능을 제공함! jQuery 라이브러리 연결 방법 head태그 내부에 script태그로 jQuery관련 .js 파일 가져오기 오프라인 / 온라인 방식이 있다. 1. j..

정규표현식 정규표현식(REGEX / REGXP : Regular Expression)이란, 특정 패턴을 가진 문자열을 찾거나 또는 찾아서 변경 할 때 사용하는 형식 언어 정규표현식을 사용하면 문자열에 대해 특정 패턴을 조건 검사하거나 변경 할 때 복잡한 조건을 제시할 필요 없이 간단하게 처리 가능 자바스크립트 뿐만 아니라 자바, 오라클 또는 다른 언어들에서도 사용 가능 * RegExp객체에서 제공하는 메소드 => 정규표현식객체.메소드명(검사할 문자열); - 정규식.test(문자열) : 문자열에서 정규식값과 일치하는 값이 있다면 true, 없다면 false - 정규식.exec(문자열) : 문자열에서 정규식값과 일치하는 값이 있다면 처음 매칭된 문자열을 반환, 없으면 null * String 객체에서 제공하..

이벤트 모델 종류 (이벤트를 부여하는 방법들) 1. 고전 이벤트 모델 => btn.onclick = function(){} 2. 인라인 이벤트 모델 => 3. 표준 이벤트 모델 => addEventListener() * 이벤트 관련 용어 event target : 이벤트가 일어날 객체(button, h2, label, .......) event type : 이벤트 종류(click, scroll, mousemove, .......) event handler : 이벤트가 발생했을 때 동작할 코드들의 모임 * 고전 이벤트 모델(기본 이벤트 모델) 요소 객체를 가지고 와서 해당 요소객체의 이벤트 속성에 접근한 후 이벤트 핸들러를 연결하는 방식 (== 익명함수를 대입한다.) 요소객체.(이벤트)속성명 = funct..

BOM (Browser Object Model) location 객체 브라우저 주소창과 관련된 객체 => url(href 속성) 굳이 태그 아니더라도 url이동을 할 수 있게 해주는 객체이다. 가능하면 속성에 직접 접근하기보다 location 객체의 메소드를 이용하는 방법을 권장한다. - assign(), replace() : 페이지 이동 - reload() : 새로고침 (= window.onload) screen 객체 가로, 세로, 해상도등의 화면 정보를 조회할 수 있는 객체 navigator 객체 사용자가 사용중인 브라우저에 대한 정보(제조사)에 대한 정보가 담겨있는 객체 DOM (Document Object Model) HTML에 있는 각각의 태그(요소)들을 Node(노드)라고 한다. - 요소노드 ..

window 객체 window 객체는 자바스크립트이 최상위 객체이며 브라우저 창 하나 생성시 자동으로 생성된다. 크게 BOM, DOM으로 나뉜다. - BOM (Browser Object Model) : 브라우저 창과 관련된 객체들 - DOM ( Document Object Model) : html 문서의 요소(태그)와 관련된 객체들 window 객체에서 제공하는 메소드 window.open('url', '창이름', '창의 특성') url : 새창에서 열고자하는 주소 창이름 : 동일한 이름의 창이 이미 열려있을 경우 새로이 열리지 않고 이미 열려있는 창에서 새로고침 (크롬은 새로고침 / IE 새탭이 뜸 ) 창의 특성 : 새로 열릴 창의 너비, 높이, 툴바, 스크롤바, 상태표시줄 등등.. (브라우저마다 다름..

객체배열을 이용한 다양한 다량의 데이터 관리 - for in문을 이용한 공통 속성 추가 생성자 함수 new 키워드를 사용해서 객체를 생성할 수 있는 함수를 의미 (함수명을 만들 때 첫글자를 대문자로 한다.) Date 객체 자바스크립트에 기본으로 정의되어 있는 날짜 관련 내장 객체 * 응용문제