2. 제이쿼리

itboxer91 2020. 11. 22. 20:56

2. 제이쿼리 : HTML에서 작성한 스타일(CSS)을 동적인 스타일 방식으로 적용하는 법

※ 제이쿼리 CDN 링크 방식

 <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
 </head>

2-1) 제이쿼리 형식

<HTML> : 객체
<head> : 객체		<body> : 객체
		<h2>, <section>, <ui> : 태그-요소(기능 + 속성)

* <html> / <head> / <body> 외의 <h2>, <section>, <ui> 등은 태그 혹은 요소라고 지칭하는 듯..

2-2) 제이쿼리 선택자 사용하기

: <body> 영역의 문서 객체 먼저 불러 온 후. 제이쿼리를 활용할 수 있게 해야 한다.

※ $( ) 

1. 내용

<head>
...
<script src="jquery소스"></script>
 
 $(document).ready(function(){
 
 	$(선택자).css("color","red");	
 
 });
 
</head>
<body>
	<p id="txt">내용</p>
</body>

2. 내용

<head>
...
<script src="jquery소스"></script>
 
 $(function(){
 
 	$(선택자).css("color","red");	
 
 });
 
</head>
<body>
	<p id="txt">내용</p>
</body>

2-3) 기본 선택자 - 직접 선택자 + 인접 관계연산자

1) 직접 선택자

구분	종류	사용법	설명
직접 선택자	전체 선택자	$(" * ")	모든 요소를 선택한다.
	아이디 선택자	$(" #아이디명 ")	id 속성에 지정한 값을 가진 요소를 선택한다
	클래스 선택자	$(" .클래스명 ")	class 속성에 지정한 값을 가진 요소를 선택한다.
	요소 선택자	$(" 요소명 ")	지정한 요소명과 일치하는 요소들만 선택한다.
	그룹 선택자	$(" 선택1, 선택2, 선택3 ")	선택1, 선택2, 선택3, 선택 n에 지정된 요소들을 한번에 선택한다.
	종속 선택자	$(" p.txt_1 ")	<p> 요소중 class 값이 tx_1 요소 또는 id 값이 tx_1인 요소를 선택한다.

구분	종류	사용법	설명
인접 관계 선택자	부모 요소 선택자(들)	$("요소선택").parent() $("요소선택").parents()	선택한 요소의 부모 요소를 선택합니다. 선택한 요소의 부모 요소들을 선택합니다.
	가장 가까운 상위요소 선택자	$("요소선택").closest("div")	선택한 요소의 상위 요소 중 가장 가까운 <div> 만 선택한다.
	하위 요소 선택자	$("요소선택 하위요소")	선택한 요소에 지정한 하위 요소를 선택한다.
	자식 요소(들) 선택자	$("요소선택>자식요소") $("요소선택").children()	선택한 요소를 기준으로 자식 관계에 지정한 요소만 선택한다. 선택한 요소의 모든 자식 요소를 선택한다.
	이전 요소(들) 선택자	$("요소선택").prev() $("요소선택").prevAll()	선택한 요소의 바로 이전 요소를 선택한다. 선택한 요소의 이전 요소 모두를 선택합니다.
	지정 이전 요소들 선택자	-	-
	다음 요소(들) 선택자	$("요소선택").next(); $("요소선택").nextAll();	선택한 요소의 다음 요소를 선택한다. 선택한 요소의 다음 요소 모두를 선택한다.
	지정 다음 요소들 선택자	-	-
	전체 형제 요소 선택자	$(".box_1").siblings()	class 값이 box_1인 요소의 형제 요소 전체를 선택합니다.