본문 바로가기
Front/jQuery

jQuery - 선택자(컨텐츠 탐색 선택자)

by Hyeon_ 2021. 12. 14.

jQuery 선택자(selector)

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

선택자 종류

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

컨텐츠 탐색 선택자

  • $(‘선택자:contains(‘내용’)); : ‘내용’을 포함하는 요소 선택
  • $(‘선택자:has(‘span’)); : <span>태그를 포함하는 요소 선택
  • 선택한 요소를 변수에 저장
  • 여러 개를 찾은 경우 배열로 저장
  • 형식
var $변수명 = $('선택자');
var 변수명 = document.getElementById('#id'); // 자바 스크립트와 동일
var tds = document.getElementByTagName('td');
  • 주의!!
    • jQuery 선택자를 찾아서 자바스크립트 변수에 저장한 경우에는 jQuery 메소드 사용 가능
    • DOM 선택 방식으로 선택해서 자바스크립트 변수에 저장한 경우에는 jQuery 메소드 사용 불가

컨텐츠 탐색 선택자 예제

select-variable.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
    <script src="jquery-3.6.0.min.js"></script>
    <script type="text/javascript"> 
        $(document).ready(function(){
            $('.group1').css({
                        float: 'left',
                        background:'blue',
                        color:'white',
                        width: '90%',
                        height: '30px'
                });
                $('.group2').css({
                    float: 'right',
                    background:'yellow',
                    color:'black',
                    width: '90%'
                });
        });
    </script>
</head>
<body>
<div id="box1">
    <div class="group1">A</div>
    <div class="group2">A</div>
    <div class="group1">B</div>
    <div class="group2">B</div>
    <div class="group1">C</div>
    <div class="group2">C</div>
</div>
<div id="box2">
    <div class="group1">A</div>
    <div class="group2">A</div>
    <div class="group1">B</div>
    <div class="group2">B</div>
    <div class="group1">C</div>
    <div class="group2">C</div>
</div>
</body>
</html>
  1. jQuery 변수 사용 : $변수명
var $divs = $('div'); // $divs : jQuery 변수
alert($divs.length);
$divs.css('color','red');
  1. 변수명에서 $ 제거하고 사용 -> 자바스크립트 변수(객체)로 사용
    • 선택을 $('div')로 했기 때문에 속성과 jQuery 메소드 사용 가능
var divs2 = $('div');
divs2.css('color', 'pink'); // 적용 됨
  1. 자바스크립트 DOM 선택 방법으로 선택한 경우 -> jQuery 메소드 사용 불가
var box1 = document.getElementById('box1');
box1.css('color', 'red');
[output] box1.css is not a function
var divs = document.getElementsByTagName('div');
alert(divs.length); // DOM 선택 방식으로 선택해도 속성은 사용 가능
divs.css('color', 'red'); // 오류

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

jQuery - 이벤트  (0) 2021.12.14
jQuery - 변수  (0) 2021.12.14
jQuery - 선택자(속성 선택자)  (0) 2021.12.14
jQuery - 선택자(필터 선택자)  (0) 2021.12.14
jQuery - 선택자(인접 관계 선택자)  (0) 2021.12.13