728x90
반응형
SMALL
# 제이쿼리 선택자 기본
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>Document</title>
<script>
$(function(){
$("#title").css("color", "red");
});
</script>
</head>
<body>
<h1 id="title">제목</h1>
</body>
</html>
# 전체 선택자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
$(function() {
$("*").css("border", "1px solid blue");
});
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2>선택자</h2>
<h3>직접 선택자</h3>
</body>
</html>
# 아이디 선택자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
$(function() {
$("#hi").css("background-color", "#ff0")
.css("border", "2px solid #f00");
});
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2 id="hi">선택자</h2>
<h3>직접 선택자</h3>
</body>
</html>
# 클래스 선택자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
$(function() {
$(".hi").css("background-color", "#ff0")
.css("border", "2px dashed #f00");
});
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2 class="hi">선택자</h2>
<h3>직접 선택자</h3>
</body>
</html>
# 요소명 선택자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
$(function() {
$("h2").css("background-color", "#0ff")
.css("border", "2px dashed #f00");
});
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2>선택자</h2>
<h3>직접 선택자</h3>
</body>
</html>
# 그룹 선택자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
$(function() {
$("#hello, h1").css("background-color", "yellow")
.css("border", "2px dashed red");
});
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2>선택자</h2>
<h3 id="hello">인접 선택자</h3>
<h3>직접 선택자</h3>
</body>
</html>
728x90
반응형
LIST
'JAVASCRIPT' 카테고리의 다른 글
| Javascript Jquery Selector 제이쿼리 탐색 선택자 (0) | 2022.05.10 |
|---|---|
| Javascript Jquery Selector 자바스크립트 제이쿼리 선택자 2 (0) | 2022.05.09 |
| Javascript Function 자바스크립트 함수 (0) | 2022.05.08 |
| Javascript Browser Object Model 자바스크립트 브라우저 객체 모델 (0) | 2022.05.08 |
| Javascript Built in Object - String Object, 자바스크립트 내장객체 - 문자열객체 (0) | 2022.05.07 |