마우스가 들어오는 순간 첫번째 매개변수 실행 , 마우스가 벗어난 순간 두번째 매개변수 실행
< 출력값 >
- 마우스가 태그에 들어갔을 때
- 마우스가 태그에 벗어났을 때
3. 이벤트 제거
off() ---> one()
< 출력값 >
클릭하고 나서 이벤트가 적용된 다음 이벤트가 제거 됩니다.
4. 이벤트 강제 발생
사용 형태 1) $(selector).trigger(eventName);
- h1을 만날 때 마다 해당 index 값을 넣어줍니다.
- 문자열을 매개변수로 html에 넣어줍니다.
- (index(h1 click 수), html(start: *)) = click 할 때마다 별표가 하나씩 늘어납니다.
- setInterval 을 이용해서 h1의 마지막에 click 이벤트를 연결 = 1초마다 click이 되어진것 처럼 별표가 늘어납니다.
< 출력값 >
2) $(selector).trigger(eventName, data);
- 이벤트 뿐 아니라 data도 전달 할 수 있습니다.
h1 호출하면서 전달 받을 수 있도록 매개변수 정의 이벤트 관련 데이터를 매개변수로 전송해줍니다.
그리고 전달된 순서로 매개변수에 넣어집니다.
data1 = 273, data2 = 52
h1의 첫번째를 호출하면서 click 의 이벤트가 발생하도록 trigger로 연결 [273, 52] 배열의 자료형 전달
< 출력값 >
5. 기본 이벤트 제거
< 출력값 >
앵커 태그가 활용되지 않습니다.
6. 마우스 이벤트
- click : 마우스 클릭할 때 이벤트 발생. - dbclick : 마우스 더블클릭할 때 이벤트 발생. - mousedown : 마우스 버튼을 누를 때 이벤트 발생. - mouseup : 마우스 버튼을 뗄 때 이벤트 발생. - mouseenter : 마우스가 요소의 경계 외부에서 내부로 이동할 때 발생. - mouseleave : 마우스가 요소의 경계 내부에서 외부로 이동할 때 발생. - mousemove : 마우스를 움직일 때 발생. - mouseout : 마우스가 요소를 벗어날 때 발생. - mouseover : 마우스가 요소 안에 들어올 때 발생.
< 출력값 >
over는 경계 안으로 들어면 event 발생, enter는 안에 들오는 순간 event 발생
테두리를 중심으로한 이동 - over, 내부와 외부의 경계 이동 - enter
외부로 나가면 - leave
7. 키보드 이벤트
keydown : 키보드가 눌러질 때 발생. keypress : 글자가 입력될 때 발생(한글지원x). keyup : 키보드가 떼어질 때 발생.
- removeClass(): 문서 객체의 클래스 속성을 제거. - 여러 개의 클래스 속성 중 선택적으로 제거.
3. 문서 객체의 속성 검사
-attr(): 속성과 관련된 모든 기능 수행, 첫번째 문서 객체의 속성 출력.
< 출력값 >
4. 문서 객체의 스타일 검사
css(): 스타일과 관련된 모든 기능을 수행
< 출력값 >
5. 문서 객체의 내부 검사
- 기존 자바스크립트에서 문서 객체의 innerHTML 속성과 관련된 jQuery 메서드 1) html(): 문서 객체 내부의 글자와 관련된 모든 기능을 수행
< 출력값 >
처음 만나는 한개만 읽어옵니다.
2) text(): 문서 객체 내부의 글자와 관련된 모든 기능을 수행, 선택자로 선택한 모든 문서 객체의 글자를 가져와 출력
< 출력값 >
6. 문서 객체의 내부 추가
1) $(selector).html(value); -> HTML 태그를 인식해 문자열 삽입.
< 출력값 >
$(selector).text(value); -> HTML 태그를 인식하지 않음
< 출력값 >
h1 기능이 적용 되지 않고, 문자열로 인식하여 출력합니다.
< 출력값 >
태그의 기능을 만나면 위와 같이 변환하기 때문에 문자열로 출력합니다.
2) $(selector).text(function(index, html){}); // 문자열을 전달 받아서 문구 완성
<출력값 >
7. 문서 객체의 내부 제거
remove(): 특정 문서 객체를 제거 empty() : 특정 문서 객체의 후손을 모두 제거
1) remove - 특정 문서 객체를 제거
remove를 이용하여 특정 문서 객체를 제거
< 결과값 >
2) empty - 특정 문서 객체의 후손을 모두 제거
< 출력값 >
후손들이 모두 제거되어서 아무것도 출력되지 않습니다.
8. 문서 객체의 생성(1)
: 텍스트 노드를 갖는 문서 객체를 생성하는 방법 $() : 문서 객체 생성. $() 함수의 매개 변수에 HTML 태그를 문자열로 넣기만 하면 문서 객체가 생성됨
- 생성한 문서 객체를 body 태그에 추가하는 방법1
: $(document).ready(function(){});
< 메서드 체이닝 방식 >
- $( ) 안에 태그 명을 넣어주면 태그를 생성합니다.
- html( ) 출력할 문자열을 넣어주면 자동으로 연결합니다.
- appendTo( ) body 영역에 추가
< 출력값 > - body 영역 안에 h1 태그 안에 Hello jQuery...! 추가
- $() 메서드의 내부에 HTML 태그를 바로 넣어 body 태그에 추가하는 방법2
- jQeury를 호출하면서 h1 태그 안에 문구를 완성시킨 후 body 영역에 추가 가능 (html 메서드 생략)
< 출력값 >
9. 문서 객체의 생성(2)
: 텍스트 노드를 갖지 않는 문서 객체를 생성하는 방법.
attr - 이용하여 ('src', '이미지 파일 이름') 을 넣어서 추가
< 출력값 >
+ 사진이 너무 클 때 추가 조정
< 출력값 >
10. 문서 객체의 삽입
$(A).append(B) : B를 A의 뒷 부분(자식 요소)에 추가 <-> $(A).appendTo(B) :A를 B의 뒷 부분(자식 요소)에 추가 $(A).prepend(B) : B를 A의 앞 부분에 추가 <-> $(A).prependTo(B) :A를 B의 앞 부분(자식 요소)에 추가 $(A).after(B) : B를 A의 뒤에 추가 <-> $(A).insertAfter(B) :A를 B의 뒤(형제요소)에 추가 $(A).before(B) : B를 A의 앞에 추가 <-> $(A).insertBefore(B) :A를 B의 앞(형제요소)에 추가
