SeouliteLab

jQuery의 속성 선택자 [name] 활용하기 본문

프로그래밍

jQuery의 속성 선택자 [name] 활용하기

Seoulite Lab 2024. 4. 12. 08:04

jQuery의 속성 선택자 [name]은 특정 속성을 가진 요소를 선택하는 데 사용됩니다. 이를 활용하여 문서 객체 중에서 특정 속성을 가진 요소를 선택하고 조작할 수 있습니다.

예제 1: name 속성이 있는 <input> 요소 스타일 변경하기

<!DOCTYPE html>
<html>
<head>
  <title>name 속성이 있는 \<input> 요소 스타일 변경하기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("[name]").css("border", "2px solid blue");
    });
  </script>
</head>
<body>
  <input type="text" name="username" placeholder="사용자 이름">
  <input type="email" name="email" placeholder="이메일">
  <input type="password" placeholder="비밀번호">
</body>
</html>

설명: 위 예제는 name 속성을 가진 모든 <input> 요소의 테두리를 파란색으로 변경합니다.

예제 2: name 속성이 있는 <select> 요소 선택하여 옵션 추가하기

<!DOCTYPE html>
<html>
<head>
  <title>name 속성이 있는 \<select> 요소 선택하여 옵션 추가하기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("[name='country']").append("<option value='usa'>미국</option>");
    });
  </script>
</head>
<body>
  <select name="country">
    <option value="kr">한국</option>
    <option value="jp">일본</option>
  </select>
</body>
</html>

설명: 이 예제는 name 속성이 "country"인 <select> 요소에 새로운 옵션을 추가합니다.

예제 3: name 속성이 있는 <input> 요소의 값 변경하기

<!DOCTYPE html>
<html>
<head>
  <title>name 속성이 있는 \<input> 요소의 값 변경하기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("[name='email']").val("example@example.com");
    });
  </script>
</head>
<body>
  <input type="text" name="username" placeholder="사용자 이름">
  <input type="email" name="email" placeholder="이메일">
</body>
</html>

설명: 이 예제는 name 속성이 "email"인 <input> 요소의 값을 "example@example.com"으로 변경합니다.

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

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

jQuery의 :header 선택자 활용하기  (0) 2024.04.12
jQuery의 :has() 선택자 활용하기  (0) 2024.04.12
jQuery의 :gt() 선택자 활용하기  (0) 2024.04.12
jQuery의 :focus 선택자 활용하기  (0) 2024.04.12
jQuery의 :first 선택자 활용하기  (0) 2024.04.12
'프로그래밍' Related Articles more