SeouliteLab

jQuery All Selector (“*”)를 이용한 요소 선택 본문

프로그래밍

jQuery All Selector (“*”)를 이용한 요소 선택

Seoulite Lab 2024. 4. 9. 08:50

예제 1: 모든 요소에 대한 스타일 적용하기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery All Selector 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("*").css("color", "blue");
    });
  </script>
</head>
<body>
  <h1>Hello World!</h1>
  <p>This is a paragraph.</p>
  <div>This is a div.</div>
</body>
</html>

설명:

이 예제는 jQuery의 All Selector를 사용하여 모든 요소에 대해 파란색 텍스트 색상을 적용하는 방법을 보여줍니다.

  • $("*")는 문서 내 모든 요소를 선택합니다.
  • .css("color", "blue")를 사용하여 선택된 모든 요소의 텍스트 색상을 파란색으로 변경합니다.

예제 2: 모든 요소 숨기기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery All Selector 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("*").hide();
    });
  </script>
</head>
<body>
  <h1>Hello World!</h1>
  <p>This is a paragraph.</p>
  <div>This is a div.</div>
</body>
</html>

설명:

이 예제는 jQuery의 All Selector를 사용하여 모든 요소를 숨기는 방법을 보여줍니다.

  • $("*")를 사용하여 문서 내 모든 요소를 선택합니다.
  • .hide()를 사용하여 선택된 모든 요소를 숨깁니다.

예제 3: 모든 요소에 클래스 추가하기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery All Selector 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("*").addClass("highlight");
    });
  </script>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <h1>Hello World!</h1>
  <p>This is a paragraph.</p>
  <div>This is a div.</div>
</body>
</html>

설명:

이 예제는 jQuery의 All Selector를 사용하여 모든 요소에 클래스를 추가하는 방법을 보여줍니다.

  • $("*")를 사용하여 문서 내 모든 요소를 선택합니다.
  • .addClass("highlight")를 사용하여 선택된 모든 요소에 "highlight" 클래스를 추가합니다.
  • CSS를 통해 "highlight" 클래스에 배경색을 지정하여 강조 효과를 줍니다.

jQuery의 All Selector를 사용하면 문서 내 모든 요소를 선택하여 일괄적으로 조작할 수 있습니다. 위 예제들을 통해 다양한 활용법을 익혀보세요.

저작자표시 비영리 변경금지

'프로그래밍' 카테고리의 다른 글

jQuery 속성값이 특정 접두사를 포함하는 요소 선택자 [name|=”value”]  (0) 2024.04.09
jQuery :animated Selector - 애니메이션 중인 요소를 선택하여 조작  (0) 2024.04.09
jQuery.boxModel  (0) 2024.04.09
jQuery .andSelf() 메서드  (0) 2024.04.09
jQuery.selector: jQuery 선택자 사용법과 예제  (0) 2024.04.09
'프로그래밍' Related Articles more