JQuery

[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);

 

예제보기

※ 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 5년전
* 비밀글 입니다.
주소
     
     
홈짱 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2019-01-09 (수) 13:09 5년전
* 비밀글 입니다.
주소
분류 제목
basic JQ - 제이쿼리 입문
basic JQ - 선행지식 / 포함요소
basic JQ - 시작 (= 버전 + 다운 + 설치 + 외부링크) (jQuery, down, CDN)
basic JQ - syntax ★ - 기본구문 (= 최적작동시점) + (즉시호출/즉시작동/즉시실행) 구문 (= IIF… 2
Selector JQ - selector ★★★★★ - 선택자 (= 제어할 요소선택) ※ this선택자 (=디스선택자)
Event JQ - event ★ - 이벤트 (= 메서드실행 촉발사건) ※ e 매개변수를 명시적으로 전달해야 하는 이유
Event JQ - $(document).ready() 메서드 ★ - 문서로드완료후 실행 (= ready메서드 = 다…
Event JQ - click() 메서드 ★ - click 이벤트발생/함수실행. (= click메서드 = 클릭 메서드…
Event JQ - dblclick() 메서드 ★ - dblclick 이벤트발생/함수실행. (= dblclick메서드 …
Event JQ - mouseenter() 메서드 ★★★ - mouseenter 이벤트발생/함수실행. (= mousee…
Event JQ - mouseleave() 메서드 ★ - mouseleave 이벤트발생/함수실행 (= mouseleav…
Event JQ - mousedown() 메서드 - mousedown 이벤트발생/함수실행. (= mousedown메서…
Event JQ - mouseup() 메서드 - mouseup 이벤트발생/함수실행. (= mouseup메서드 = 마우스…
Event JQ - hover() 메서드 ★ - hover 이벤트발생/함수실행. (= hover메서드 = 허버 메서드)
1/20
목록
 홈  PC버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드
제작의뢰 1
Q&A
커뮤니티 4
웹유틸
회원센터
홈짱 PC버전 로그인