SeouliteLab

jQuery .select() 메서드: 요소 선택과 관련된 기능 본문

프로그래밍

jQuery .select() 메서드: 요소 선택과 관련된 기능

Seoulite Lab 2024. 4. 4. 09:08

예제 1: 클래스가 'selected'인 요소 선택하기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery .select() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      var selectedItems = $(".selected");
      console.log(selectedItems);
    });
  </script>
</head>
<body>
  <p class="selected">선택된 요소 1</p>
  <div class="selected">선택된 요소 2</div>
  <span>선택되지 않은 요소</span>
</body>
</html>

설명: 이 예제는 클래스가 'selected'로 지정된 요소들을 선택하여 콘솔에 출력합니다.

예제 2: id가 'dropdown'인 select 요소 선택하기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery .select() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      var dropdown = $("select#dropdown");
      console.log(dropdown);
    });
  </script>
</head>
<body>
  <select id="dropdown">
    <option value="1">항목 1</option>
    <option value="2">항목 2</option>
    <option value="3">항목 3</option>
  </select>
</body>
</html>

설명: 이 예제는 id가 'dropdown'인 select 요소를 선택하여 콘솔에 출력합니다.

예제 3: 특정 속성이 있는 요소 선택하기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery .select() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      var elementsWithHref = $("[href]");
      console.log(elementsWithHref);
    });
  </script>
</head>
<body>
  <a href="#">링크 1</a>
  <a href="#">링크 2</a>
  <div>링크 없는 요소</div>
</body>
</html>

설명: 이 예제는 href 속성을 가진 요소들을 선택하여 콘솔에 출력합니다.

예제 4: 특정 속성값을 가진 요소 선택하기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery .select() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      var elementsWithHref = $("[href='#']");
      console.log(elementsWithHref);
    });
  </script>
</head>
<body>
  <a href="#">링크 1</a>
  <a href="#">링크 2</a>
  <a href="#">링크 3</a>
  <a href="#">링크 4</a>
</body>
</html>

설명: 이 예제는 href 속성값이 '#'인 요소들을 선택하여 콘솔에 출력합니다.

예제 5: 부모 요소의 하위 요소 선택하기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery .select() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      var listItems = $("ul.parent > li");
      console.log(listItems);
    });
  </script>
</head>
<body>
  <ul class="parent">
    <li>항목 1</li>
    <li>항목 2</li>
    <li>항목 3</li>
  </ul>
</body>
</html>

설명: 이 예제는 클래스가 'parent'인 ul 요소의 하위에 있는 li 요소들을 선택하여 콘솔에 출력합니다.

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

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

jQuery의 .trigger() 메소드: 다양한 이벤트 트리거 예제  (0) 2024.04.04
jQuery의 .submit() 메소드 탐구: 포괄적인 가이드  (0) 2024.04.04
jQuery .resize() 메서드: 화면 크기 변화 감지하기  (0) 2024.04.04
jQuery .one() 메서드: 이벤트 핸들러 단 한 번만 실행하기  (0) 2024.04.04
jQuery .on() 메서드: 이벤트 핸들러 등록을 위한 메서드  (0) 2024.04.04
'프로그래밍' Related Articles more