선택자
기본적으로 자바스크립트, 제이쿼리를 하다보면 가장 많이 사용하게 되는 것이 특정 태그를 선택하여 값을 가져오거나 값을 넣는 것을 많이 하게 된다.
특정 태그를 선택할 수 있어야, 해당 태그의 CSS를 변경하거나 특정 노드를 더 추가하는 것도 가능하다.
고정된 HTML을 변경시키면서 사용자가 편리하게 사용할 수 있도록 하는 것이 자바스크립트와 제이쿼리를 많이 사용하는 이유중 하나이기 때문에 가장 잘 알고 있어야 하는 것 중 하나가 선택자를 잘 다루는 것!
전체선택자 : *
- $(function( ) {
$( ' * ' ).css('color','red');
});
태그선택자 : '태그명'
- $( ' h1' ).css('color','red');
클래스선택자 : '.클래스명'
- $( ' .c' ).css('color','red');
- 두가지 클래스를 모두 가지는 태그 선택 $( ' .c.select' ).css('color','red');
아이디선택자 : '#아이디명'
- $( ' #i ' ).css('color','red');
- 특정id 속성을 가지는 태그 선택 : $( 'h1#i ' ).css('color','red);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("h1").css("color","red");
$(".c").css("color","green");
$("#i").css("color","blue");
});
</script>
</head>
<body>
<h1>Web</h1>
<h1 class="c">Java</h1>
<h1 class="c">JavaScript</h1>
<h1 id="i">jQuery</h1>
</body>
</html>
자식선택자 : 부모 > 자식
- $('body > *')
후손 선택자 : 요소A 요소B
- $('body *')
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('#btn-a').click( function() {
$('h1').css('color','black');
$('#a>h1').css('color','red');
});
$('#btn-b').click( function() {
$('h1').css('color','black');
$('#a h1').css('color','pink');
});
});
</script>
</head>
<body>
<div id="a">
<h1>자식 and 후손</h1>
<div>
<h1>후손1</h1>
<h1>후손2</h1>
<h1>후손3</h1>
</div>
<div>
<h1>후손4</h1>
</div>
</div>
<button id="btn-a">a의 자식 중 H1</button>
<button id="btn-b">a의 후손 중 H1</button>
</body>
</html>
반응형
'Java Script > jQuery' 카테고리의 다른 글
| 제이쿼리로 이미지 슬라이더 구현 (0) | 2019.05.14 |
|---|---|
| jQuery 애니메이션 큐 (이벤트 누적 제어) (0) | 2019.05.14 |
| jQuery 이벤트 메소드 (0) | 2019.05.14 |
| jQuery, 제이쿼리 기본 메소드 총정리 (0) | 2019.05.14 |
| jQuery, 제이쿼리가 무엇인가? (0) | 2019.05.11 |
댓글