• Q&A
  • 회원가입
  • 로그인

[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. 

JS의 load 이벤트 (= onload 속성) 경우,

문서 (=DOM 객체) 뿐만 아니라, 문서에 사용된 이미지 자원까지 모두 로드 된 경우 실행.

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

 


[방법1] - 정식 표현 ★

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

 

$(document).ready(function(){
     // 실행코드
});

 


[방법 2] - 단축 표현

 

$(function(){
     // 실행코드
});

 


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

jQuery(function($){

    // 실행 코드

});

 

 

jQuery 즉시 실행 구문 (IIFE)

[방법1] - 일반적

 

(function() {

    // 즉시 실행할 코드

})();

 


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

 

(function($) {

  // 즉시 실행할 코드  

})(jQuery);

 

예제보기

※ IIFE (Immediately-Invoked Function Expression : 즉시 호출된 함수 표현식)
※ $기호 충돌 방지 https://homzzang.com/b/jquery-40
※ JS 함수 선언 방식 https://homzzang.com/b/js-55
 

jQuery 변수명

 

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

(예)

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

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

no_profile 유나짱 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2019-01-09 (수) 11:00 3년전
* 비밀글 입니다.
주소
     
     
홈짱 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2019-01-09 (수) 13:09 3년전
* 비밀글 입니다.
주소
찾아주셔서 감사합니다. Since 2012