- [jquery13] :nth-child()
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery13.html</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style>
/* :nth-child() => n번째 자손
: 특정 순서에 있는 요소를 선택할 때 사용하는 선택자 */
/* test라는 클래스의 n번째 자손 */
.test:nth-child(3){
color:blue;
}
td:nth-child(2){
background-color: red;
}
</style>
<script>
$(function(){
// 버튼을 클릭하면..
$("#btn1").on("click", function(){
console.log("jquery test");
$("td").addClass("test"); // table에 class 준 것과 똑같은 효과
})
// 방금 전에 추가한 클래스 제거
$("#btn2").on("click", function(){
$("table").removeClass("test");
})
})
</script>
</head>
<body>
<!-- table>(tr>td{$}*5)*3 -->
<input type="button" value="test 클래스를 부여하기" id="btn1">
<input type="button" value="test 클래스를 제거하기" id="btn2">
<table class="tbl">
<!-- table에 두 개의 클래스를 줄 수 있음 -->
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
</body>
</html>
|
cs |
- [jquery14] > gt < lt = eq
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery14.html</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style>
table{
table-layout: auto;
width: 75%;
}
td{
color: blue;
font-weight: bold;
}
</style>
<script>
$(function(){
// 첫번째 버튼을 누르면 모든 행의 배경색으로 pink 지정
$("#btn1").on("click", function(){
// console.log("test");
$("tr").css("background", "pink");
})
// 두번째 버튼을 누르면 0번째 행의 배경색으로 pink 지정
$("#btn2").on("click", function(){
// console.log("test");
$("tr:eq(0)").css("background", "pink");
})
// 세번째 버튼을 누르면 0, 1, 2, 3 번째 행의 배경색으로 red를 지정
$("#btn3").on("click", function(){
// console.log("btn2 test");
$("tr:lt(3)").css("background", "red");
// > gt < lt = eq
})
// 네번째 버튼을 누르면 3, 4번째 행의 배경색으로 green을 지정
$("#btn4").on("click", function(){
// console.log("green");
$("tr:gt(2)").css("background", "green");
})
})
</script>
</head>
<body>
<!-- input:button#btn$[value='버튼$']*4 -->
<input type="button" value="버튼1" id="btn1">
<input type="button" value="버튼2" id="btn2">
<input type="button" value="버튼3" id="btn3">
<input type="button" value="버튼4" id="btn4">
<!-- table>(tr.testClass>td)*5 -->
<table>
<tr class="testClass">
<td>one</td>
</tr>
<tr class="testClass">
<td>two</td>
</tr>
<tr class="testClass">
<td>three</td>
</tr>
<tr class="testClass">
<td>four</td>
</tr>
<tr class="testClass">
<td>five</td>
</tr>
</table>
</body>
</html>
|
cs |
- [jquery15] jquery 정리
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery15.html</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style>
.myStyle{
/* 너비 300 높이 200 글자색 skyblue 배경 red */
width: 300px;
height: 200px;
color: skyblue;
background-color: red;
}
</style>
<script>
// 1번 버튼을 누르면 box1의 글자색 red
// 배경을 초록색 너비 200px 높이 200px
// 1. css() 체인, 2. JSON 타입
$(function(){
// 1. css() 체인
$("#btn1").on("click", function(){
// // console.log("test");
// $("#box1").css("background", "green")
// .css("color", "red")
// .css("width", "200px")
// .css("height", "200px");
// 2. JSON 타입
$("#box1").css({
"background" : "green",
"color" : "red",
"width" : "200px",
"height" : "200px"
})
}) // btn1 end
// 2번 버튼 : 사용자에게 어떤 색을 쓸 것인지 물어본 후
// box1의 배경색으로 사용
// prompt("배경색....")
$("#btn2").on("click", function(){
// console.log("test");
var bgColor = prompt("원하는 배경색을 입력하세요 : ");
// console.log(bgColor);
$("#box1").css("background", bgColor);
})
// 3번 버튼 : box1의 너비를 알아와서 경고창에 알려주기
$("#btn3").on("click", function(){
console.log($("#box1").css("width"));
alert("box1의 너비는"+$("#box1").css("width")+"입니다.");
})
// 4번 버튼 : box1의 myStyle 클래스 부여하기
$("#btn4").on("click", function(){
// console.log("클래스 부여");
$("#box1").addClass("myStyle");
})
// 5번 버튼 : box1의 myStyle 클래스 부여하기
$("#btn5").on("click", function(){
// console.log("클래스 부여");
$("#box1").removeClass("myStyle");
})
// 6번 버튼 : 사진 감추기 (3초동안 천천히)
$("#btn6").on("click", function(){
// console.log("감추기");
$("img").hide(3000);
})
// 7번 버튼 : 사진 보이게 (3초동안 천천히)
$("#btn7").on("click", function(){
// console.log("감추기");
$("img").show(3000);
})
}) // function end
</script>
</head>
<body>
<!-- input:button#btn$[value=btn$]*7 -->
<input type="button" value="btn1" id="btn1">
<input type="button" value="btn2" id="btn2">
<input type="button" value="btn3" id="btn3">
<input type="button" value="btn4" id="btn4">
<input type="button" value="btn5" id="btn5">
<input type="button" value="btn6" id="btn6">
<input type="button" value="btn7" id="btn7">
<!-- div#box1{메롱} -->
<div id="box1">메롱</div>
<div><img src="https://steamuserimages-a.akamaihd.net/ugc/912416928329610988/900B2016664705252F80B97D6BADCBCD41767934/?imw=5000&imh=5000&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=false" alt=""></div>
</body>
</html>
|
cs |
- [jquery16] 체크박스
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery16.html</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style>
/* body의 직계 후손인 div 중의 n번째 자손의 span 태그 */
/* body > div:nth-child(1) > span {
background-color: green;
} */
/* input과 형제 관계인 span */
/* input+span {
color:red;
} */
/* 체크한 항목의 span 색을 blue */
/* input:checked+span{
color:blue;
} */
/* 체크 안한 항목의 span 색을 yellowgreen */
/* input:not(:checked)+span{
color:yellowgreen;
} */
/* input:not(:checked)+span{
background:red;
} */
</style>
<script>
$(function(){
$("#btn1").on("click", function(){
$("input:not(:checked)+span").css("background", "red");
})
}) // function end
</script>
</head>
<body>
<div>
<!-- input과 span은 div라는 부모 아래 형제 관계 -->
<input type="checkbox" name="fruit" id="" checked="checked">
<!-- checked="checked" => 처음부터 체크된 상태 -->
<span>오렌지</span>
</div>
<div>
<input type="checkbox" name="fruit" id="">
<span>바나나</span>
</div>
<div>
<input type="checkbox" name="fruit" id="">
<span>사과</span>
</div>
<span>오늘은 수요일</span>
<br>
<!-- 버튼을 클릭하면 체크 안한 항목의
span 배경색을 red로 변경 -->
<input type="button" value="검사" id="btn1">
</body>
</html>
|
cs |
- [jquery17] 뉴스 기사
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery17.html</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
// 배열 news
var news = [
"1. 대졸자 100% 취업",
"2. 신입사원 어느 회사를 골라 갈지 고민중",
"3. 5시 칼퇴근법",
"4. 주 4일 근무 법제화"
]
$(function(){
// input에서 value의 값이 뉴스보기인 애들...
$("input[value='뉴스보기']").on("click", startNews);
$("input[value='뉴스중지']").on("click", stopNews);
})
function stopNews(){
window.clearInterval(timer); // timer 제거 가능
}
var timer;
function startNews(){
// console.log("뉴스보기");
// 1초에 한번씩 showNews라는 함수를 호출
timer = window.setInterval(showNews, 1000);
console.log(timer);
}
var idx = 0;
function showNews(){
$("#topNews").html("<h2>"+news[idx++]+"</h2>")
// 배열의 범위 초과 방지
if(idx == news.length) idx = 0;
}
</script>
</head>
<body>
<!-- div#topNews+input:button[value='뉴스보기']+input:button[value='뉴스중지'] -->
<div id="topNews"></div>
<input type="button" value="뉴스보기">
<input type="button" value="뉴스중지">
</body>
</html>
|
cs |
- [jquery18] 영화 리스트
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery18.html</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style>
img{
width: 350px;
height: 350px;
}
</style>
<script>
var movieList = [
"스즈메의 문단속",
"던전앤드래곤",
"슬램덩크",
"웅남이",
"리바운드",
"소울메이트",
"오토라는 남자",
"파벨만스",
"라이스보이슬립스",
"에브리씽에브리웨어올앳원스"
]
var postList = [
"../images/movie_image1.jpg",
"../images/movie_image2.jpg",
"../images/movie_image3.jpg",
"../images/movie_image4.jpg",
"../images/movie_image5.jpg",
"../images/movie_image6.jpg",
"../images/movie_image7.jpg",
"../images/movie_image8.jpg",
"../images/movie_image9.jpg",
"../images/movie_image10.jpg"
]
// 상영영화보기 버튼을 누르면 div topNews1에 영화목록 출력
// 영화 10편
$(function(){
$("input[value='상영영화보기']").on("click", startMovieList);
$("input[value='상영영화중지']").on("click", stopMovieList);
})
var timer = 0;
function startMovieList(){
timer = window.setInterval(showMovieList,2000);
}
function stopMovieList(){
window.clearInterval(timer);
}
var idx = 0; // 배열 출력을 위한 변수
function showMovieList(){
$("#topNews1").html("<h2>"+movieList[idx]+"</h2>");
$("img").attr("src", postList[idx++]) // attr:속성 변경
.attr("alt", movieList[idx])
if(idx == movieList.length) idx = 0;
}
</script>
</head>
<body>
<!-- div#topNews1+div#topNews2+img
+input:button[value="상영영화보기"]
+input:button[value="상영영화중지"] -->
<div id="topNews1"></div>
<div id="topNews2"></div>
<img src="https://static.vecteezy.com/system/resources/previews/005/502/524/original/cinema-background-concept-movie-theater-object-on-red-curtain-background-and-movie-time-with-electric-bulbs-frame-illustration-free-vector.jpg" alt="">
<br><br>
<input type="button" value="상영영화보기">
<input type="button" value="상영영화중지">
</body>
</html>
|
cs |
- [jquery19] 마시마로
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery19.html</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style>
</style>
<script>
var counter = 0;
var pos = 0;
$(function(){
$("#btn1").on("click", movieImage);
})
function movieImage(){
// 함수가 호출될 때마다 이미지의 marginLeft를 점점 증가
pos += 10;
$("img").css("marginLeft", pos + "px")
counter++;
if(counter %2 == 1){
// attr : 속성값을 지정해주는 함수
$("img").attr("src", "../images/rabbit2.png");
}else{
$("img").attr("src", "../images/rabbit1.png");
}
}
</script>
</head>
<body>
<!-- 버튼을 클릭하면 토끼 이미지 교체해서 출력 -->
<input type="button" value="btn1" id="btn1">
<div id="box1">토끼이미지</div>
<div><img src="../images/rabbit1.png" id="img1" alt=""></div>
</body>
</html>
|
cs |
- [jquery20] 영화 정보
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery20.html</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style>
#content{
width: 10000px;
height: 600px;
background: rgb(242, 207, 213);
padding-left: 20px;
padding-right: 20px;
}
#movie{
width: 200px;
height: 300px;
border: 1px solid rgb(250, 154, 170);
position: absolute;
left: 50px;
top: 180px;
padding: 30px;
background: #ffffff;
}
img{
width: 180px;
height: 280px;
}
</style>
<script>
function hidediv() {
$("#movie").hide();
}
function showdiv(){
$("#movie").show();
}
</script>
</head>
<body>
<div id="movie">
<!-- "javascript:hidediv()" => 자바스크립트의 hidediv() 함수 실행 -->
<div><a href="javascript:hidediv()">닫기</a></div>
<img src="../images/movie_image1.jpg" alt="">
</div>
<div id="content">
<p>저희 영화관은 멀티플렉스 극장이지만 사실 1개의 영화만 상영합니다.</p>
<a href="javascript:showdiv()">영화정보보기</a>
</div>
</body>
</html>
|
cs |
- [jquery21] 여러 버튼... 함수 활용
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery21.html</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style>
</style>
<script>
$(function(){
// 1번 버튼을 누르면 이미지가 숨기기 0.3초
$("#btn1").on("click", function(){
$("img").hide(300);
})
// 2번 버튼을 누르면 이미지가 나타나기 0.3초
$("#btn2").on("click", function(){
$("img").show(300);
})
// 3번 버튼을 누르면 이미지 토글 0.3초
$("#btn3").on("click", function(){
$("img").toggle(300);
})
// 4번 버튼을 누르면 페이드인
$("#btn4").on("click", function(){
$("img").fadeIn({
duration: 3000,
complete: function(){
alert("이미지가 나타남~~");
}
});
})
// 5번 버튼을 누르면 페이드아웃
$("#btn5").on("click", function(){
$("img").fadeOut(2000, function(){
alert("뿅!");
});
})
// 6번 버튼을 클릭하면 Hello World 출력
// p 태그에 Hello world 출력
$("#btn6").on("click", function(){
$("#p1").text("Hello world")
.css("background", "pink")
.addClass("txt")
// 뒤에 자식으로 추가
.appendTo(".wrapper"); // p1이 div wrapper의 뒤에 붙도록
})
// 7번 버튼을 클릭하면
// 1. 토끼가 오른쪽으로 이동 200px
// 2. 3초동안 페이드 아웃
// 3. 구글 사이트로 이동
$("#btn7").on("click", function(){
$("img").css("marginLeft", "200px")
.fadeOut(3000, function(){
location.href = "http://google.com";
});
})
}) // function end
</script>
</head>
<body>
<!-- input:button#btn$*7 -->
<input type="button" value="숨기기" id="btn1">
<input type="button" value="나타나기" id="btn2">
<input type="button" value="토글" id="btn3">
<input type="button" value="FadeIn" id="btn4">
<input type="button" value="FadeOut" id="btn5">
<input type="button" value="메세지출력" id="btn6">
<input type="button" value="토끼이동후사이트전환" id="btn7">
<!-- div.wrapper>p{test} -->
<div class="wrapper">
<p>test</p>
</div>
<div><img src="../images/rabbit1.png" alt=""></div>
<p id="p1"></p>
</body>
</html>
|
cs |
'HTML' 카테고리의 다른 글
| [jQuery] jQuery란? + 응용 (1) | 2023.04.23 |
|---|---|
| [javascript] 닌자 고양이 게임 (0) | 2023.04.23 |
| [javascript] 우주선 게임 (0) | 2023.04.18 |
| [javascript] 마시마로 잡기 게임 (0) | 2023.04.16 |
| [HTML] javascript (3) - (로또 / innerText & innerHTML / 배열 / 객체 / 속성(property) + function(함수) / 익명함수) (0) | 2023.04.16 |