반응형

흔히들 jQuery와 javascript의 차이점을 대답할 때,

'제이쿼리' 는 자바스크립트를 기반으로 만들어진 라이브러리 라고 많이들 대답하곤 한다.

 

자바스크립트는 크게 4가지 요소로 구성돼 있다.

1. 자바스크립트 core 문법

2. 자바스크립트 core 라이브러리

3. 자바스크립트 BOM (Browser Object Model)

4. 자바스크립트 DOM (Document Object Model)

 

제이쿼리는 이중 자바스크립트 DOM작업을 쉽게 처리할 수 있도록 도와주는 라이브러리다.

또한 제이쿼리는 DOM작업을 쉽게 도와주는 라이브러리 일뿐, 자바스크립트 문법이나 라이브러리를 대체하는

프로그래밍 언어가 절대 아님을 인지해야 한다.

 

* javascriptjQuery의 문법차이

 

- html

<body>
	<ul id="menu">
    	<li>menu1</li>
        <li>menu2</li>
        <li>menu3</li>
    </ul>
</body>

- javascript

//menu 노트 찾기
var menu = document.getElementById("menu");
//li 리스트 구하기
var liList = menu.getElementsByTagName("li");
//li 개수만큼 루프 돌며 스타일 변경
for(var i=0;i<liList.length;i++){
	//i번째 li 접근
    var li = liList[i];
    //스타일 변경
    li.style.color="#f00";
}

- jquery

$("#menu li").css("color", "#f00");

 

위와같이 document의 html 구성이 있을때, javascript 코드와 jquery의 코드는 같은 뜻을 가지고 있다.

무분별하게 jquery를 남발하기 보다는, 해당 소스가 javascropt DOM 문법으로 어떻게 이루어지는지

이해를 가지면서 공부하는게 좋다.

 

참고문헌 : '자바스크립트 + jQuery 완정정복 스터디' 2편

반응형

'jQuery' 카테고리의 다른 글

[jQuery] css/jquery로 tab메뉴 구현  (0) 2020.02.08

+ Recent posts