[자바스크립트] jQuery기초, js & jQuery 태그 선택자, 태그색 입히기

위와 같은 html태그가 있을 때, jQuery와 js를 사용하여

menu2아이디를 가진 ul태그안의 li태그에 색을 입히고 비교해본다.

JS

스크립트 태그안에 화면이 로드되었을때 함수가 호출되도록 해준다.

menu2변수에 (document,문서)에서 (getElementById,아이디로 엘리먼트를 가져오는 방식)으로

(menu2,menu2라는 아이디를 가진 엘리먼트)를 저장한다.

menu2태그에서 TagName을 이용해 li태그를 가져와서 liArrays변수에 저장한다.

liArrays변수안에는 menu2아이디를 가지는 ul태그안에 하위 li태그들이 저장된다.

for문을 사용하여 liArrays변수를 순회하며 배열로 저장된 각 li태그에 

변수[i번째].style.color를 이용해 색상을 blue로 입혀준다.

js를 사용해서 태그를 변수에 저장해 반복문으로 스타일을 입혀줬다.

 

JQuery

위와 같은 태그의 내용을 준비한다.

문서가 준비되면 함수가 호출되도록 한다.

$( )

$()는 function()과 마찬가지로 함수다. 함수의 이름이 $인 것이다.

jQuery의 $()함수는 괄호 속의 매개변수로 받은 태그를 찾아주는 역할을 한다.

또한 제이쿼리에서는 $변수도 볼 수 있는데 그냥 jQuery가 이용된 변수의 이름이란 뜻으로 지정한 것이다.

 

준비되는 함수의 내용으로 $()로 #menu2 li를 매개변수로 넣어서 menu2아이디태그 속의 li태그들을 지정한 후,

css값으로 color에 #F00으로 빨강색을 넣어준다.

js의 태그선택자 방식과 jQuery의 방식은 $()함수의 차이이다.