최신 웹 개발 튜토리얼
 

jQuery통사론


jQuery를 사용하면 (쿼리) HTML 요소를 선택하고 그들에 "작업"을 수행합니다.


jQuery를 구문

JQuery와 구문은 맞춤형 만든 일부조치를 HTML 요소를 선택하고수행하기위한 element(s) .

기본 구문은 다음과 같습니다 $(selector).action()

  • $ 기호 / 액세스 jQuery를 정의
  • A와(선택)"쿼리 (또는 찾기)"HTML 요소
  • JQuery와의 action () 온 수행 될 element(s)

예를 들면 :

$(this).hide() - 현재 요소를 숨 깁니다.

$("p").hide() - 모두 숨 깁니다 <p> 요소를.

$(".test").hide() - 모든 요소를 숨 깁니다 class="test" .

$("#test").hide() -를 가진 요소 숨 깁니다 id="test" .

당신은 CSS 선택기에 대해 잘 알고 있는가?

jQuery를 요소를 선택하는 CSS 구문을 사용합니다. 이 튜토리얼의 다음 장에서 선택기 구문에 대한 자세한 내용을 배울 것입니다.


문서 준비 이벤트

당신은 우리의 예에서 모든 jQuery를 방법이 문서 준비 이벤트 안에있는 것을 눈치 챘을 수도 있습니다 :

$(document).ready(function(){

  // jQuery methods go here...

});

이 문서 (준비) 로딩이 완료되기 전에 실행하는 jQuery 코드를 방지 할 수있다.

이 문서가 함께 작업하기 전에 완전히로드와 준비를 기다려야하는 것이 좋습니다. 이것은 또한 머리 부분에, 당신은 당신의 문서의 본문 전에 자바 스크립트 코드를 가질 수 있습니다.

여기에 방법이 문서 전에 실행하는 경우 실패 할 수있는 작업의 몇 가지 예는 완전히로드되어 있습니다 :

  • 아직 생성되지 않은 요소를 숨기려고
  • 아직로드되지 않은 이미지의 크기를 얻으려고 노력

팁 : jQuery를 팀은 또한 문서 준비 이벤트에 대한 더 짧은 방법을 만들었습니다 :

$(function(){

  // jQuery methods go here...

});

당신이 원하는 구문을 사용합니다. 우리는 문서 준비 이벤트가 코드를 읽을 때 이해하기 쉽다는 것을 생각한다.