jQuery - 속성 선택자

jQuery 선택자

• jQuery 코드는 선택자와 메소드의 조합으로 구성되는 경우가 많음
• 중간에 자바스크립트 코드 같이 작성
• HTML 태그를 쉽게 선택하기 위해 선택자 사용
• 선택자 구조
  • $(‘선택자’).메소드(매개변수, 함수 등)
  • $(‘span’).hide();
  • 큰 따옴표 / 작은 따옴표 다 사용 가능
• 선택자 종류
  • 직접 선택자
    • 전체 : $("*")
    • 태그 : $("태그명")
    • 아이디 : $("#id 명")
    • 클래스 : $(".class 명")
    • 그룹 선택자
  • 인접 관계 선택자
    • 상위 요소(조상/부모) 선택자
    • 하위 요소 (자식/자손) 선택자
    • 형제 선택자
  • 필터 선택자
  • 속성 선택자
  • 컨텐츠 탐색 선택자

속성 선택자

• HTML 태그(요소)의 지정된 속성 값에 따라 선택자로 정의
• 문법
  • 태그명[속성] : []안의 속성을 포함하는 모든 태그 선택
  • 태그명[속성="값"] : 속성 값이 주어진 값과 동일한 모든 태그 선택
  • 태그명[속성^="값"] : 속성 값이 주어진 값으로 시작하는 모든 태그 선택
  • 태그명[속성$="깂"] : 속성 값이 주어진 값으로 끝나는 모든 태그 선택
  • 태그명[속성*="값"] : 속성 값이 주어진 값을 포함하는 모든 태그 선택
• attrbSelector.html

    <script src="jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
       $(document).ready(function() {
         // 속성 type 선택
            $('input[type]').css('backgroundColor', 'pink');
            // 속성 type중 text인 것만 선택
            $('input[type=text]').css({'color':'blue', 'width':'200px'});
            // submit과 reset 버튼 선택
            // $('input[type=submit], input[type=reset]')
            // 축약형
            $(':submit, :reset').css('backgroundColor', 'gold');
            // password 선택
            // 축약형, 메소드체인 방식
            $(':password').css({'backgroundColor':'green', 'color':'red'}).css('width', '200px');
            // option 태그 선택
            $('option[value=프로그래머').css('color', 'red');
            // option 태그의 value 속성이 '웹'으로 시작하는 요소 선택
            $('option[value^=웹').css('color', 'blue');
            // option 태그의 value 속성이 '사'로 끝나는 요소 선택
            $('option[value$=사').css('color', 'green');
       });
    </script>