day11. jQuery 기본 문법

jQuery란?

• 가볍고 빠른 자바스크립트 프레임워크 라이브러리
• 자바스크립트 생산 편의성을 제공, 코드가 단순 및 간결
• DOM 조작과 Ajax 호출과 같은 복잡한 작업을 단순화
• 코어 외의 부가적 기능을 플러그인 형태로 제공
• HTML/DOM 조작, CSS 조작, HTML event methods, 효과 및 애니메이션, Ajax, 유틸리티 기능 포함

특징

1) CSS Selector

• HTML 문서의 구조를 명료하면서도 읽기 쉬운 형태로 표현 및 사용 가능
  2) Plig-in Architecture
  3) Methode Chaining
• 여러 개의 기능을 한 줄에 나열, 임시 변수 사용을 최소화하여 불필요한 코드 반복 지양
  4) Cross 브라우저

jQuery 기본 문법

$ 함수

기본 구문 : $(selector).action()

• $ - 제이쿼리 정의/접근을 위한 기호(식별자)
• selector - HTML 요소 선택
• action() - 요소에서 수행할 작업

ready 메소드

• ready 메소드 - DOM 로드 후 실행 할 콜백
• script는 DOM 요소가 준비 될 때까지 실행을 대기함
• 문서 로드가 다 되기 전에 제이쿼리 코드가 실행되는 것을 방지함
• 함수 호출
  - 아래는 기본 문법과 축약 문법으로 다 같은 함수이다.

// 1
$(document).on("ready", function(){
	alert("hello world!");
});
// 2
$(document).ready(function(){
	alert("hello world!");
});
// 3
jQuery(function() {
	alert("hello world!");
});
//4
$(function() {
	alert("hello world!");
});

함수 체계

• $(document).ready(); - 제이쿼리의 진입점(Entry Point)
• 자바스크립트 익명 메소드 호출
  - $(document).ready(function() {...})
• $ ()로 CSS Selector와 모든 DOM 요소 접근
  - $('selector').xxx메소드();
• 익명함수
  - function()
• $()와 jQuery()는 동일한 코드!
• $('#id')는 제이쿼리 개체를 반환

// javascript
document.getElementById("clickBtn").addEventListener("click", function(event){
       	 alert("click!");
});

// jQuery
$("#clickBtn").on("click",function(event){
	alert("click!");
});

id가 clickBtn인 요소 DOM에 클릭 이벤트가 발생할때 alert("click!")을 수행한다. 위는 바닐라 자바스크립트로 표현한 것이고, 아래는 같은 기능을 수행하는 코드를 제이쿼리로 나타낸 것이다.

사용자 정의 함수

• $에 정의된 유틸리티 함수
• 제이쿼리 확장 집함에서 동작하는 메소드
• 기본 문법

// 1)
(function($){
	$.fn.[플러그명] = function() {
    	// 플러그인
      	return this;
    }
});
// 2)
$.fn.[플러그명] = function() {
    // 플러그인
	return this;
}

• 예제

$.fn.myPlugin = function(data) {
	console.log("Data : " + data);
	$(this)
		.text(data)
		.css({
			"color":"green",
			"background-color": "pink"
		});
    // 메서드 체인이 가능하도록 this를 반환
    return this;
 };

$(document).ready(function() {
            $("h1").myPlugin("플러그인 적용");
});