[JQuery] JQuery 사용법

 

지난 시간에 간단하게 JQuery란 무엇인가에 대해서 알아봤습니다.

이번 강좌부터는 사용법을 차근차근 하나씩 배워보려고 합니다.

우선 JQuery를 사용하는 방법을 알아보도록 하겠습니다.

 

 

1. JQuery 등록

 

웹 브라우저에서 외부 내용을 가져올 때, 링크를 걸어주면 됩니다.

 

index.html 이라는 테스트 페이지를 생성하고, 지난번 다운로드 받은 JQuery 스크립트 파일을 index.html 와 같은 폴더에 두고 작업을 진행하였습니다.

 

js 파일을 자바스크립트 파일이라는 것을 뜻합니다.

index.html 페이지를 간단하게 만들었습니다.

<head> 안 <script> 항목 안에 파일 경로 및 js 파일을 추가해주면 됩니다.

 

아래와 같이 다운로드 받은 경로를 넣어주셔도 되고, 항상 온라인 상에 연결되어 있는 경우 최신 JQuery 홈페이지에서 제공하는 url 주소를 넣어주셔도 됩니다.

 

<!DOCTYPE html>
<head>
    <script src="jquery-1.9.1.js"></script>
</head>
<body>
    
</body>
</html>

 

위와 같이 하면 별다른 등록없이 JQuery 라이브러리를 사용할 수 있습니다.

 

 

2. ready

 

버튼을 누른다거나, 값을 바꿨을 때와 같은 어떤 액션을 사용하지 않고 웹페이지를 불러옴과 동시에 특정 명령 = 함수를 실행할 경우가 있습니다.

웹 브라우저에서 화면에서 표시할 객체들 DOM 트리를 생성하고 난 후에 제일 처음 실행되는 코드를 JQuery에서는 아래와 같이 .ready를 써서 사용합니다.

아래 내용들은 각각 달라보이지만, 전부다 ready 표현입니다.

ready는 보통 html 문서가 끝나는 </html> 아래 <script>로 작성하는 편입니다.

 

$(document).ready(function() {
});

 

$().ready(function() {
});

 

$(function() {
});

 

또는 load를 사용하기도 합니다.

 

$(window).load(function() {
});

 

ready 안에 코드를 집어넣으면 함수 및 명령을 넣어 보도록 하겠습니다.

 

 

3. 샘플

 

html 코드에서 ID를 찾으려면 document.getElementById을 써야 했습니다.

JQuery 에서는 간단하게 표현할 수 있습니다.

 

document.getElementById("찾으려는ID") -> $("#찾으려는ID") 처럼 표시할 수 있습니다.

 

좀더 보기 쉽게 샘플 코드를 적어보도록 하겠습니다.

 

body안에 div 코드를 2개 생성하였습니다.

 

<body>
    <div id="test1"></div>
    <div id="test2"></div>
</body>

 

위의 내용을 웹 브라우저에서 실행하면 아무 내용이 없습니다.

여기에 test1 값을 직접 넣지 않고, JQuery를 통해 ID를 찾아서 값을 넣어보도록 하겠습니다.

 

$("#  +  test1   + ")  이렇게 ID를 찾도록 합니다.

그 다음 속성에 해당하는 값을 집어넣으면 되는데, 텍스트 내용만 넣어줄 것이므로 text(할말)을 적어줍니다.

 

아래와 같이 하면 페이지 로드시 hello 라는 내용이 보입니다.

 

<script>
$(document).ready(function() {
    $("#test1").text("hello");
});
</script>

 

이 내용을 html 코드 상에서 구현한다면 아래와 같이 됩니다.

문장 자체가 길어서 그런지 가독성도 떨어지고 대소문자를 구분해줘야해서 불편하네요 ㅠ.ㅠ

 

document.getElementById("test1").innerText = "hello";

 

 

4. 샘플 전체

 

내용은 별거 없지만, 테스트에 사용한 샘플입니다.

 

<!DOCTYPE html>
<head>
    <title>에프에이리눅스</title>
    <script src="jquery-1.9.1.min.js"></script>
</head>
<body>
    <div id="test1"></div>
    <div id="test2"></div>
</body>
</html>
<script>
$(document).ready(function() {
    $("#test1").text("hello");
});
</script>

 

 

^ㅇ^!!!

 

간단하게 JQuery를 사용해서 ID 에 값을 넣어보는 것을 알아봤습니다.

앞으로 계속 JQuery에 사용법에 대해서 올려보도록 하겠습니다.

 
이 게시물을...