본문 바로가기
Front/jQuery

jQuery - 선택자(속성 선택자)

by Hyeon_ 2021. 12. 14.

jQuery 선택자(selector)

  • jQuery 코드는 선택자와 메소드의 조합으로 구성되는 경우가 많음
  • 중간에 자바스크립트 코드 같이 작성
  • HTML 태그를 쉽게 선택하기 위해 선택자 사용

선택자 종류

  • 직접 선택자
  • 인접 관계 선택자
  • 필터 선택자
  • 속성 선택자
  • 컨텐츠 탐색 선택자

속성 선택자

  • HTML 태그(요소)의 지정된 속성 값에 따라 선택자로 정의

속성 선택자 문법

  • 태그명[속성] : []만의 속성을 포함하는 모든 태그 선택
  • 태그명[속성="값"] : 속성 값이 주어진 값과 동일한 모든 태그 선택
  • 태그명[속성 ^= "깂"] : 속성 값이 주어진 값으로 시작하는 모든 태그 선택
  • 태그명[속성 $= "값"] : 속성 값이 주어진 값으로 끝나는 모든 태그 선택
  • 태그명[속성 *= "값"] : 속성 값이 주어진 값을 포함하는 모든 태그 선택

속성 선택자 예제

attrSelector.html
  1. input type 선택
  2. text type 선택
  3. 속성 type 중 submit, reset 버튼 선택
    • $(':submit, :reset').css('background', "gold");의 형식으로 축약 가능
  4. type 중 password 선택
  5. option 태그 선택
  6. option 태그의 value 속성이 '웹'으로 시작하는 요소 선택
  7. select 태그의 하위(자손) option 태그의 value 속성이 '사'로 끝나는 요소 선택
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>속성 선택자</title>   
       <script src= "jquery-3.6.0.min.js"></script>
        <script type="text/javascript">  
      $(document).ready(function(){
          // 1. input type 선택
          $('input[type]').css('background', 'pink');

          // 2. text type 선택
          $('input[type=text]').css({'color':'blue', 'width':'200px'});

          // 3. 속성 type 중 submit, reset 버트느 선택
          // $('input[type=submit]', 'input[type=reset]')
          // 축약형
          $(':submit, :reset').css('background', "gold");

          // 4. type 중 password 선택
          $(':password').css({'background':'green', 'color':'red'}).css('width', '200px');

          // 5. option 태그 선택
          $('option[value=프로그래머]').css('color','red');

          // 6. option 태그의 value 속성이 '웹'으로 시작하는 요소 선택
          $('option[value^=웹]').css('color','blue');

          // 7. select 태그의 하위(자손) option 태그의 value 속성이 '사'로 끝나는 요소 선택
          $('option[value$=사]').css('color','green');

      });
        </script>  
    </head>
    <body>
      <h1>속성 선택자</h1>
      <form id="form1" method="post" action="ok.jsp">
          <table>
            <tr><td>이름</td><td><input type="text" id="name" value="홍길동"></td></tr>
            <tr><td> ID</td><td><input type="text" id="id"></td></tr>
            <tr><td>비밀번호</td><td><input type="password" id="passwd"></td></tr>
            <tr><td>취미 :</td>
                  <td><input type="checkbox"  id="sports" value="운동">운동
                         <input type="checkbox"  id="fishing" value="낚시">낚시
                         <input type="checkbox"  id="swimming" value="수영">수영</td></tr>
            <tr><td>직업</td>
                  <td><select id="job">
                               <option value="학생">학생</option>
                               <option value="프로그래머">프로그래머</option>
                               <option value="웹디자이너">웹디자이너</option>
                               <option value="회계사">회계사</option>
                               <option value="의사">의사</option>    
                          </select></td></tr>
             <tr>
                <td colspan="2" align="center">
                    <input type="submit" value="완료">
                    <input type="reset" value="취소">
                </td>
            </tr>             
        </table>
      </form>        
    </body>
</html>
저작자표시 비영리 동일조건 (새창열림)

'Front > jQuery' 카테고리의 다른 글

jQuery - 변수  (0) 2021.12.14
jQuery - 선택자(컨텐츠 탐색 선택자)  (0) 2021.12.14
jQuery - 선택자(필터 선택자)  (0) 2021.12.14
jQuery - 선택자(인접 관계 선택자)  (0) 2021.12.13
jQuery - 선택자(직접 선택자)  (0) 2021.12.13

관련글

티스토리툴바