jQuery Syntax(Jquery 문법)

jQuery Syntax(JQuery 문법)

« Previous

Next Chapter »

---

With jQuery you select (query) HTML elements and perform "actions" on them.

JQuery에서 당신은 HTML요소들을 선택하고 그들에게 액션을 수행한다.

---

jQuery Syntax

The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s).

Basic syntax is: $(selector).action()

JQuery의 문법은 HTML의 요소를 선택하고 요소로부터 무언가 액션을 수행하는데 맞춰진 형태이다.

기본문법은 다음과 같다 : $(선택자).action()

• A $ sign to define/access jQuery
• A (selector) to "query (or find)" HTML elements
• A jQuery action() to be performed on the element(s)
• $는 JQuery에 대한 선언/접근을 위한 신호이다.
• (선택자)는 HTML요소를 조회(찾기)위한것이다.
• JQuery Action()은 요소에 대한 실행이 될것이다.

Examples(예):

$(this).hide() - hides the current element.(현재 요소를 숨김)

$("p").hide() - hides all <p> elements.(모든 P요소를 숨김)

$(".test").hide() - hides all elements with class="test".(클래스가 "test"인 모든 요소를 숨김)

$("#test").hide() - hides the element with id="test".(id가 "test"인 요소를 숨김)

	Are you familiar with CSS selectors?(CSS 선택자와 유사하다 생각되지 않는가?) jQuery uses CSS syntax to select elements. You will learn more about the selector syntax in the next chapter of this tutorial. JQuery는 요소 선택에 CSS 문법을 사용한다. 튜토리얼의 다음장에서 선택자의 문법에 대해서 배우게 될것이다.

---

The Document Ready Event(문서 준비됨 이벤트)

You might have noticed that all jQuery methods in our examples, are inside a document ready event:

당신은 우리 예제들의 모든 JQuery메소드들이 document ready 이벤트 내부에 있는것을 볼수 있다.

$(document).ready(function(){

   // jQuery methods go here...

});

This is to prevent any jQuery code from running before the document is finished loading (is ready).

이것은 어떤 JQuery코드가 문서의 로딩이 끝나기(준비되기전) 전에 실행되는것을 피한다.

It is good practice to wait for the document to be fully loaded and ready before working with it. This also allows you to have your JavaScript code before the body of your document, in the head section.

문서가 완전히 로드될떄까지 기다렸다가 무언가 작업을 하는것이 좋다. 이것은 또한 당신의 자바스크립트 코드가 문서의 바디전 헤드부분에 있을수 있게 허용한다.

Here are some examples of actions that can fail if methods are run before the document is fully loaded:

아래에 문서가 완전히 로드되기전에 메소드가 실행될경우 실패하게 되는 액션의 예들이 있다 :

• Trying to hide an element that is not created yet
• Trying to get the size of an image that is not loaded yet
• 아직 만들어지지 않은 요소를 숨기려고 시도할경우
• 아직 로드되지 않은 이미지의 크기를 조회할경우

Tip: The jQuery team has also created an even shorter method for the document ready event:

JQuery팀은 문서 준비됨 이벤트를 위한 더짧은 생성됨 이벤트를 만들어 두었다.

$(function(){

   // jQuery methods go here...

});

Use the syntax you prefer. We think that the document ready event is easier to understand when reading the code.

당신의 마음에 드는 문법을 사용해라. 우리가 생각하기에 문서 준비됨 이벤트를 사용하는게 코드를 읽을때 더이해하기 쉬운것같다.