제이쿼리 7

[jQuery] 이벤트

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

*jQuery* 2021.12.27

[jQuery] 추가적인 메소드

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

*jQuery* 2021.12.27

[jQuery] 요소생성 및 제거

동적으로 요소 생성하기 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에..

*jQuery* 2021.12.24

[jQuery] 영역 관련 메소드

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

*jQuery* 2021.12.24

[jQuery] 탐색(순회)메소드_동위

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

*jQuery* 2021.12.24

[jQuery] 탐색(순회)메소드_자손

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

*jQuery* 2021.12.23

[jQuery] 탐색(순회)메소드_조상

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

*jQuery* 2021.12.23