jQuery

    제이쿼리
- 경량화, 호환성, 애니메이션 효과등 포함된 자바스크립트 라이브러리 
- css 선택기 활용하여 dom 객체를 쉽게 접근 할 수 있도록 만들어 졌다. 
- 기본 자바스크립트를 가지고 만들어진 라이브러리임으로 제이쿼리 외부파일을 로드 시켜야한다. 

 

 

console.log({jQuery}, 'jQuery 제이쿼리 함수 출력');
console.log({$}, '$ 제이쿼리 함수 출력');

제이쿼리 실행 방법 

아래방법이 간단해서 보통은 아래방법으로 쓰인다.

 

// javascript
const $myBtyEles = 	document.querySelectorAll('mybtn');
$myBtyEles.forEach(item => {
item.addEventListener('click',function () {
console.log(this);
					
	})
});
// jqeury 
	$('css선택자') => document.querySelectorAll('css선택자')
	$('.myBtn').click(function () {
	alert($(this).text());
})

		// javascript
			const $myBtyEles = 	document.querySelectorAll('mybtn');
			$myBtyEles.forEach(item => {
				item.addEventListener('click',function () {
					console.log(this);
					
				})
			});
			// jqeury $('css선택자') => document.querySelectorAll('css선택자')
			$('.myBtn').click(function () {
				alert($(this).text());
			})
	</script>

 

문서로딩 완료 이후에 실행되는 메서드

	<script type="text/javascript">
		const $myBtn01Ele = document.getElementById('myBtn01');
		console.log($myBtn01Ele,'myBtn 요소취득');
		$(document).ready(function () {
			console.log($('#myBtn01').text(),'ready');
		});
		$(function () {
			console.log($('#myBtn01').text(),'function');
		});
		// $(function () {}); < 내가 요소 다그릴때까지 기달려달라 라는 의미
	</script>

이벤트 메서드

 

	<button type="button" id="myBtn01">버튼</button>
	<input type="text" id="myInput">
	
	<script type="text/javascript">
		// jquery 이벤트 등록방법 1
		$('#myBtn01').click(function () {
			
		});
		// jquery 이벤트 등록방법 2-1 
		// (인수가 두개: 이벤트명, 핸들러 함수)
		$('myBtn01').on('click',function () {
			
		});
		// jquery 이벤트 등록방법 2-2(동적바인딩 처리) 
		//(인수가 세개: 이벤트명, css선택자, 핸들러 함수)
		$(document).on('click','myBtn01',function () {
			
		});
		// 이벤트 다중 등록
		// 이벤트 on 메소드(인수1개, 객체)
		$('#myInput').on({
			'input' : function () {
					console.log('input 이벤트 발동');
			},
			'blur' : function () {
				console.log('blur 이벤트 발동');
			}
		});
		$('#myInput').on('input blur',function () {
			console.log('동일 이벤트 처리');
			
		});

인접 관계 선택자
- 상하요소 검색 
- parentElement -> .parent(), .parents('부모 요소 선택자') 
- querySelector, querySelectorAll -> .find('선택자'), .children() 
- prev() : 이전 형제요소, next() : 이후 형제요소

<ul>
		<li>
			<button type="button" class="liBtn">클릭</button>
		</li>
		<li>
			<button type="button" class="liBtn">클릭</button>
		</li>
	</ul>
	
	<ul>
		<li class="cLi">
			<span>
				안녕하세요.
					<small>kmsart1</small>
			</span>
		</li>
		<li class="cLi">
			<span>
				안녕하세요.
					<small>kmsart2</small>
			</span>
		</li>
	</ul>
	
	<script type="text/javascript">
		// 부모 요소 취득  
		$('.liBtn').click(function () {
			const parentEle = $(this).parent().eq(0); //eq(x) x번째 인덱스
			const parentsEle = $(this).parents('ul');
			console.log(parentEle);
			console.log(parentsEle);
		});
		// 자식 요소 취득
		$('.cLi').click(function () {
			const $cLiChildrenEle = $(this).children();
			const $cLiChildesmallEle = $(this).find('small');
			console.log($cLiChildrenEle);
			console.log($cLiChildesmallEle.text());
			console.log($cLiChildesmallEle[0].textContent);
			// 이전 형제 노드 취득
			const $cLiSiblingPrev = $(this).prev();
			console.log($cLiSiblingPrev.find('small').text());
		});
		
		</script>

배열관련 메서드
- 검색된 요소들을 .each 메서드 활용하여 요소 하나씩 순차적으로 접근 한다.

	<ul id="myUl">
		<li>안녕하세요.</li>
		<li>안녕하세요.</li>
		<li>안녕하세요.</li>
		<li>안녕하세요.</li>
		<li>안녕하세요.</li>
	</ul>
	<button type="button" id="ulBtn">클릭</button>
	<script type="text/javascript">
		$('#ulBtn').click(function () {
			const $myUILiEles = $('#myUl>li');
			console.log($myUILiEles);
			[...$myUILiEles].map((item,idx)=>console.log(item,'||',idx));
			/*자바스크립트 map하고는 똑같은데 item idx 순서가 다르다 
			$myUILiEles.map(function (item) {
				console.log(item);*/
			})
			$.each($myUILiEles,function (idx, item){
				console.log(`${idx}번째 li태그 : ${$(item).text()}`);
		});
		
	</script>

attr, removeAttr
-getAttribute, setAttribute  : attr('속성명', '속성값') -> 첫번째 인수만 있다면 첫번째 인수에 해당되는 속성의 값만 가지고 온다.
인수가 2개라면 첫번째 인수값에 해당되는  속성을 2번째 인수값으로 삽입 
-removeAttribute : removeAttr('제거 할 속성') -> 첫번째 인수에 해당되는 속성을 찾아 제거

	<label>
		<input type="radio" class="userList" name="userList" value="0001"
		data-user-name="홍길동"
		data-user-age="20"
		checked="checked"
		>
	</label>
	<label>
		<input type="radio" class="userList" name="userList" value="0002"
		data-user-name="이순신"
		data-user-age="25"
		>
	</label>
	  
	<script type="text/javascript">
		$('input[name="userList"]').attr('data-course', 'ICT융합과정');
		$('input[name="userList"]').click(function () {
			// this.value == $(this).val();
			//console.log$($(this));
			//console.log($(this).val());
			//console.log(this.valuse);
			// attr(인수가1개) : 입력한 인수의 속성을 가져온다.
			let classValue = $(this).attr('class');
			let dataUserName = $(this).attr('data-user-name');
			// attr(인수가 2개) : 입력한 인수의 속성을 추가하고 2번재 인수값을 설정한다.
			$(this).attr('data-course','ICT융합과정');
			$(this).attr('checked','checked');

			// removeAttr(인수 1개) : 입력한 속성 제거 
			$(this).removeAttr('data-user-name');
			//javascript : dataSet, jquery : data('카멜로변경') 
			let userAge = $(this).data('userAge');
			$(this).data('data-user-name', '박준철');
			console.log((classValue, '현재 선택된 요소의 클래스'));
			console.log((dataUserName, '현재 선택된 요소의 데이터 속성값'));
			console.log((userAge, '현재 선택된 요소의 데이터 속성값(jqeury.data())'));
		})
	</script>

prop 

	<input type="checkbox" id="allCheck"> 전체 선택 <br>
	<input type="checkbox" class="checks">
	<input type="checkbox" class="checks">
	<input type="checkbox" class="checks">
	
	<script type="text/javascript">
		
		$('#allCheck').click(function () {
			let isChecked = $(this).prop('checked');
			if(isChecked){
				$('.checks').prop('checked',true);
			} else{
				$('.checks').prop('checked',false);
			}
		});
			$('.checks').click(function(){
				if($('.checks:Checked').length == $('.checks').length){
					//checks:Checked"는 class가 "checks"이고 checked 상태인 모든 요소들을 선택하는 jQuery의 선택자입니다.
					$('#allCheck').prop('checked',true);
				}else{
					$('#allCheck').prop('checked',false);
				}
			
			});

val
- value 속성을 다루는 메서드 > form 요소 
- 인수가 없다면 value 속성값을 가지고 온다. 
- 인수가 있다면 value 속성에 값을 대입한다.

 

 

css
- style 속성을 조작하는 메서드 
- 인수가 1개 일 경우 해당 인수에 해당되는 css 속성의 값을 가지고 온다. 
- 인수가 2개 일 경우 첫번째 인수에 해당되는 css 속성에 2번째 인수의 값을 대입한다. 

	<button type="button" id="bgChange">배경색</button>	
	<script type="text/javascript">
		$('#bgChange').click(function () {
				//$('body').css('background-color','pink').css('color','blue');
				$('body').css({'background-color':'darkorange','color': 'blue'});

		})
	</script>

 

 

예시를 보면 제이쿼리는 자바스크립트에 비해서 간편하고 쉬워보인다

 

그런데 왜 안쓰이는걸까?

 

자바스크립트에 비해서 속도가 느리고

 

코드 관리가 어렵다

 

거기다가 최근에는 좋은 대안들이 많이 샹겨서 제이쿼리를 사용할 메리트가 떨어졌다

 

그럼에도 불구하고 레거시 코드 같은경우에는 제이쿼리를 아직도 쓰고 있는 경우가 종종있으므로 어느정도 제이쿼리에 대해서 알필요는 있다