jQeury
제이쿼리와 자바스크립트의 차이 / 바닐라 자바스크립트란?
- -
최고의 자바스크립트 라이브러리(library) - 제이쿼리(jQuery)
자바스크립트를 필요한 만큼만 효율적으로 사용하기 위한 것
> 자바스크립트의 쉬운 버전
프레임웍크(framework)
바닐라 자바스크립트(vanila JavaScript)란?
> 순수 자바스크립트
- jQuery 같은 라이브러리를 사용하지 않고 순수하게 자바스크립트만 사용하는 것
취업 후 프론트엔드 개발을 위해 Vue.js 공부하면 좋음
Vue.js -> framework 스타일
아래와 같은 동일한 결과물을 javaScript로도, jQuery로도 구현할 수 있다.
보면 알겠지만 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
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>클래스제어-자바스크립트</title>
<style>
#greeting,
.btns {
text-align: center;
}
#greeting {
background: #eee;
color: crimson;
padding: 20px;
}
#greeting.active {
background: crimson;
color: #eee;
}
</style>
</head>
<body>
<div class="frame">
<h1 id="greeting">
Good to see you! I'm Mingeee
</h1>
</div>
<div class="btns">
<button id="btn1" onclick="addClass()">클래스 추가하기</button>
<button id="btn2" onclick="removeClass()">클래스 제거하기</button>
<button id="btn3" onclick="toggleClass()">클래스 토글하기</button>
<button id="btn4">요소 내에 텍스트 변경하기</button>
</div>
<script>
var greetingE1 = document.getElementById('greeting');
function addClass() {
greetingE1.classList.add('active')
}
function removeClass() {
greetingE1.classList.remove('active')
}
function toggleClass() {
greetingE1.classList.toggle('active')
}
var btnChange = document.getElementById('btn4');
btnChange.addEventListener('click', function () {
greetingE1.innerHTML = 'You clicked the toggle button'
})
</script>
</body>
</html>
|
cs |
제이쿼리 버전
|
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="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>클래스제어-자바스크립트</title>
<script src="jquery-3.5.1.min.js"></script>
<style>
#greeting,
.btns {
text-align: center;
}
#greeting {
background: #eee;
color: crimson;
padding: 20px;
}
#greeting.active {
background: crimson;
color: #eee;
}
</style>
</head>
<body>
<div class="frame">
<h1 id="greeting">
Good to see you! I'm Mingeee
</h1>
</div>
<div class="btns">
<button id="btn1">클래스 추가하기</button>
<button id="btn2">클래스 제거하기</button>
<button id="btn3">클래스 토글하기</button>
<button id="btn4">요소 내에 텍스트 변경하기</button>
</div>
<script>
$('#btn1').click(function () {
$('#greeting').addClass('active')
})
$('#btn2').click(function () {
$('#greeting').removeClass('active')
})
$('#btn3').click(function () {
$('#greeting').toggleClass('active')
})
$('#btn4').click(function () {
$('#greeting').text('You clicked the toggle button')
})
</script>
</body>
</html>
|
cs |
'jQeury' 카테고리의 다른 글
| BX Slider (0) | 2022.08.29 |
|---|---|
| Slick Slider[다운로드 파일 / 옵션 조정 방법] (0) | 2022.08.29 |
| Method Basic (0) | 2022.05.13 |
| 함수 - click / mouseenter-mouseleave (0) | 2022.05.12 |
| jQuery 기본 구문 만들기 (0) | 2022.05.12 |
Contents
소중한 공감 감사합니다