가희의자기개발블로그
jQuery의 정체 본문
01_ $() 의 의미
jQuery에서 가장 많이 사용하는 기능은 $()이다.
$("div").css("border","4px solid #f00"); 은 div의 태그에 border속성을 4px solid빨강으로 준것이다.
여기서 $는 함수 그자체 이다. $()는 함수를 호출한 것이다.
jQuery 라이브러리 내부를 살펴보면 다음과 같다
window.jQuery = window.$ = jQuery;
jQuery함수와 동일하며 jQuery 함수를 좀더 쉽게 사용하기 위한 일종의 단축이름이다.
02_ $() 함수의 리턴값
$("div").css("border","4px solid #f00");
위의 코드에서 점(.)은 특정 객체에서 제공하는 기능에 접근할 때 사용한 접근 연산자이다. 그리고 css()는 이 특정 객체에서제공하는 기능(메서드)중 하나이다. 즉, $("div")함수의 리턴값인 특정 객체가 바로 jQuery 객체라는 것이다.
위의 코드를 좀더 보기 쉽게 정리하면 다음과 같이 표현할 수 있다.
var $divs = $("div");
$div.css("border","4px solid #f00");
$()함수가 jQuery객체를 리턴한다는 사실은 jQuery레퍼런스를 보면 좀 더 확실히 알 수 있다.
개발자에게 레퍼런스는 정말 중요한 개발 도구 중 하나이다. 왜냐면 수백 수천 개의 메서드를 모두 외울 수도 없고 알 필요도 없기 때문이다. 생각나지 않는 부분은 그때그때 레퍼런스를 찾아 보며 사용하면 된다.
에서 객체들의 레퍼런스를 확인할 수 있다.
jQuery 함수가 jQuery 객체를 리턴하기 때문에 $("div")함수 호출 후 jQuery에서 제공하는 css()메서드를 접근 연산자인 점을 사용해 $("div").css("border","4px solid #f00"); 구문을 사용 할 수 있게 된다.
※주의 할 점
1번
$("#target").css("font-size").addClass("select");
2번
$("#target").css("font-size",12).addClass("select");
이 두구문에서 1번 메소드는 실행하지 않는다. 그 이유는 css()메서드가 파라미터로 인자값을 1개만 받을 경우 String객체를 리턴하고 이 String객체에서는 addClass()메서드를 제공하지 않기 때문이다.
반면, css()함수가 두개의 매개변수를 받을땐, jQuery객체를 리턴하는데 jQuery객체는 addClass()객체를 제공하기 때문에 실행가능한다.
03_ jQuery의 정체
jQuery는 자바스크립트 DOM을 좀 더 쉽게 다룰 수 있게 도와주는 기능들로 가득 찬 라이브러리이다. 이 라이브러리는 자바스크립트의 prototype이라는 클래스 제작 문법으로 만들어졌다. jQuery를 prototype으로 간단하게 표현하면 다음과 같다.
function jQuery(){}
jQuery.prototype.css= function(){}
jQuery.prototype.on = function(){]함수를 사용하기 위해서는 함수호출이라는 것을 해줘야 하는 것처럼 클래스 역시 사용하기 위해서는 사용하려는 클래스의 인스턴스를 생성해줘야 한다.
var 인스턴스 이름 = new 클래스이름();하지만, $()에서 jQuery의 인스턴스를 우리대신 만들어서 제공하기 때문에 이처럼 인스턴스를 생성할 필요가 없다.
그렇다면, 다음 구문이 실행되면 어떤 원리로 문서 내의 모든 div태그 속성이 바뀌는지 알아보자. 또, jQuery 객체 내부에 들어있는 DOM노드와 JQUERY객체와의 관계설명도 포함된다.
<body>
<div>div-data1</div>
<div>div-data2</div>
<div>div-data3</div>
<div>div-data4</div>
<p>p-data1</p>
<p>p-data2</p>
<p>p-data3</p>
<p>p-data4</p>
</body>
var $divs=$("div");
$divs.css("header","4px solid #f00");위 코드를 봤을 때, jQuery인스턴스 가 div객체만큼 만들어진다고 생각할 수 있지만 단 한개만 만들어진다.
var $divs = $("div");
가 실행 되면 $() 함수를 활용해 찾은 4개의 div 태그 객체(정확히 말하면 HTMLDivElement 객체)를 가지게 된다.
이떄, css() 메서드를 호출하는 경우 css()메서드는 우리 대신 jQuery 내부의 프로퍼티로 갖고 있는 div태그 객체를 for문과 같은 반복문을 이용해 노드에 하나씩 접근해 스타일을 변경한다.
function(){
...
for(var i=0; i<nodes.lengths; i++){
nodes[i].style.color="#f0000";
}
...
}위 코드에서도 알 수 있는 것처럼 실제 스타일을 변경하는 기능은 jQuery가 아닌 jQUery 객체 내부에 있는 자바스크립트 DOM이 처리한다. 또, JQuery를 사용하는 사용자의 경우 루프를 직접 돌리진 않지만 jQuery내부에서는 루프를 도는 로직이 들어 있기 때문에 가급적 jQuery 기능 호출을 줄여주는 게 좋다.
예를 들어 다음과 같은 구문은 가능하면 변수를 활용해 메뉴 노드(#menu)를 캐시해서 사용하는 것이 좋다.
$(document).ready(function(){
//메뉴 항목 추가1
$("#menu").append("<li>newmenu1</li>");
$("#menu").append("<li>newmenu2</li>");
$("#menu").css("border", "1px solid #f00");
});
$(document).ready(function(){
var $menu = $("menu");
$menu.append("<li>newmenu1</li>");
$menu.append("<li>newmenu2</li>");
$menu.css("border","1px solid #f00");
});변경전 코드를 보면 $("menu")를 3번 호출한 반면 변경 후 코드에서는 딱 한 번 호출한 것을 확인할 수 있다.
'프론트엔드 > JavaScript+JQuery' 카테고리의 다른 글
| 자식 노드 찾기 (0) | 2020.06.30 |
|---|---|
| 찾은 노드 다루기 (0) | 2020.06.28 |
| JQuery 개발 환경 설정 (0) | 2020.06.28 |
| jQuery를 사용하는 이유 (0) | 2020.06.24 |
| jQuery 학습방법 (0) | 2020.06.23 |