[자바스크립트+jQuery 기초부터 실무까지 : 기초 Part.1] jQuery 기초

[자바스크립트+jQuery 기초부터 실무까지 : 기초 Part.1] 정리

자바스크립트+jQuery 기초부터 실무까지 : 기초 Part.1 강의 - 인프런

 

***

HTML 코드에서 JS 코드를 넣는 <script>를 마지막으로 빼는 것이 좋다.
body 안의 내용을 인식하고 script를 실행시켜줘야 하는 경우가 많기 때문이다.

 

jQuery

• 자바스크립트 라이브러리
• 여러 브라우저에서 동작하는 사용하기 쉬운 API를 통해 HTML 문서 탐색과 조작, 이벤트 처리, 애니메이션, Ajax 등을 훨씬 간단하게 만들어준다.

 

jQuery 사용법

jQuery를 이용한 노드(웹 요소) 찾기

var 변수이름 = $("CSS 선택자");

• $()는 함수 이름이다. 즉, 함수를 호출하는 것이다.
• $() 함수의 역할은 선택자에 해당하는 노드를 찾아주는 역할이다.

 

선택자

• 이름 그대로 CSS의 선택자를 의미한다.
• 찾고싶은 선택자를 만들어 $() 함수에 매개변수 값으로 넣어주면 된다.

 

이벤트 등록

// 1
$대상.on("event name", "eventListener");

// 예시
$(document).ready(funtion() {
	$("#btnCheck").on("click", funtion(){});
}


// 2
$대상.단축이벤트함수(이벤트리스너);

 

스타일 설정하기

$(document).ready(funtion(){
	$("#dkdkdkd").css("border", "4px solid #f00);
});

 

jQuery 활용 예제

활용 전

window.onload = function() {
	var menu2 = document.getElementById("menu2");
	var liArrays = menu2.getElementsByTagName("li");

	for(var i=0; i<liArrays.length; i++) {
		var li = liArrays[i];
		li.style.color = "blue";
	}
}

활용 후

$(document).ready(function() {
	$("#menu2 li").css("color", "#f00");
});