728x90
제이쿼리 선택자를 이용하면 특정 조건을 만족하는 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']")
[] 안에 어떤 속성을 갖고 있는 값도 찾을 수 있습니다.
감사합니다.
728x90
'기타 > jQuery' 카테고리의 다른 글
[jQuery] 제이쿼리 $ 의미 (0) | 2021.02.04 |
---|---|
[jQuery] 제이쿼리 선택자 여소 여러개 선택하기 (0) | 2021.02.03 |
[jQuery] 제이쿼리 each 함수 (0) | 2021.02.02 |
[jQuery] 제이쿼리 요소 삭제(remove, empty) (0) | 2021.02.02 |
[jQuery] 제이쿼리 append, prepend 사용해 요소 추가하기 (0) | 2021.02.01 |