JAVASCRIPT
Javascript Jquery Selector 자바스크립트 제이쿼리 선택자 1
devorldist
2022. 5. 8. 20:57
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