제이쿼리 선택자

 

 

제이쿼리 선택자 설명 및 예제

 

$("p")
$("#cat")
$(".dog")
$('div strong')
$('ul li')

 

제이쿼리에서 위의 명령들은 특정한 HTML 요소를 선택하기 위한 선택자입니다. 각 선택자가 의미하는 바와 간단한 예제를 통해 알아볼까요?

1. $("p")

• 의미: 모든 <p> 태그를 선택합니다. 즉, 웹 페이지에 있는 모든 단락을 선택한다는 뜻입니다.
• 예제:
  HTML

  <p>첫 번째 단락</p>
  <p>두 번째 단락</p>
  <script>
    $("p").css("color", "blue"); // 모든 단락의 글자 색깔을 파란색으로 변경
  </script>
  

  코드를 사용할 때는 주의가 필요합니다.

   
  위 예제에서는 페이지에 있는 모든 단락의 글자 색깔이 파란색으로 바뀌게 됩니다.

2. $("#cat")

• 의미: id가 "cat"인 요소를 선택합니다. id는 HTML 요소를 고유하게 식별하기 위한 속성입니다.
• 예제:
  HTML

  <div id="cat">고양이 그림</div>
  <script>
    $("#cat").hide(); // id가 "cat"인 요소를 숨깁니다.
  </script>
  

  코드를 사용할 때는 주의가 필요합니다.

   
  위 예제에서는 id가 "cat"인 div 요소가 화면에서 사라지게 됩니다.

3. $(".dog")

• 의미: class가 "dog"인 모든 요소를 선택합니다. class는 여러 요소에 공통적인 스타일을 적용하기 위해 사용됩니다.
• 예제:
  HTML

  <div class="dog">강아지 사진</div>
  <span class="dog">멍멍!</span>
  <script>
    $(".dog").css("font-size", "20px"); // class가 "dog"인 모든 요소의 글자 크기를 20px로 변경
  </script>
  

  코드를 사용할 때는 주의가 필요합니다.

   
  위 예제에서는 class가 "dog"인 div와 span 요소의 글자 크기가 20px로 커지게 됩니다.

4. $('div strong')

• 의미: 모든 div 요소 안에 있는 모든 strong 태그를 선택합니다. 즉, div 요소의 자식 요소 중 strong 태그만 선택합니다.
• 예제:
  HTML

  <div>
    <strong>강조된 단어</strong>
  </div>
  <script>
    $('div strong').css("font-weight", "bold"); // 모든 div 요소 안의 strong 태그의 굵기를 더 굵게
  </script>
  

  코드를 사용할 때는 주의가 필요합니다.

   
  위 예제에서는 div 요소 안에 있는 strong 태그의 글자가 더 굵어지게 됩니다.

5. $('ul li')

• 의미: 모든 ul(unordered list) 요소 안에 있는 모든 li(list item) 태그를 선택합니다. 즉, 모든 목록 항목을 선택합니다.
• 예제:
  HTML

  <ul>
    <li>사과</li>
    <li>바나나</li>
    <li>딸기</li>
  </ul>
  <script>
    $('ul li').css("color", "red"); // 모든 목록 항목의 글자 색깔을 빨간색으로 변경
  </script>
  

  코드를 사용할 때는 주의가 필요합니다.

   
  위 예제에서는 모든 목록 항목의 글자 색깔이 빨간색으로 바뀌게 됩니다.

요약

• $()는 제이쿼리 객체를 생성하는 함수입니다.
• p, #cat, .dog 등은 선택자로, 특정 요소를 찾기 위한 패턴입니다.
• 각 선택자는 다양한 조합을 통해 더 복잡한 요소를 선택할 수 있습니다.