- 여러 브라우저에서 동작하는 사용하기 쉬운 API를 통해 HTML 문서 탐색과 조작
- 이벤트 처리, 애니메이션, Ajax 등을 훨씬 더 간단하게 만들어 줌.
- 함수에 별도의 이름을 붙이면 같은 기능이 필요할 때마다 해당 함수를 실행할 수 있다.
<div>
<ul class="menu" id="menu1">
<li>김밥</li>
<li>비빔밥</li>
<li>제육덥밥</li>
<li>오징어덮밥</li>
<li>돌솥밥</li>
</ul>
<ul class="menu" id="menu2">
<li>육개장</li>
<li>감자탕</li>
<li>오리탕</li>
<li>닭백숙</li>
<li>추어탕</li>
</ul>
</div>
[HTML코드]
스크립트를 이용해 문서에서 #menu2(id선택자)의 <li>
태그 글자색을 모두 빨간색으로 변경하고 싶다면?
window.onload = function() {
//먼저 아이디 선택자가 menu2를 찾는다.
let menu2 = document.getElementById("menu2");
//ul태그(menu2선택자) 하위 요소인 li태그를 배열로
let liArrays = menu2.getElementsByTagName("li");
//li태그를 하나씩 접근해서 일일히 글자색을 변경
for(let i=0; i<liArrays.length; i++){
let li = liArrays[i];
li.style.color = "blue";
}
}
[자바스크립트 코드]
$(document).ready(function(){
$("#menu2 li").css("color", "#f00");
})
[jQuery코드]
자바스크립트의 경우는 getElenmentId, getElementByTagName으로 변수 지정하며 for문을 돌려 코드가길지만, jQuery는 2줄에 같은 의미를 전달한다.
jQuery를 이용한 노드(=웹 요소 = html태그들) 찾기
let $변수 이름
= $(“CSS 선택자”)
➡️ 가장 기초적인 노드 찾는 방법
$()
의 정체
- $()
를 jQuery라고 생각하지만, 사실 $()
은 그냥 함수를 호출하는 것.
- 함수 이름이 $()
인 함수를 호출하는 것.
- $()
함수의 역할은 선택자에 해당하는 노드를 찾아주는 역할을 함.
선택자
- 말 그대로 CSS의 선택자를 의미한다.
- 찾고 싶은 선택자를 만들어 $()
함수에 매개변수 값으로 넣어주면 된다.
let $변수 이름
- $()
함수에서 리턴해주는 값을 저장하기 위해서 만든 변수일 뿐이다.앞에 $
를 붙이 이유는 jQuery기능이 들어있는 변수를 표현하기 위함.
CSS의 선택자 기능으로 jQuery의 기능 연관성이 높다.
이벤트(event)등록
$("대상").on(“이벤트 이름“, ”이벤트리스너“);
또는 $("대상").단축이벤트함수(이벤트리스너);
스타일 설정하기
$("대상").css(“스타일 이름“, 값);