[jQuery] $()란?

우리는 보통 jQuery를 쓸때 $("div).css("boder", "4px  solid"); 와 같은 형태로 쓴다.

항상 앞에 $("CSS 선택자")의 형식으로 쓴다. 여기서 $()란 무엇을 나타내는 것일까?

바로 $()는 함수를 나타낸다. 

$ 함수 그 자체인 것이다. 실제로 jQuery라이브러리 내부를 살펴보면 window.jQuery = window.$ = jQuery; 라는 부분이 있다.

정리해보면 $는 jQuery 함수와 동일하며 일종의 단축이름이다.

그래서 $("div).css("boder", "4px  solid");을 jQuery("div).css("boder", "4px  solid"); 로 바꿔써도 똑같이 작동한다.

그리고 $() 가 함수라는것은 아래의 예시를 보면 알 수 있다.

$("div).css("boder", "4px  solid");는 아래와같이 표현할 수 있다.

var $divs = $("div");

$divs.css("boder", "4px solid");

그렇다는건 $()함수의 리턴값이 jQuery객체 이고 css()는 그 jQuery객체 안의 메서드란걸 알 수 있다.

※ 요약

즉 $divs의 안에는 $()함수에서 리턴된 jQuery객체의 정보를 담고있고 그 객체 안에는 css()와 같은 여러 메서드와 정보들을 가지고있다.

※ 추가

위에서 말했듯이 우리가 스타일을 변경할 때는 jQuery가 아닌 jQuery객체 내부에 있는 메서드를 이용하여 작업을 수행한다.

이러한 메서드들 내부는 보면 자바스크립트 DOM으로 구성되어있다.

이 자바스크립트 DOM 안에는 반복문이 있을 수도 있다. 그렇기 때문에 가급적 jQuery 호출을 줄여주는게 좋다.

가급적 노드를 캐시하여 사용하자!

ex)

$("#menu").css("boder" , "1px solid");

$("#menu").css("boder" , "2px solid");

$("#menu").css("boder" , "2px solid");

이렇게 jQuery를 세번 호출하는것 보단 아래와같이

var $menu = $("#munu");

$menu.css("boder" , "1px solid");

$menu.css("boder" , "2px solid");

$menu.css("boder" , "3px solid");

노드를 캐시하여 사용하자.