jQuery

jQuery 란

자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리

• DOM과 관련된 처리를 쉽게 구현
• CSS 선택자를 이용하여 쉽고 편리하게 요소를 선택
• 일관된 이벤트 연결을 쉽게 구현
• 시각적 효과를 쉽게 구현
• Ajax 애플리케이션을 쉽게 개발

jQuery 기본

jQuery(document).ready()
문서가 준비 완료되면 매개변수로 전달된 함수를 실행하는 의미

<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	//window.onload=function(){};
	
	$(document).ready(function(){
		alert('Hello World!!');
	});
</script>

jQuery 선택자

전체 선택자

HTML 페이지에 있는 모든 문서 객체를 선택하는 선택자

<script>
$(document).ready(function(){
$(‘*’).css(‘color’,’red’);
});
</script>

태그 선택자

HTML 페이지 있는 문서 객체를 태그 이름으로 선택하는 선택자

<script>
$(document).ready(function(){
$(‘h1’).css(‘color’,’orange’);
});
</script>

아이디 선택자

HTML 페이지 안의 특정 ID 속성을 가지고 있는 문서 객체를 선택하는 선택자

<script>
$(document).ready(function(){
$(‘#target’).css(‘color’,’red’);
});
</script>

클래스 선택자

HTML 페이지 안의 특정 class 속성을 가지고 있는 문서 객체를 선택하는 선택자

<script>
$(document).ready(function(){
$(‘.item’).css(‘color’,’red’);
});
</script>

자식 선택자

자식 선택자는 자식을 선택하는 선택자이며 ‘부모 > 자식’의 형태로 사용

<script>
$(document).ready(function(){
$(‘body > div’).css(‘color’,’red’);
});
</script>

후손 선택자

후손 선택자는 이름 그대로 후손을 선택하는 선택자. ‘요소 A 요소 B’의 형태로 사용하여 요소
A의 후손으로 범위를 한정

<script>
$(document).ready(function(){
$(‘body div’).css(‘color’,’red’);
});
</script>

속성 선택자

속성 선택자는 태그이름에 속성을 조합해서 선택하는 방식

선택자 형태	설명
요소[속성]	특정 속성을 가지고 있는 문서 객체를 선택
요소[속성=값]	속성 안의 값이 특정 값과 같은 문서 객체를 선택
요소[속성~=값]	속성 안의 값이 특정 값을 단어로써 포함하는 문서 객체를 선택
요소[속성^=값]	속성 안의 값이 특정 값으로 시작하는 문서 객체를 선택
요소[속성$=값]	속성 안의 값이 특정 값으로 끝나는 문서 객체를 선택
요소[속성*=값]	속성 안의 값이 특정 값을 포함하는 문서 객체를 선택