Jquery-활용(2)

JavaScript 로딩 및 실행 방식 비교

window.onload

window.onload = function(){ ... }

• 페이지의 모든 리소스(HTML, 이미지, CSS 등)가 로드된 후 실행
• 중요 포인트
  • window.onload는 마지막에 선언된 함수만 유효
  • 따라서 아래 두 개 중 두 번째 것만 실행됨

window.onload = function(){
  ... "JavaScript 이용1"
};

window.onload = function(){
  ... "JavaScript 이용2"
};

 

 

jQuery 문서 준비 이벤트 (document ready)

기본 형태

$(document).ready(function(){ ... });

 

 

모든 버튼 색상 변경

동작 내용

• 모든 버튼의 배경색을 파란색
• 모든 버튼의 글자색을 흰색으로 변경

$("button:nth-of-type(1)").click(function(){
  $("button").css("background-color","blue");
  $("button").css("color","white");
});

핵심 포인트

• 특정 버튼 클릭 → 전체 버튼 스타일 변경
• CSS를 개별 속성 단위로 적용

CSS 객체(JSON) 방식 적용

대상 버튼

• Jquery2 (두 번째 버튼)

동작 내용

1. 모든 버튼에 아래 스타일 적용
   • 배경색: 초록색
   • 글자색: 흰색
   • 테두리: 빨간 점선 (3px)
2. 모든 <h1> 태그 배경색을 주황색으로 변경

$("button:nth-of-type(2)").click(function(){
  var obj = {
    "background-color":"green",
    "color":"white",
    "border":"3px dotted red"
  };

  $("button").css(obj);
  $("h1").css("background-color","orange");
});

핵심 포인트

• CSS를 객체(JSON) 형태로 한 번에 적용
• 여러 요소(button, h1)를 동시에 제어 가능
• 유지보수 및 가독성 측면에서 객체 방식이 유리

특정 input 타입만 선택

대상 버튼

• Jquery3 (세 번째 버튼)

동작 내용

• type="text" 인 input 요소만 선택
• 배경색을 노란색으로 변경
• type="number" input은 변경되지 않음

$("button:nth-of-type(3)").click(function(){
  $("input[type='text']").css("background-color","yellow");
});

핵심 포인트

• 속성 선택자 ([type='text']) 사용
• 동일한 input 태그라도 type에 따라 선택 가능