[Javascript, jQuery] "$" 객체의 사용

1. "$" 객체의 사용 ("$"는 객체다!)

• jQuery의 모든 기능은 $라는 객체의 하위로 포함되어 있다.

• "$"는 jQuery의 모든 기능을 담고 있는 객체이자 함수이다.

1. jQuery함수를 사용하여 크로스 브라우징을 지원하는 load 이벤트 처리가 한번에 가능하다.

function a(){

... $를 사용하여 jQeury의 기능 호출 ...  
}  
jquery(a);

2. 아래에 jQuery(foo)를 해줬고, foo함수의 파라메터로 $를 해줬기 때문에 함수내에서 $를 통한 jQuery 기능 사용이 가능하다는 것을 확인할 수 있는 예제이다.

function foo($){  
$를 이용하여 jQuery 기능 사용 가능

var h1 = $("#hello") //document.getElementById를 "$" 하나로 대체가 가능하다.

}  
jquery(foo);

3. foo라는 함수 정의없이 바로 jQuery 기능 사용

jquery(function($){  
$를 이용하여 jQuery 기능 사용 가능  
});

4. jquery와 function의 파라메터 $를 $하나로 축약

$(function(){  
$를 이용하여 jQuery 기능 사용 가능  
});

2. HTML 요소 획득하기

• innerHTML 대신 html()함수를 사용하여 요소 안에 새로운 내용을 추가하고 요소 안의 내용을 가져올 수 있다.

예제

function foo($){
var h1 = $("#hello").html("Hello jQuery"); // set
}
jQuery(foo);

예제

function foo($){
var h1 = $("#hello").html(); // get
}
jQuery(foo);

3. 콜백함수를 사용한 load 처리의 축약 (2번 예제 활용)

function foo($){
var h1 = $("#hello").html("Hello jQuery");
}
jQuery(foo);

는 다음과 같이 표현할 수 있다.

jQuery(function($){ // 익명함수를 통하여 표현함으로 기존 함수의 이름인 foo는 생략
var h1 = $("#hello").html("Hello jQuery"); // set
});

4. jQuery 함수의 축약

jQuery(function($) {
... jQuery를 활용한 기능 구현 ...
}

jQuery는 다음과 같은 축약된 표현도 지원한다.

$(function() { // jQuery가 $로 대체, 마라미터인 $는 생략
... jQuery를 활용한 기능 구현 ...
}

화살표 함수로의 축약

$( () => { // jQuery가 $로 대체, 마라미터인 $는 생략
... jQuery를 활용한 기능 구현 ...
}

5. 마무리

• $() 함수에 전달된 콜백함수가 프로그램의 시작점이 된다.
  • 전달된 콜백함수 내부에서는 "$"객체를 사용하여 html 요소를 제어할 수 있다.
• $() 함수가 여러 개 사용된 경우사용된 순서대로 실행된다.

jQuery 소스코드 작성 팁!!

• CSS의 경우모든 셀렉터는 class와 가상클래스 기반으로만구성한다.

  • HTML 태그 셀렉터의 경우 표준 권고사항이 아니다.
  • ID 셀렉터의 경우 Javascript와 혼용될 경우 혼란스러울 수 있으므로 가급적 지양한다.

• Javascript의 경우가급적 id 기반으로만 요소에 접근한다.

  • 한번에 여러개의 요소를 제어해야 하는 상황에 한해서만 class 기반을 사용하고, 대부분의 경우는 id나 태그의 속성 기반으로만 사용한다.