jQuery는 자바스크립트의 라이브러리이다.
"DOM을 이용해서 직접 제어하는것이 아닌 jQuery 라이브러리를 이용해서 보다 쉽게 이용할 수 있는 것" 이라고 할 수 있다.
DOM에 대한 정의는 아직은 잘 모르겠다.
그냥 document.getElementByTagName 이런것을 이용하여 웹브라우저에 표시되는 것이 DOM 이라고만 알고있다.
여러 정보를 찾아봐도 DOM에 대해 정확히 설명할 수가 없다. 나중에 정리되면 다시 정리해 볼 것이다.
jQuery를 사용하기 위해선 jQuery를 담고있는 코드파일을 먼저 로드시켜야 한다.
해당 코드파일을 다운로드 받아 웹소스에 저장하여 사용해도 되지만 CDN이라는 간편한 방법이 있다.
CDN이란 Contents Delivery Network 라고 해서 컨텐츠를 여러곳에 저장해놓고 사용자와 거리상 가장 가까운곳에서 전달받음으로써 전송 속도를 높인다.
CDN을 사용하는 방법은,
jQuery 사이트에 접속하여 버전별로 확인할 수 있으며,
원하는 버전에 맞게 클릭하면 위와같이 script 소스를 얻을 수 있다.
위 코드를 웹 문서에 삽입하면 jQuery를 사용할 수 있게 된다.
간단하게 jQuery를 사용하는 코드를 작성해보겠다.
<!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>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script>
jQuery(document).ready(function($){
$('body').prepend('<h1>Hello World</h1>');
});
</script>
</body>
</html>먼저 jQuery CDN을 삽입하였고 그 다음 jQuery를 사용했다.
jQuery 부분에서
jQuery(document).ready(function($){
});이 부분은 여기서 설명하지 않는다.
이해하려면 선행되어야 할 지식들이 있어야 하기 때문에 그냥 항상 이렇게 쓴다 라는 정도로만 알고 넘어간다.
이 사이에 들어간 코드인 $('body').prepend('<h1>Hello World</h1>'); 를 설명해보면,
body 영역의 맨 앞에 <h1>Hello World</h1> 을 삽입한다는 뜻이다.
실제 결과를 보면,
html 코드에 없던 저 부분이 생긴 것을 볼 수 있다.
jQuery의 결과다.
여기까지만 보면 간단히 이렇게 이해할 수 있다.
$ 부분과 점(.) 다음 오는 부분(여기선 prepend()) 이렇게 두 부분으로 나눠보면,
'$() 의 인자값에 대한 부분에 대해서 점(.) 다음으로 오는 메소드(?)를 적용한다'
라고 이해할 수 있을 것 같다.
간단한 하나의 코드를 더 확인해본다.
<!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>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script>
jQuery(document).ready(function($){
$('li').css('color', 'red');
});
</script>
</body>
</html>위와 같은 코드가 있다.
$('li').css('color', 'red') 의 부분을 설명해보면,
li 라는 태그이름을 가진 엘리먼트들에 대하여 css라는 메소드를 적용하고 인자값으로 color와 red가 쓰였다.
jQuery는 항상 달러($)로 시작을 한다.
$ 뒤엔 괄호가 오는데 이것은 $ 가 함수를 의미한다는 것이 된다.
$를 보통 jQuery Function 이라고 하고, 이 함수의 결과값 즉 리턴된 값이 jQuery 객체가 된다.
위에선 $('li') 부분이 jQuery 함수가 되고, 이 함수는 li 라는 태그이름을 가진 엘리먼트들을 가리키며 이 리턴된 어떠한 값이 jQuery 객체가 되는 것이다.
점(.) 다음에 오는 메소드, 여기에선 css 라고 하는 메소드가 이 jQuery 객체의 프로퍼티가 된다.
다시한번 위의 코드를 보면,
ul 태그 밑에 HTML, CSS, Javascript 가 각각 li 태그들로 묶여있다.
$('li') 는 이 세 부분을 모두 아우른다.
결과를 보면,
li 태그 안에 css 메소드가 적용되어 style ~ 부분이 생겼다.
jQuery의 결과이다.
즉, .css('color', 'red') 는 style="color: red;" 를 의미하는 것을 알 수 있다.
한 가지 코드만 더 확인해보면,
<!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>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
<ol>
<li id="sjh">HTML</li>
<li class="sjh">CSS</li>
<li name="sjh">Javascript</li>
</ol>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script>
jQuery(document).ready(function($){
$('ul').css('color', 'red');
$('#sjh').css('color', 'green');
$('.sjh').css('color', 'pink');
$('[name="sjh"]').css('color', 'blue').css('textDecoration', 'underline');
});
</script>
</body>
</html>이번엔 ul 태그영역과 ol 태그영역을 만들고 ol 태그 안의 li 요소에서 id, class, name 을 부여했다.
jQuery 부분을 보면 jquery 함수의 인자 앞부분에 샾(#), 점(.), [name=] 이 들어간 것을 볼 수 있다.
# : id
. : class
[name=] : name
을 의미한다.
그리고 jquery에서 name 부분을 보면 점(.) 으로 두 번 연결되어 있는 것을 볼 수 있다.
Chaning 이라고 하는데 연결되어 메소드를 추가해 사용할 수 있다. 여기선 css를 사용했지만 jquery에서 제공되는 다른 메소드를 사용해도 된다. 뒤에 연결된 부분은 밑줄을 그으라는 의미이다.
결과를 확인해보면,
위와 같이 각 태그요소에 jquery 의 css 메소드로 지정해준 color 값이 들어간 것을 볼 수 있다.
'Javascript' 카테고리의 다른 글
| 10. jQuery 알아보기 (0) | 2021.09.11 |
|---|---|
| 9. HTML Element (0) | 2021.09.10 |
| 7. getElementsByTagName / getElementsByClassName / getElementById (0) | 2021.09.08 |
| 6. window.open 활용 (0) | 2021.09.07 |
| 5. window.open (0) | 2021.09.06 |