(jQuery) 제이쿼리 함수, 선택자

jQuery

- 웹 호환성, 애니메이션 효과 등 쉽게 구현 할 수 있도록 만들어진 자바스크립트 라이브러리
- 외부 파일을 읽어서 실행해야 한다
- jQuery 함수로 시작이 된다.

- 라이브러리 셋팅하기 https://jquery.com/  ( 경량화된 min버전으로)

- jquery 라이브러리가 셋팅되어 있어야 사용할 수 있다.

 

 

제이쿼리 함수

- 실행시 제이쿼리 객체가 반환된다.
- 제이쿼리의 메서드가 prototype에 명시되어 있다.

- 실행 후 제이쿼리 객체가 반환되어야 제이쿼리의 메서드를 체이닝 기법으로 사용할 수 있다

//실행되지 않고 jquery 함수가 출력됨
console.log(jQuery);
console.log($); //var $ = jQuery;

//jquery 함수 실행 후 jquery 객체 반환
console.log(jQuery(), '제이쿼리 실행');
console.log($(), '제이쿼리 실행');

 

사용할 수 있는 인수

1. 선택자 - 선택자와 일치하는 객체를 찾아 제이쿼리 객체에 배열로 저장
2. dom - dom 객체를 제이쿼리 객체에 저장
3. html문자열 - 문자열에 해당되는 dom객체를 생성후 제이쿼리 객체에 저장

console.log($('body'), '선택자를 인수에 삽입');
	
var h1 = document.querySelector('h1');
console.log($(h1), 'dom객체 인수에 삽입');

console.log($('<div>안녕하세요</div>'), 'dom객체 인수에 삽입');

 

 

onload 기능

- html 문서가 다 읽어 졌다면(자바스크립트 실행 준비가 되었다면)

- $(document).ready(function(){});을 $(function(){});으로 생략해서 쓸 수 있다

$(document).ready(function(){
	console.log('문서 읽기 완료 이후 실행');
});

$(function(){
	console.log('ready 메서드와 동일한 기능');
	console.log($('h3'), '아래의 html 요소 찾기');
});

 

 

람다 표현식

//1. 기본함수 선언 후 호출
function myFn(){
	console.log('myFn');
}
myFn();
//2. 익명 함수 선언 후 호출
var myFn2 = function(){
	console.log('myFn2');
}
myFn2();
//3. 람다식으로 익명함수 선언 후 호출
var myFn3 = (a,b)=>{
	console.log('myFn3',a,b);
}
myFn3(1,2);

//크로져 가능
((m)=>{
	console.log(m)
})('한국스마트정보교육원');

 

 

 

 

제이쿼리 선택자(직접 선택자)

- 제이쿼리 함수를 실행시 인수에 css선택자가 삽입
- id, class, 태그명, 속성, 속성명과 속성값, 가상선택자

- and, or 활용 가능

<div class="div01">안녕하세요.</div>
<input type="checkbox" class="myCheck" value="1" checked>

<script type="text/javascript">
	console.log($('.div01'));
	console.log($('.myCheck:checked'));
</script>

 

인접관계 선택자

- 검색된 객체에서 제이쿼리 메서드를 활용하여 상하관계의 객체를 검색 할 수 있다.

parent, parents

- parent : 검색된 객체의 한단계 상위 객체 선택
- $('선택자').parent();
- parents : 검색된 객체의 모든 상위 객체 선택, 인수값이 있다면 인수에 해당되는 상위 객체만 반환
- $('선택자').parents('상위선택자');

<ul>
	<li>
		<button type="button" class="btn01">버튼</button>
	</li>
	<li>
		<button type="button" class="btn01">버튼</button>
	</li>
	<li>
		<button type="button" class="btn01">버튼</button>
	</li>
</ul>
<script type="text/javascript">
	$(function(){
		$('.btn01').click(function(){
			console.log(this);
			//제이쿼리 함수 실행시 dom객체 삽입
			//parent 상위 한단계 위 객체를 찾아 제이쿼리 객체에 담아 반환
			var parent = $(this).parent();
			console.log(parent);
			
			//parents 상위 모든 객체 반환
			var parents = $(this).parents();
			console.log(parents, 'parents');
			
			//parents 상위 모든 객체 반환
			var parents2 = $(this).parents('ul');
			console.log(parents2, 'parents 인수 ul');
		});
	});
</script>

 

children, find

- children : 선택된 객체 1단계 아래 하위 전체 요소 객체 반환, 
인수값이 있다면 인수에 해당되는 1단계 아래 하위 요소 객체만 반환
- children('선택자');
- find : 하위 요소 중 인수값에 해당되는 객체만 반환 (querySelector와 똑같다)
- find('선택자');

<div class="div02" style="border: 1px solid #000;">
	<ul>
		<li>안녕하세요.</li>
		<li>안녕하세요.</li>
		<li>안녕하세요.</li>
	</ul>
	<h5>서브타이틀</h5>
	<article>본문내용</article>
</div>
	
<script type="text/javascript">
	$(function(){
		$('.div02').click(function(){
			var child01 = $(this).children();
			console.log(child01, 'children');
			
			var child02 = $(this).children('h5');
			console.log(child02, 'children 인수 h5');
			
			var find01 = $(this).find('li');
			console.log(find01, 'find 인수 li')
		})
	});
</script>

 

실습1. 아래의 버튼 클릭시 해당 행을 제거 하시오.

<ul>
	<li>
		<div><button type="button" class="delBtn">제거</button></div>
	</li>
	<li>
		<div><button type="button" class="delBtn">제거</button></div>
	</li>
    <li>
		<div><button type="button" class="delBtn">제거</button></div>
	</li>
</ul>

풀이

$(function(){
	$('.delBtn').click(function(){
		console.log($(this).parents('li'));
		$(this).parents('li').remove();
	});
});

 

실습2. 아래의 버튼 클릭시 해당 행의 input 값을 'ksmart'으로 변경하시오.

( val() : 인수가 없다면 value 값 가지고 오기, 인수가 있다면 value 값 변경 )

<ul>
	<li>
		<div><button type="button" class="updateBtn">변경</button></div>
		<div><input type="text" class="userName" value="한국스마트정보교육원"></div>
	</li>
	<li>
		<div><button type="button" class="updateBtn">변경</button></div>
		<div><input type="text" class="userName" value="한국스마트정보교육원"></div>
	</li>
	<li>
		<div><button type="button" class="updateBtn">변경</button></div>
		<div><input type="text" class="userName" value="한국스마트정보교육원"></div>
	</li>
</ul>

풀이

$(function(){
	$('.updateBtn').click(function(){
		$(this).parents('li').find('.userName').val('ksmart');
	})
});