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>
- jQuery 변수 사용 : $변수명
var $divs = $('div'); // $divs : jQuery 변수
alert($divs.length);
$divs.css('color','red');
- 변수명에서 $ 제거하고 사용 -> 자바스크립트 변수(객체)로 사용
- 선택을
$('div')로 했기 때문에 속성과 jQuery 메소드 사용 가능
var divs2 = $('div');
divs2.css('color', 'pink'); // 적용 됨
- 자바스크립트 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'); // 오류