● jQuery (제이쿼리) 문법
: 제이쿼리를 사용하면 아주 편하게 HTMl 요소를 선택하고, 쉽게 특정 동작들을 설정할 수 있습니다.
사용 예시 : $(선택자).동작함수();
달러($) 기호는 제이쿼리를 의미하면서 제이쿼리에 접근할 수 있는 식별자 입니다.
괄호안에 "선택자"를 이용하여 원하는 HTML 요소를 선택하고 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정합니다.
▶ $() 함수
$() 함수는 선택된 HTML 요소를 제이쿼리에서 이용할 수 있는 형태로 생성해줍니다.
$() 함수의 인수로는 HTML 태그 이름뿐만 아니라, CSS 선택자를 전달하여 특정 HTML 요소를 선택할 수 있습니다.
이러한 $()함수를 통해 생성된 요소를 제이쿼리 객체(jQuery Object)라고 합니다.
제이쿼리는 이렇게 생성된 제이쿼리 객체의 메소드를 사용하여 여러 동작을 설정할 수 있습니다.
▶ Document 객체의 ready() 메소드
자바스크립트 코드는 웹브라우저가 문서의 모든 요소를 로드한 뒤에 실행되어야 합니다.
보통은 별다른 문제가 발생하지 않지만, 아래 2가지일 경우에는 오류가 발생합니다.
1. 아직 생성되지 않은 HTML 요소에 속성을 추가하려고 할 경우
2. 아직 로드되지 않은 이미지의 크기를 얻으려고 할 경우
window.onload = function(){
//자바 스크립트 코드;
};자바스크립트에서는 Window 객체의 onload() 메소드를 이용하여 문서가 모두 로드된 뒤에 코드가 실행되도록 설정합니다.
$(document).ready(function() {
//제이쿼리 코드;
});jQuery에서는 Document 객체의 ready()메소드를 이용하여 위와 같이 동일하게 로드된 뒤에 코드가 실행됩니다.
$(function() {
제이쿼리 코드;
});jQuery에서는 위 코드와 동일한 결과를 보장하며 더욱 짧은 문법을 제공합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <!--제이쿼리 라이브러리 -->
<script>
//제이쿼리
$(document).ready( function() {
$("#docu").text("문서가 전부 로드됐어요!");
});
//자바스크립트
$(window).load( function() {
$("#wind").text("창이 모두 로드됐어요!");
});
</script>
</head>
<body>
<p id="docu">제이쿼리</p>
<p id="wind">자바스크립트</p>
</body>
</html>
<p>태그에서 id속성으로 각각 값을 입력해줍니다.
<script>에서 jquery로 $()안에 #을 사용하여 id의 속성을 의미하고, 그 값을 넣어 선택자를 지정합니다.
text함수를 호출해서 값을 입력하면 웹브라우저가 문서의 모든 요소를 로드한 뒤에
위 코드의 <script>가 바로 실행되도록 합니다.
'Dev. Front-End > JavaScirpt' 카테고리의 다른 글
| [JavaScript] DOM이란 무엇이고, 어떻게 사용되나? (0) | 2019.09.24 |
|---|---|
| [Javascript] JSON객체와 메소드 (문자열 변환) (0) | 2019.09.23 |
| [Javascript] Number객체와 String객체 / 메소드(Method) (0) | 2019.09.22 |
| [Javascript] for of 반복문 / for in 반복문 개념 및 차이점 (예제) (0) | 2019.09.21 |
| [Javascript] 숫자와 문자열 자료형 변환(Number) (0) | 2019.09.20 |
| [Javascript] prompt(), confirm() 함수 (1) | 2019.09.19 |
| [Javascript] 배열 (Array) / length, push (0) | 2019.09.18 |
| [Javascript] 클로저 (Closure) (0) | 2019.09.17 |
