Contents
script 위치jquery란?
jQuery는 JavaScript 라이브러리로,
DOM 조작을 더 쉽게 할 수 있도록 도와줍니다.
jQuery를 사용하면 DOM을 선택하고 조작하는 작업이 간편해집니다.여기서 dom이란?
DOM(Document Object Model)은 웹 페이지를 구성하는 HTML 요소들을 트리 구조로 표현한 모델이에요. 이를 통해 JavaScript 같은 프로그래밍 언어로 웹 페이지의 내용을 쉽게 조작할 수 있게 해줍니다.
DOM이란?
트리 구조:
DOM은 HTML 문서를 트리 구조로 나타내요.
각 HTML 태그는 트리의 노드가 되고, 이 노드들은 부모-자식 관계를 맺고 있어요.
예를 들어, 다음과 같은 HTML 코드가 있다고 해요:
html
<html>
<body>
<h1>안녕하세요!</h1>
<p>여기는 문단입니다.</p>
</body>
</html>
이 HTML 코드는 다음과 같은 트리 구조로 표현될 수 있어요:
css
html
└── body
├── h1
│ └── "안녕하세요!"
└── p
└── "여기는 문단입니다."jQuery로 DOM 조작하기
jQuery는 이 트리 구조(DOM)를 쉽게 조작할 수 있게 도와주는 도구예요. 예를 들어, 웹 페이지에 있는 버튼을 클릭했을 때 특정 내용을 바꾸거나, 새로운 요소를 추가하는 등의 작업을 쉽게 할 수 있어요.
예제 코드 설명
html코드 복사
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Value: " + $("#test").val());
});
});
</script>
</head>
<body>
<input type="text" id="test" value="Hello jQuery!">
<button>클릭해줘!</button>
</body>
</html>
위의 예제에서, DOM과 jQuery가 어떻게 사용되는지 자세히 살펴볼게요:
- HTML 구조:
<input type="text" id="test" value="Hello jQuery!">는 ID가test인 텍스트 입력 상자를 만들어요.<button>클릭해줘!</button>는 버튼을 만들어요.
- jQuery로 DOM 조작:
$(document).ready(function(){ ... });는 페이지의 모든 내용이 로드된 후에 내부의 코드를 실행해요.$("button").click(function(){ ... });는 버튼을 클릭했을 때 이벤트를 설정해요.$("#test").val()는 ID가test인 입력 상자의 값을 가져와요.alert("Value: " + $("#test").val());는 그 값을 알림 창에 보여줘요.
이처럼 jQuery를 사용하면 DOM을 쉽게 선택하고 조작할 수 있어요. HTML 요소들을 쉽게 선택해서 내용을 변경하거나, 이벤트를 설정하거나, 새로운 요소를 추가하는 등의 작업을 간단하게 할 수 있답니다.
script 위치
1) <head>script~~</head>
-모든 html이 로드되기 전 js가 로드됨. 특정 스크립트가 다른 리소스보다 전에 준비되어야할 때 유용
2) </body> 앞= 혹은 <body>끝 [일반적 방법]
-모든 html이 로드된 후 js가 로드됨.
-html이 모두 로드된 후 실행되어 페이지 렌더링을 방해하지 않도록 한다.
Share article
