DevSSOM
jQuery 선택자 본문
반응형
제이쿼리 선택자
제이쿼리 선택자는 CSS 선택자와 유사한 구조를 가지고 있음.
- $("태그이름")
- $("#아이디 속성값")
- $(".클래스 속성값")
- CSS 선택자
h1 // 태그에 접근할 때
#title // id에 접근할 때
.article // class에 접근할 때- jQuery 선택자
$("h1") // 태그에 접근할 때
$("#title") // id에 접근할 때
$(".article") // class에 접근할 때
만약, 디자인을 입히고 싶다. 즉, CSS와 관련된 기능을 사용하고 싶다고 한다면, jQuery에서 제공하는 css메소드를 활용하면 됨.
디자인은 .css('css 속성', 'css 속성값') 형태로 입력.
$("h1").css("color", "blue");
연습문제
function을 사용하여 공간을 만들고, h1 태그의 배경색은 초록색으로 설정, #background-blue 아이디의 배경색은 파란색으로 설정, .background-red 클래스의 배경색은 빨간색으로 설정한다면?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>제이쿼리 기초</title>
</head>
<body>
<h1>Tag Selector</h1>
<h2 id="background-blue">ID Selector</h2>
<h3 class="background-red">Class Selector</h3>
<script src="jquery-3.3.1.js"></script>
<script src="index.js"></script>
</body>
</html>>>>
$(function() {
$("h1").css("background-color", "green");
$("#background-blue").css("background-color", "blue");
$(".background-red").css("background-color", "red");
});
728x90
반응형
'JavaScript > jQuery' 카테고리의 다른 글
| jQuery 이벤트 - Fade 이벤트 (0) | 2021.07.18 |
|---|---|
| jQuery 이벤트 - Hide, Show, Toggle 이벤트 (0) | 2021.07.17 |
| jQuery 이벤트 - Mouse 이벤트 (0) | 2021.07.15 |
| jQuery 왜 쓸까? (0) | 2021.07.14 |
| jQuery - this (0) | 2021.07.11 |
'JavaScript/jQuery' 관련 글
more
댓글