[basic] JQ - syntax ★ - 기본구문 (= 최적작동시점) + (즉시호출/즉시작동/즉시실행) 구문 (= IIFE : Immediately-invoked function expression) ※ jQuery 변수명 ※ (돔로드완료/페이지로드완료) 체크

1. jQuery 원리
2. jQuery 구문 형식
3. jQuery 기본 구문 (= 최적 작동 시점) ★★★★★
4. jQuery 즉시 실행 구문 (IIFE)
5. jQuery 변수명

jQuery 원리 

[동작원리]

 

HTML 요소(=태그) 선택 후, 어떤 작동(= action)을 수행케 함. 

 

※ 작동(= action)은 함수/메서드 이용. 

※ 메서드는 객체에 속하는 함수 일종임.

 

---

[사용방법]

 

jQuery 코드 역시 JS 일종이므로, JS 구문위치/외부파일 사용법 따름.

 

jQuery 구문 형식

 

$(selector).method()

 

---

[의미]

 

$ 
jquery 의미. 

※ 타 언어의 $기호와의 충돌 방지 위해, 다른 기호 사용 가능.

selector 
선택자. (= 작동시킬 HTML 요소를 선택.)
※ HTML 요소 선택 시, CSS 선택자 이용 가능.

method() 
메서드. (=선택된 HTML 요소가 어떤 작동 할지 정의.)

 

---

[예제]

 

$(this).hide()
현재 요소 (= this)를 숨겨라.

 

$("p").hide()

모든  <p> 요소를 찾아 숨겨라.

 

$(".hz").hide()

class="hz"인 모든 요소를 찾아 숨겨라.

 

$("#hz").hide()

id="hz"인 요소를 찾아 숨겨라.

 

jQuery 기본 구문 (= 최적 작동 시점) ★★★★★

 

1.

jQuery는 문서 (= DOM 객체)가 모두 랜더링 된 후 실행하는 게 좋음.
왜냐면, 랜더링 완료 전 실행 시, 랜더링 안 된 요소를 작동시켜 에러 발생 가능.

cf. JavaScript 경우

• JS load 이벤트 (= onload 속성) 경우, 문서 (=DOM 객체) 뿐만 아니라, 문서에 사용된 이미지 자원까지 모두 로드 된 경우 실행.
• JS DOMContentLoaded 이벤트 경우, 문서 콘텐트 로드 완료 시 실행됨.

2.
아래 2가지 구문 이용해 랜더링 완료 후 실행 보장.

 

---

[방법1] - 정식 표현 ★

※ 직관적인 코드 이해 위해 이 방법 권장.

 

$(document).ready(function(){

     // 실행코드

});

 

---

[방법 2] - 단축 표현

 

$(function(){

     // 실행코드

});

 

---

PS. 다른 프로그램의 $기호와의 충돌 예방 위해 $기호 대신 jQuery 사용해도 무방.

jQuery(function($){

    // 실행 코드

});

 

jQuery 즉시 실행 구문 (IIFE)

[방법1] - 일반적

 

(function() {

    // 즉시 실행할 코드

})();

 

---

[방법2] - 타 프로그램의 $ 기호와의 충돌 예방. (권장) ★

 

(function($) {

  // 즉시 실행할 코드  

})(jQuery);

 

예제보기

jQuery 변수명

 

$ (달러)기호,  _(언더바)기호 경우 jQuery 변수명으로 사용 가능.
변수명이 jQuery 예약어와 겹치지 않도록 할 때 유용.

(예)

var $duration = 300, $hz_image = $('#hz p');