안녕하세요. 신기한 연구소입니다.
오랜만에 프로젝트에 투입되었는데 jQuery를 사용하네요. ㅎㅎ
사용한 지 오래되어서 기억이 가물거립니다.
복습도 할 겸 포스팅을 해봅니다.
사실 일하면서 보려고 쓰는 겁니다. ㅎㅎ
최근에 딥러닝(deep learning) 공부를 하고 있었답니다.
누군가 그러더군요.
개발자가 딥러닝을 왜 공부하냐고.
개발자는 라이브러리 사용법만 익혀서 적절히 사용하면 된다면서
굳이 수학적으로 분석하고 공부할 이유가 없다고 하더군요.
jQuery도 같은 맥락이 아닐까 싶네요.
복잡한 자바스크립트(javascript)를 이리저리 테스트하고 사용하면서 시간낭비를 하는 것보단
jQuery 라이브러리로 간단하게 해결하면 효율적이라는 겁니다.
자바스크립트(javascript)로 길게 코딩할 필요 없이 간단히 jQuery 라이브러리로 정리한다면
그나마 칼퇴근에 도움이 되지 않을까 싶네요. ㅎㅎ
그렇다고 자바스크립트(javascript)를 무시하면 안 된답니다.
jQuery도 자바스크립트로 만들었거든요.
우선 jQuery를 사용하려면 해당 js 파일을 다운로드하여야 합니다.
Download jQuery | jQuery
link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download
jquery.com
production과 development가 있는데
용량을 가볍게 하고 jQuery라이브러리를 수정하지 않고 사용만 한다면
production으로 다운로드하면 되고
jQuery 라이브러리 소스를 수정하거나 분석이 필요하다면
development로 다운받으면 됩니다.
오른쪽 클릭 후 다운로드하면 됩니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html>
<head>
<title>tiBoyTest</title>
<script src="js/jquery-3.5.1.js"></script>
</head>
<body>
<div id="test1">Test jQuery</div>
<script>
$(document).ready(function(){
alert('hi');
});
</script>
</body>
</html>
|
cs |
js 폴더에 jquery-3.5.1.js를 다운로드했습니다.
그리고 $()를 사용하고 있습니다.
원래 jQuery()로 사용하는데 더 간단하게 표현하고 위해 단축으로 $를 사용하고 있답니다.
$(document).ready(function(){
이 구문을 해석하면 html파일이 실행되면
DOM(Document Object Model, 문서객체모델)을 호출하는 부분이 $(document)입니다.
.ready는 DOM의 속성으로 준비, 즉 화면이 로딩되는 시점의 준비를 의미합니다.
그리고 function()을 사용해서 구현을 하면 됩니다.
그럼 간단하게 사용하는 방법을 살펴볼게요.
우선 <div> 처럼 요소를 선택해서 명령을 전달할 수 있습니다.
$("div").hide();
두 번째로 CSS에서 사용하는 class 값을 사용할 수 있습니다.
<div class="d01">
$(".d01").hide();
주의할 점은 클래스 값을 사용하는 경우는 반드시 .을 붙여서 사용합니다.
마지막으로 id를 사용하는 방법이 있습니다.
특정 부분에 대해 명령을 하고 싶을 때 사용하면 유용합니다.
<div id="d_01" class="d01">
$("#d_01").hide();
주의할 점은 id를 사용할 때는 반드시 #을 붙여서 사용해야 합니다.
이렇게 요소는 이름 그대로 사용하고,
클래스 값은 .을 붙여서 사용하며,
id는 #을 붙여서 구분할 수 있답니다.
이제 기본적으로 요소를 선택하는 방법을 알았으니
다양한 메서드(함수)를 사용하는 방법에 대해 준비해보겠습니다.
아래 하트(공감) 버튼을 눌러서 더 다양한 글을 쓸 수 있게 응원 부탁드립니다. 감사합니다.
'Software > jQuery' 카테고리의 다른 글
| [jQuery/javascript]$와 $()에 대한 이야기. 제이쿼리 (0) | 2023.06.19 |
|---|
