jQuery 선택자(selector)
- jQuery 코드는 선택자와 메소드의 조합으로 구성되는 경우가 많음
- 중간에 자바스크립트 코드 같이 작성
- HTML 태그를 쉽게 선택하기 위해 선택자 사용
선택자 구조
$('선택자').메소드(매개변수, 함수 등)$('span').hide()- 큰 따옴표 / 작은 따옴표 모두 사용 가능
선택자 종류
- 직접 선택자
- 전체 :
$("*")
- 태그 :
$('태그명')
- 아이디 :
$('#id명')
- 클래스 :
$('.클래스명')
- 그룹 선택자
- 인접 관계 선택자
- 필터 선택자
- 속성 선택자
- 컨텐츠 탐색 선택자
직접 선택자 예제
tag-selector
<!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(){
// 태그 선택자
$('h1').css('color','red');
$('h1').css('background','black');
// 메소드 체인 방식
$('h1').css('width','50%').css('height','40px');
});
</script>
</head>
<body>
<h1>Header1</h1>
<h1>Header2</h1>
<h1>Header3</h1>
</body>
</html>
id-selector.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(){
// 태그 선택자
$('#h1').css('color','pink');
$('#h2').css('background','green');
// 메소드 체인 방식
$('h1').css('width','50%').css('height','40px');
});
</script>
</head>
<body>
<h1 id="h1">Header1</h1>
<h1 id="h2">Header2</h1>
<h1>Header3</h1>
</body>
</html>
class-selector.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>
direct-selector.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(){
//1. 전체 선택자 : 문서 전체의 글자색 변경
$("*").css("color", "red");
// 2. 태그 선택자 : h3 태그에 밑줄 그리기
$('h3').css('textDecoration','underline');
//3. 태그 선택자 : h3, h4 태그에 배경색 pink 지정하기
$('h3, h4').css('backgroundColor','pink');
// 4. ID 선택자 : id가 idSelector인 태그의 글자 색상을 blue/#0000ff/#00f
// id가 jQuery인 태그의 글자 색상을 green으로 설정
$("#idSelector").css('color','blue');
$("#jQuery").css('color','green');
// 5. 클래스 선택자 : class가 selector인 태그의 글자를 이탤릭체로,
// class가 web인 태그의 글자를 굵게
$(".selector").css('font-style', 'italic');
$(".web").css('font-weight', 'bold');
});
</script>
</head>
<body>
<h3>jQuery 직접 선택자 (selector)</h3>
<div class="selector">
<ol>
<li>전체 선택자</li>
<li>태그 선택자</li>
<li id="idSelector">ID 선택자 </li>
<li>클래스 선택자</li>
</ol>
</div>
<h4>웹 프로그래밍</h4>
<div class="web">
<ol type="A">
<li>JSP</li>
<li>Javascript</li>
<li id="jQuery">jQuery</li>
<li>Ajax</li>
</ol>
</div>
</body>
</html>