Window.onload / ready( )
- 공통점
위쪽에 코드가 작성되어도 제일 마지막에 해석(문서 로딩이 끝나는 시점)
-> 장점 : 코드가 미해석되어 오류가 발생하는 경우가 없어짐
-> 단점 : 먼저 해석되는 코드가 너무 크면 수행되는 시간이 뒤쳐질 수 있음
- 차이점
window.onload는 페이지 내에서 딱 한번만 작성할 수 있다.
ready()는 여러번 작성 가능
--> 창이 실행되면 가장 먼저 실행되는 함수들
ready( )
- 문서 내 모든 요소 로드가 완료되면 함수를 실행하라
ready( ) 작성방법 3가지
1) jQuery(document).ready(function(){ 코드; });
2) $(document).ready(function( ) { 코드; });
($ 기호는 jQuery를 의미함)
3) $(function( ) { 코드; } );
-> 제일 간단한 형태의 ready( ) 함수
jQuery 선택자
- css 적용 방법
$( "태그명" ).css("속성", "속성값");
ex) $("h5").css("color", "red");
두 태그 동시에도 가능
$("h5, p")
$( "#아이디명" ).css("속성", "속성값");
ex) $("#h5").css("color", "red");
$( ".클래스명" ).css("속성", "속성값");
ex) $(".h5").css("color", "red");
클래스명을 두개를 가지고 있는 요소의 css 변경
$(".클래스명.클래스명")
->연달아 작성 가능
이벤트 발생
- on( ) = addEventListener
-> 특정 이벤트 발생 시 동작(이벤트 핸들러)지정
--> 이벤트로는 click이 흔하게 쓰이고 change도 많이 쓰인다.
자식, 후손 선택자
- 자바스크립트와 마찬가지로 '>' 기호는 자식을 뜻하고 아무것도 작성하지 않고 띄어쓰기는
후손을 뜻함
ex)클래스가 area인 요소의 자식 중 h4 글자색 red로 변경
$(".area > h4").css("color", "red");
ex)클래스가 area인 요소의 후손 중에 ul 후손 중에
클래스가 qqq인 배경색 원하는 걸로 변경
$(".area ul .qqq").css("backgroundColor", "pink");
--> ul( .area의 자식 ) , qqq( ul의 자식, area의 후손 )
속성 선택자
- 요소[속성] : 특정 속성을 가지고 있는 객체 선택.
요소[속성 = 값] : 속성 안의 값이 특정 값과 같은 객체 선택.
요소[속성 ~= 값] : 속성 안의 값이 특정 값을 단어로써 포함하는 객체 선택.
요소[속성 ^= 값] : 속성 안의 값이 특정 값으로 시작하는 객체 선택.
요소[속성 $= 값] : 속성 안의 값이 특정 값으로 끝나는 객체 선택.
요소[속성 *= 값] : 속성 안의 값이 특정 값을 포함하는 객체 선택.
- name 속성값이 gender인 요소 선택
console.log( $("input[name = 'gender']") )
- :checked = check된 요소 선택
- prop("속성명") : 해당 속성이 요소에 존재하면 true, 아니면 false 값 반환
ex) .prop("checked") : 체크되어 있는 상태인지 확인
탐색 메소드
** parent **
- $("요소명").parent( ) : 선택된 요소의 바로 위 상위 요소
ex) span 태그의 부모 요소의 테두리 , 글자색 변경
$("span").parent().css("color", "red").css("border" , "2px solid red");
- $('요소명').parents([매개변수]) : 선택된 요소의 모든 상위 요소 리턴
매개변수가 있으면 매개변수와 '일치'하는 부모만 리턴
ex) li태그의 상위 요소 중 div만 선택하여 테두리 변경
$("li").parents("div").css("border", "2px dashed magenta")
- $('요소명').parentsUntil(매개변수) : 선택된 요소부터 매개변수 요소전까지 범위의 요소 리턴
ex) 선택된 요소부터 매개변수 요소전 까지 범위의 요소 리턴
$("span").parentsUntil("div").css("backgroundColor", "pink")
** children **
- $('요소명').children([매개변수]) : 선택된 요소의 모든 자식 객체 리턴
매개변수가 있으면 매개변수와 일치하는 자식 객체만 리턴
ex) 클래스가 type인 요소의 자식 중 ul태그의 스타일을 style3로 설정
$(".type").children("ul").css(style3)
** find **
- $("요소명").find(매개변수) : 선택된 요소의 인자와 일치하는 모든 후손 객체 리턴
ex) 클래스가 wrap인 요소의 후손 중 모든 span 태그의 스타일을 style5로 설정
$(".wrap").find("span").css(style5)
형제 요소 선택
$('요소명').siblings([매개변수])
- 선택된 요소와 같은 레벨(형제)에 있는 모든 요소 리턴
- 매개변수가 있으면 같은 레벨에 있는 요소 중 매개변수와 일치하는 요소 리턴
.next( )
- 선택된 요소의 같은 형제 중 선택된 요소 바로 다음의 요소 리턴
.nextAll( )
- 선택된 요소의 같은 형제 중 선택된 요소 바로 다음의 모든 요소 리턴
.nextUntil( )
- 선택된 요소의 같은 레벨 중 선택된 요소 바로 다음부터 매개변수 이전 까지의 모든 요소 리턴
.prev( )
- next의 반대, 같은 형제 중 선택된 요소 이전의 요소 리턴
.prevAll( ), .prevUntil( )
- next의 반대
요소 추가
1) $("A").append("B") : A 요소 내 제일 마지막뒷부분에 B를 추가(자식)
2) $("A").prepend("B") : A 요소 내 앞부분에 B를 추가(자식)
3) $("A").after("B") : A의 요소 뒷부분에 B를 추가(형제)
4) $("A").before("B") : A의 요소 앞부분에 B를 추가(형제)
태그 관련 이벤트
- focus : input태그에 포커스가 맞춰 졌을때
ex) text인 경우 커서가 깜빡 거릴 때
- blur : 포커스가 해제되었을 때
- change : input태그의 값이 변했을 때
1) checkbox, radio, select(마우스 선택요소)
-> 값이 변했을 때 change 이벤트 발생
ex) 체크박스의 값이 선택되거나 해제되었을 때
2) text 관련 요소(키보드로 값 변경하는 요소)
-> 포커스가 해제되었을 때 이전 값과 다를경우 change 이벤트 발생
- select : 선택한 요소 입력 영역 값에 블럭이 설정된 경우
- input : 입력과 관련된 모든 이벤트
시각적 효과를 위한 Effect 메소드
- fadeIn( ) : 점점 불투명해지면서 나타남
- fadeOut( ) : 점점 투명해지면서 사라짐
- slideDown( ) : 화면이 밑으로 내려가는 기능
- slideUp( ) : 화면이 위로 올라가는 기능