jQuery
- 크로스 브라우징(호환성), 애니메이션 효과 등을
쉽게 구현할 수 있는 자바스크립트 라이브러리이다.- css 선택자를 활용하여 객체조작이 가능하다.
- 라이브러리이므로 외부파일을 프로젝트 내 (작업페이지)에 삽입하여 사용해야한다.
네트워크 전송 방식
- 네트워크 경로 활용 : 네트워크의 절대경로를 활용한다.
-제이쿼리 사이트에서 download 메뉴로 들어가 CDN 목록을 복사 후 내 페이지에 삽입한다. - 간단한 테스트를 할 경우 사용한다.
- 네트워크가 차다니된 프로젝트에서는 쓰일 수 없다.
다운로드 방식
- 제이쿼리 사이트에서 download 메뉴로 들어가 js파일 다운로드 한다.
- 실제 운영되는 프로젝트에 삽입한다.
- min이라 붙은 파일은 1줄로 가볍게 만들어진 라이브러리이며, 주로 이 파일을 삽입하여 쓰인다.
<script type="text/javascript" src="resources/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
/*
식별자명으로 사용할 수 있는 특수기호 -> $, _
*/
console.log(jQuery, '제이쿼리');
console.log($, '제이쿼리 $');
//제이쿼리 함수 실행시 css선택자를 인수로 삽입하여 실행할수있다.
console.log(jQuery('body'), '제이쿼리 함수 실행 후');
console.log($('body'), '제이쿼리 $ 함수 실행 후');
//제이쿼리 함수 실행후 제이쿼리 객체가 반환되어야 제이쿼리 메서드 활용이 가능하다. (자바스크립트와 똑같이 사용된다.)
//제이쿼리 함수 실행후 제이쿼리 객체가 반환되어 click 메서드 활용
//마지막에 호출된 메서드가 제이쿼리 객체라면 체이닝기법으로 도트연산자 활용가능
//문자열,숫자가 나오면 .못찍음
$('body').click(function(){
}).click(function(){
});
console.log($('body').click(function(){
}), '클릭메서드 호출 후');
</script><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>제이쿼리 선택자</title>
<script type="text/javascript" src="resources/js/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>제이쿼리 선택자</h1>
-제이쿼리 함수에 인수로 css 선택자를 삽입하여 객체를 선택이 가능하다.
-인수에 해당되는 element 객체를 찾아 제이쿼리 객체에 담아 반환을 해준다.
-제이쿼리 메서드를 통하여 dom객체 검색도 가능하다.
<h2>직접 선택자</h2>
-제이쿼리 함수
-css 선택자 : 아이디, 클래스, 속성, 속성과 값, and, or, 상하관계
-동일한 선택자를 활용하여 직접선택자로 여러번 객체를 조회시 배열객체가 조회한만큼 생성이된다.
<div id="myDiv">div</div>
<button type="button" class="myBtn">myBtn</button>
<button type="button" class="myBtn">myBtn</button>
<button type="button" class="myBtn">myBtn</button>
<script type="text/javascript">
//대상 1개
$('#myDiv').click(function(){
console.log('myDiv');
});
//제이쿼리 직접 선택자로 객체를 검색하여 배열에 element 담아서 반환
//이벤트 등록시 배열에 담긴 모든 element 객체에 이벤트를 등록해준다.
var $myBtn = $('.myBtn');
$('.myBtn').click(function(){
console.log('myBtn');
});
//on - 이벤트 등록, off - 이벤트해제 $('.myBtn').off('click');
//$myBtn.off(); //인수가 없을 경우, 모든 이벤트 해제
$myBtn.on('click', function(){
console.log('myBtn 2');
});
</script>
<h2>인접 관계 선택자</h2>
-조회된 객체에 상위 혹은 하위요소 검색에 활용되는 메서드
-상위 : 객체.parent(), 객체.parents('선택자');
-객체.parent() : 조회된 객체 1단계 위 상위요소
-객체.parents() : 모든 상위요소를 배열에 담아 반환
-객체.parents('선택자') : 모든 상위요소 중 인수에 해당되는 상위요소를 찾아 객체반환
-하위 : 객체.children(), 객체.children('선택자');
-객체.children() : 조회된 객체 1단계 아래의 하위요소를 배열(제이쿼리 객체)에 담아 반환
-객체.children('선택자') : 조회된 객체 1단계 아래의 하위요소 중 일치하는 대상을 배열(제이쿼리 객체)에 담아 반환
-하위요소 전체 중 검색 : 객체.find('선택자') -> 하위요소 중 인수와 일치하는 대상을 전체 찾아 배열(제이쿼리 객체)에 담아 반환
<h3>parent, parents</h3>
-상위 요소 1단계 검색, 상위요소 전체 혹은 전체 중 검색
<ul>
<li>
<button type="button" class="liBtn">liBtn</button>
</li>
<li>
<button type="button" class="liBtn">liBtn</button>
</li>
<li>
<button type="button" class="liBtn">liBtn</button>
</li>
</ul>
<script type="text/javascript">
$('.liBtn').click(function(){
console.log(this, 'element 객체');
//제이쿼리 메서드를 활용하기위해서는 element 객체를 제이쿼리 객체에 담아야한다.
//직접 선택자 -> css 선택자, element, html 문자열
console.log($(this).parent(), 'parent');
console.log($(this).parents(), 'parents');
console.log($(this).parents('li'), 'parents li');
});
</script>
<h3>children, find</h3>
-하위요소 1단계 전체 검색, 모든 하위요소 중 인수에 해당되는 대상 검색
<ul>
<li class="my-li">
<span class="a">안녕</span>
<span class="a">하세요.</span>
<span>
<button type="button" class="ch-btn">하위요소버튼</button>
</span>
</li>
<li class="my-li">
<span class="a">안녕</span>
<span class="a">하세요.</span>
<span>
<button type="button" class="ch-btn">하위요소버튼</button>
</span>
</li>
</ul>
<script type="text/javascript">
$('.my-li').click(function(){
//1단계 아래의 요소를 배열에 담아 반환
console.log($(this).children(), 'children');
//1단계 아래의 요소 중 인수에 해당되는 대상을 찾아 배열에 담아 반환
console.log($(this).children('.a'), 'children .a');
//하위 요소 중 인수에 해당되는 대상만 찾아 배열에 담아 반환
console.log($(this).find('.ch-btn'), 'find .ch-btn');
});
</script>
</body>
</html>
기록하는 삶