SeouliteLab

jQuery의 :input 선택자 활용하기 본문

프로그래밍

jQuery의 :input 선택자 활용하기

Seoulite Lab 2024. 4. 12. 08:09

jQuery의 :input 선택자는 모든 입력 요소를 선택하는 데 사용됩니다. 입력 요소에는 <input>, <textarea>, <select>, <button> 등이 포함됩니다. 이 선택자를 활용하여 웹 페이지에서 입력 요소를 선택하고 조작할 수 있습니다.

예제 1: 모든 입력 요소의 값을 변경하기

<!DOCTYPE html>
<html>
<head>
  <title>모든 입력 요소의 값을 변경하기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $(":input").val("기본값");
    });
  </script>
</head>
<body>
  <input type="text">
  <textarea></textarea>
  <select>
    <option>옵션 1</option>
    <option>옵션 2</option>
  </select>
</body>
</html>

설명: 위 예제는 문서 내의 모든 입력 요소의 값을 "기본값"으로 설정합니다.

예제 2: 특정 클래스를 가진 입력 요소 선택하기

<!DOCTYPE html>
<html>
<head>
  <title>특정 클래스를 가진 입력 요소 선택하기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $(".custom-input").css("background-color", "lightblue");
    });
  </script>
  <style>
    .custom-input {
      width: 200px;
      padding: 5px;
    }
  </style>
</head>
<body>
  <input type="text" class="custom-input">
  <textarea class="custom-input"></textarea>
</body>
</html>

설명: 이 예제는 클래스가 "custom-input"인 입력 요소에 배경색을 적용하여 시각적으로 구분합니다.

예제 3: 특정 타입의 입력 요소 선택하기

<!DOCTYPE html>
<html>
<head>
  <title>특정 타입의 입력 요소 선택하기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $(":input[type='checkbox']").prop("checked", true);
    });
  </script>
</head>
<body>
  <input type="checkbox" id="checkbox1"> 체크박스 1<br>
  <input type="checkbox" id="checkbox2"> 체크박스 2<br>
  <input type="text" id="text1" value="텍스트 입력">
</body>
</html>

설명: 이 예제는 타입이 "checkbox"인 입력 요소들을 선택하여 모두 체크합니다.

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

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

jQuery의 :last-child 선택자 활용하기  (0) 2024.04.12
jQuery의 :lang() 선택자 활용하기  (0) 2024.04.12
jQuery의 :image 선택자 활용하기  (0) 2024.04.12
jQuery의 ID 선택자 ("#id") 활용하기  (0) 2024.04.12
jQuery의 :hidden 선택자 활용하기  (0) 2024.04.12
'프로그래밍' Related Articles more