01. JQuery_jQuery 선택자와 addClass

$(document).ready(function(){
  $('span').addClass('spotlight');     // 모든 span 태그에 spotlight 적용
  $('div').addClass('redText');        // 모든 div 태그에 redText 적용
  $('#simpletext1').addClass('largeText'); // id="simpletext1"에 largeText 적용
  $('.simpletext1').addClass('largeText'); // class="simpletext1"에 largeText 적용
});

 

• $(document).ready()
  → 문서가 준비되면 실행 (DOM 로드 후)
• $('span') : 모든 <span> 선택
• $('div') : 모든 <div> 선택
• $('#simpletext1') : 특정 id 선택 (#id)
• $('.simpletext1') : 특정 class 선택 (.class)
• .addClass('클래스명') : 해당 요소에 CSS 클래스 추가

---

📝 정리

• jQuery 선택자
  • 태그 선택 : $('태그명')
  • id 선택 : $('#아이디명')
  • class 선택 : $('.클래스명')
• addClass() 메서드 : 기존 요소에 CSS 클래스 추가 → 스타일을 쉽게 변경 가능
• JavaScript보다 코드가 훨씬 간단하고 직관적