[jQuery] 제이쿼리 선택자

제이쿼리 선택자를 이용하면 특정 조건을 만족하는 html 코드를 보다 쉽게 가져올 수 있습니다.

id, class, 속성 값을 통해 가져오는 방법에 대해 알아보도록 하겠습니다.

제이쿼리를 사용했을 때와 사용하지 않았을 때를 비교하면서 진행하도록 하죠.

 

1.id 선택자

<div id="a">
    a
</div>
<script>
    console.log(document.getElementById('a').textContent);
    console.log(document.querySelector('#a').textContent);
    console.log($('#a').text());
</script>

스크립트 태그 안에 있는 첫 번째, 두 번째 줄은 딱 봐도 길죠.

제이쿼리를 사용하면 세 번째 줄과 같이 아주 간단하게 구현할 수 있습니다.

$(#id명)을 통해 아주 쉽게 할 수 있죠.

 

 

2.class 선택자

<div class="a">
    a
</div>
<script>
    document.getElementsByClassName('a')
    document.querySelector('.a')
    $('.a').text()
</script>

class 역시 매우 쉽게 구현할 수 있습니다.

$(. 클래스명)을 사용하면 되죠.

 

3. 속성 선택자

document.querySelector("[value = 'a']")
$("[value = 'a']")

[] 안에 어떤 속성을 갖고 있는 값도 찾을 수 있습니다.

 

감사합니다.