HTML 태그를 객체화 시켜서 연관관계를 끌어올림
주소를 이용해 라이브러리를 땡겨 쓸 수 있음
배포를 고려한다면 cdn 이 아닌 파일을 다운받아 함께 배포
<!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>
<!-- jquery 사용 cdn -->
<script src="<https://code.jquery.com/jquery-2.2.4.js>" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
crossorigin="anonymous"></script>
</head>
<body>
</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 src="<https://code.jquery.com/jquery-2.2.4.js>" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
crossorigin="anonymous"></script>
</head>
<body>
<h1 id='title'>제목</h1>
<script>
// JS
let h1Tag1 = document.getElementById('title');
h1Tag1.style.color = 'red';
// JQuery
let h1Tag2 = $('#title'); // JQuery() -> $()
h1Tag2.css('color', 'blue');
</script>
</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 src="<https://code.jquery.com/jquery-2.2.4.js>" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
crossorigin="anonymous"></script>
</head>
<body>
<script>
// 모든 자원의 로딩을 기다리기 때문에 딜레이가 걸릴 수 있음
window.onload = function () { }
// JS
// DOMContentLoaded -> HTML 을 모두 로딩하고나서 function 수행
document.addEventListener('DOMContentLoaded', function () {
console.log('aa1')
let tag = document.getElementById('title');
tag.innerHTML = '테스트';
});
// JQuery
// $(document).ready() -> HTML 을 모두 로딩하고나서 function 수행
$(document).ready(function () {
// JQuery 선택자 = CSS 선택자 (#, ., tagName, # > tagName)
// 직접 선택자 / 관계선택자(부모,자식)
// 1. 직접 선택자
// 전체선택자 *
$('*').css('color', 'red');
// 아이디 선택자 #
$('#title').css('background-color', 'gray').css('color', 'white');
// 클래스 선택자 . --> 리턴타입 : 배열
// 자스는 클래스가 배열로 들어가는데 JQuery 는 동일 클래스는 다 적용
$('.blue').css('color', 'blue');
$('.blue').text('중복');
let classTag = $('.blue');
for (let i = 0; i < classTag.length; i++) {
classTag[i].textContent = 'for문으로 blue 클래스 텍스트 변경' + i;
}
// $('.blue')[2] -> HTML element가 됨
$('.blue')[2].textContent = '이렇게 하면 개별로 할 수 있지롱';
$('.blue')[2].style.color = 'yellow';
// 태그 선택자
$('p').text('선택자로 변경');
// 그룹 선택자
$('h4, #id_group, .class_group').css('color', 'green')
// 종속 선택자 : 선택한 요소의 id 혹은 class 값이 일치하는 경우
$('h1.class_jongsok').text('클래스를 종속 선택자로 선택')
$('h2#id_jongsok').text('아이디를 종속 선택자로 선택')
console.log('aa2')
})
</script>
<h1 class="blue">JQuery</h1>
<h1 class="class_jongsok">JQuery</h1>
<h2 id="title">선택자</h2>
<h2 id="id_jongsok">선택자</h2>
<h3 class="blue">직접 선택자1</h3>
<h3 class="blue">직접 선택자2</h3>
<p>나는 p</p>
<h4>그룹 선택자</h4>
<h5 id="id_group">그룹 선택자</h5>
<h6 class="class_group">그룹 선택자</h6>
</body>
</html>