javascript에서 window.onload를 포스팅하면서 DOM선택자에 대해 간략하게 알아보았었습니다.
이번 글에서는 jQuery의 선택자 중 id와 class에 대해 알아보겠습니다.
간략하게 선택자에 대해 설명하자면, css 셀렉터를 이용하는 것으로 태그명을 기준으로 id, class 등 설정 가능합니다.
먼저 style에 class를 미리 설정을 해놓습니다.
<style>
.backg-gray { background-color: gray; }
.backg-orange { background-color: orange; }
.backg-blue { background-color: blue; }
</style>
그 다음 script로 넘어가서 jquery를 시작합니다.
<script>
$(function(){
});
</script>
1. 태그에 클래스 추가
<script>
$(function(){
$("p").addClass("backg-gray");
});
</script>
<body>
<p>햄버거 치킨 피자 콜라 사이다</p>
</body>출력결과↓
배경색을 회색으로 설정한 값이 p태그에 적용되어 출력되었습니다.
2. 클래스에 해당 클래스명을 가진 요소를 선택하여 출력
<script>
$(function(){
$(".jq").addClass("backg-orange");
});
</script>
<body>
<p class="jq">햄버거 치킨 피자 콜라 사이다</p>
</body>출력결과↓
본문을 살펴보면, $(".jq") 라는 내용이 보일텐데, 클래스에는 앞에 점(.)이 붙어야합니다.
3. id에 해당 클래스명을 가진 요소를 선택하여 출력
<script>
$(function(){
$("#id").addClass("backg-blue");
});
</script>
<body>
<p id="id">햄버거 치킨 피자 콜라 사이다</p>
</body>출력결과↓
본문의 내용중에 $("#id") 라는 내용을 볼 수 있는데, id를 설정할때 꼭 샾(#)을 붙여줘야합니다.
'코딩 > jQuery' 카테고리의 다른 글
| jQuery fadeIn, fadeOut, fadeToggle (0) | 2020.07.01 |
|---|---|
| jQuery setInterval, clearInterval (0) | 2020.06.30 |
| JavaScript 실행순서 (0) | 2020.06.30 |
| jQuery hover() (0) | 2020.06.29 |
| jQuery this란? (0) | 2020.06.27 |
최근댓글