자바를 자바

이벤트 핸들러(이벤트 발생시 실행될 function) 연결 종류 방법 방법1. 이벤트 메소드를 통한 연결 방법2. on메소드를 쓰는 방법 - on메소드를 이용해 한요소에 다중으로 이벤트 걸기 => { } 객체 이용해서 - off메소드를 이용한 이벤트 핸들러 제거 방법3. on 메소드를 쓰는 방법2 동적으로 만들어진 요소에 이벤트 적용 동적으로 만들어진 요소 : (없었는데요 있었습니다) 처음에 문서 로딩시에는 존재하지 않다가 나중에 새로이 만들어지는 요소 ★★ 잊지말기! 중요!★★ - one메소드 (일회성 이벤트) 이벤트를 딱 한번만 연결할 때 사용 ex) 팝업창 밑에 '오늘 하루 보지 않기' 같은... 키보드 관련 이벤트 키가 눌려졌을 때 발생하는 이벤트 - keydown : 키보드의 모든 키가 눌려질 ..

each 메소드 배열의 인덱스에 순차적으로 접근하고자 할 때 객체 가지고 있는 모든 속성에 순차적으로 접근하고자 할 때 사용할 수 있는 for in문과 유사하게 수행되는 메소드(for in문 제이쿼리에서 사용할때 오류있음) 이방법은 객체, 배열 모두 가능한 표현법 객체 X, 배열 O 만 가능한 표현법 => 순차적으로 객체/배열의 속성이나 인덱스에 접근할 때마다 함수가 실행 => 매개변수1, 매개변수2 생략 가능 case1) 객체의 경우 매개변수1 : 순차적으로 접근된 객체의 속성명(key) 매개변수2 : 해당 속성값(value) case2) 배열의 경우 매개변수1 : 순차적으로 접근된 배열의 인덱스(index) 매개변수2 : 실제 해당 값(value) case1) 배열을 제시할 경우 case1) 객체를 ..

동적으로 요소 생성하기 1. 문자열로 만드는 방법 2. DOM객체를 이용한 방법 - 1단계 : createElement() => 요소노드 생성 - 2단계 : createTextNode() => 텍스트노드 생성 - 3단계 : appendChild() => 요소노드 안에 텍스노드 자식으로 추가 3. jQuery 방식 삽입 관련 메소드 part1 선택된 요소를 기준으로 새로이 생성된 요소를 추가하는 메소드 - $(A).append(B) : A요소 내에 뒷부분에 B를 추가(자손/하위) - $(A).prepend(B) : A요소 내의 앞부분에 B를 추가(자손/상위) - $(A).before(B) : A요소 앞부분에 B를 추가(동위) - $(A).after(B) : A요소 뒷부분에 B를 추가(동위) ※ 반드시 B에..

html('문구') : innerHTML 속성과 관련된 메소드 선택된 요소의 content영역(여는 태그와 닫는 태그 사이)을 리턴해주거나 또는 변경해주는 메소드 - $('선택자').html() : 선택된 요소의 content 영역의 값을 반환해줌 - $('선택자').html('문구') : 선택된 요소의 content 영역 값을 해당 문구로 바꿔줌 => 이 때, html 태그 인식 O text('문구') : innerText 속성과 관련된 메소드 선택된 요소의 content 영역의 텍스트만 리턴해주거나 변경해주는 메소드 - $('선택자').text() : 선택된 요소의 content 영역을 반환해줌 - $('선택자').text('문구') : 선택된 요소의 content내용을 문구로 변경해줌 => 이 때,..

Sideways(동위) 메소드 같은 레벨에 있는 요소들을 선택할 수 있는 메소드 $('선택자').siblings() 선택된 요소를 기준으로 같은 레벨에 있는 모든 요소들을 선택 (본인은 빼야함) $('선택자').siblings('선택자') 선택된 요소를 기준으로 같은 레벨에 있는 모든 요소들 중에서 제시한 값과 일치하는 요소들만 선택 $('선택자').next() 선택된 요소들 기준으로 같은 레벨에 있는 모든 요소들 중에서 바로 다음 요소 하나만 선택 $('선택자').nextAll() 선택된 요소 기준으로 같은 레벨에 있는 모든 요소들 중에서 내 뒤에 있는 요소들을 모두 선택 $('선택자').nextUntil('선택자') 선택된 요소를 기준으로 같은 레벨에 있는 모든 요소들 중에서 내 뒤에 있는 요소부터 ..

Descendants(자손) 메소드 기준이 되는 요소의 하위요소들을 선택할 수 있는 메소드 $('선택자').children() 선택된 요소를 기준으로 모든 자손(바로 하위)요소들을 선택 $('선택자').children('선택자') 선택된 요소를 기준으로 모든 자손 요소(바로 직계 하위 요소)들 중에서 제시한 값과 일치하는 요소들만 선택 $('선택자').find('선택자') 선택된 요소를 기준으로 모든 후손 요소들 중에서 제시한 값과 일치하는 요소들만 선택

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문을 이용하여 인덱스에 직접 접근해서 값을 변경한다.