20211111 제이쿼리 01

제이쿼리?

- 호환성 체크 및 애니메이션 효과를 쉽게 사용할 수 있도록 만들어진 라이브러리
- 제이쿼리를 사용하기 위해서는 제이쿼리 파일이 필요하다.

 

 <script type="text/javascript" src="jquery-3.6.0.min.js"></script>

console.log(jQuery, 'jQuery');
console.log($, '$');
console.log($(), '$');

$() -> 선택기(선택자로 객체를 검색)
인수(선택자)에 해당되는 객체를 찾아 반환
제이쿼리 객체가 반환되어야 제이쿼리 메서드를 사용할 수 있다.

console.log($('body'), "$('body')");
console.log($(document), "$('document')");
console.log($('<ul><li>안녕하세요.</li></ul>'), "$('<ul><li>안녕하세요.</li></ul>')");

 

 

 

ready - 문서 로딩 완료 후에 실행되는 메서드
문서 로딩 완료 이후에 실행되므로 
코드 순서 상관없이 객체 검색이 된다.

$(document).ready(function(){
			console.log('문서 로딩 완료');
			console.log($('h2','문서로딩완료 후에 객체 검색'));
		});
		
		$(function(){
			console.log('문서 로딩 완료2');
			console.log($('h2','문서로딩완료 후에 객체 검색'));
		})
        
 <h2>안녕하세요.</h2>

 

---

인접관계 선택자

- 선택기로 객체 검색 이후 메서드를 활용하여 상하요소의 객체를 검색할 수 있다.

 

상위 요소 검색

- .parent() -> 상위 요소 객체 검색
- .parents('선택자'); - > 상위 요소 전체 중 인수에 해당되는 객체 검색

 

	<ul>
		<li>
			<button type="button" class="myBtn">클릭</button>
		</li>
		<li>
			<button type="button" class="myBtn">클릭</button>
		</li>
	</ul>

 

$(function(){
			$('.myBtn').click(function(){
				console.log(this, 'j click');
				//제이쿼리 메서드를 활용하기 위해서는 this 키워드를 제이쿼리선택기에 삽입하고
				//제이쿼리 객체를 반환 받는다.
				console.log($(this).parent(), 'parent > li');
				console.log($(this).parents('ul'), 'parent> ?');
			});
		});

---

하위요소 검색

.children() - 선택된 객체의 하위요소 1단계 아래 전체 검색, 
인수가 있을 경우 인수에 해당되는 하위요소 1단계 아래 검색