80일차(2022.04.20) _ jQuery

- JavaScript 라이브러리
- 기존의 JS 코드의 복잡성을 개선하기 위해 사용
- 최근에는 React, Vue를 사용, jQuery는 하락세

 

https://www.w3schools.com/jquery/default.asp

jQuery Tutorial

 

https://www.w3schools.com/jquery/jquery_ref_overview.asp

jQuery Reference

 

---

1. 환경 설정

1. 라이브러리 다운 방식
 - jquery 코드를 다운 후 서버에 저장하여 사용하는 방식

2. CDN 방식
 - 클라우드에 있는, 분산된 서버에 데이터를 저장해 사용자에게 전달하는 시스템

3. 적용
 - jquery를 사용하려는 페이지마다 script를 작성
 - 이외 스크립트 파일이 있다면 가져온 jquery 스크립트 태그 아래에 작성해야 함(충돌 시 순서에 따라 적용)

 

---

2. 기본 문법

- $("선택자") . 취할함수명(); 

- 선택자 : CSS 선택자와 동일함, 문자열 형식으로 만들어야 함

 

---

3. Event 등록

 

- 이벤트 이름은 JS와 동일함
1. $('선택자').이벤트명(익명함수선언 혹은 함수호출);

2. $('선택자').on('이벤트명', 익명함수선언 혹은 함수호출);
 - 하나의 선택자에 여러 개의 이벤트를 동시에 등록할 때 사용
 - $('선택자').on({
   이벤트명1 : 익명함수선언 혹은 함수호출,
   이벤트명2 : 익명함수선언 혹은 함수호출,
   .... 반복
   });

3. 이벤트 전달
- $("부모선택자")on("이벤트명", "전달(위임)받을자식선택자", 익명함수선언 혹은 함수호출);

 

설명1. 클래스 선택자에 대해 반복문을 돌리지 않아도 된다.

 

    <input type="checkbox" name="ch" class="ch" value="1">
    <input type="checkbox" name="ch" class="ch" value="2">
    <input type="checkbox" name="ch" class="ch" value="3">
    <input type="checkbox" name="ch" class="ch" value="4">
        
 <script type="text/javascript">
 
	$("#btn").on("click", function(){
		alert("jquery");
	});
	
	$('#btn2').click(function(){
		alert('2');
	});

	<!-- 기본 JS 코드 -->
    const ch = document.querySelectorAll('.ch');

    for(c of ch) {
        c.addEventListener("click", function(){
            console.log(1);
        })
        
    }
    
    <!-- jQuery -->
    $('.ch').click(function(){
        console.log(1);
    })
</script>

 

우리가 클래스 선택자에 대해 DOM 요소를 가져오게 되면,

배열로 가져오기 때문에 배열 자체에는 이벤트를 걸 수가 없었다.

그래서 반복문을 돌려서, 배열 안의 각각의 요소들에 이벤트를 걸었었다.

 

하지만 jQuery는 반복문을 돌리지 않아도 된다.

클래스 선택자에 대해서 각각 알아서 이벤트를 걸어주기 때문이다.

 

---

설명2. 다중 이벤트

 

    $('.ch').on({
        click:function(){
            console.log('click');
        },
        change:function(){
            console.log('change');
        }
    })
    
	// 나눠서 적용할 경우
    $('.ch').click(function(){
        console.log('click');
    })
    $('.ch').change(function(){
        console.log('change');
    })

 

이렇게 하나의 선택자에 다른 종류의 이벤트들을 걸어야 할 때 

위와 같이 간단하게 적용할 수 있다.

on을 사용하면 하나의 코드에 여러 이벤트를 걸 수 있고, 아래와 같이 나눠서 적용할 수도 있다.

 

---

설명3. 이벤트 전달

	<div id="fileResult">
  
	</div>
    
<script>
	let fileInput = '<div class="row mb-3"><label for="files" class="col-sm-2 col-form-label">File</label><div class="col-sm-10"><input type="file" name="files" class="form-control" id="files">';
	fileInput += '<button type="button" class="btn btn-primary">delete</button></div></div>';
	
	$('#addBtn').click(function(){
		$('#fileResult').append(fileInput);
	})
	
	$('#fileResult').on("click", ".del", function(){
		console.log('del');
	})
	
</script>

 

위의 상황은 fileResult라는 부모요소에 Add버튼을 누르면 파일입력태그와 del이라는 버튼을 추가하도록 했고,

del 버튼을 눌렀을 때 이벤트가 발생하도록 설정한 것이다.

del 버튼은, 동적으로 생성되는 요소이기 때문에 이벤트 전달을 통해서 이벤트를 걸어주어야 한다.

원래대로라면 if(event.target.classList('del')) 으로 전달을 해주어야 하지만,

jQuery에서는 간단하다. 매개변수로 전달할 요소의 선택자만을 명시해주면 끝이다.

 

---

4. Get

1. Text Node 반환 - $('선택자').text() : JS의 innerText
2. HTML Node 반환 - $('선택자').html() : JS의 innerHTML

3. Attribute Node 반환
 1) $('선택자').attr('속성명') : JS의 getAttribute('속성명')
  - id, title, data-*** 등 상태가 변해도 값이 변하지 않는 속성을 가져올 때
 2) $('선택자').prop('속성명') : JS의 checked, selected 등
  - selected, checked 등 상태가 변할 때 값도 변하는 속성을 가져올 때
 3) $('선택자').val() : JS의 value
  - 입력 태그의 value속성의 값을 반환

** HTML Element 의 구성
<태그명 속성1="값1" 속성2="값2"...>contents</태그명>
<태그명 속성1="값1" 속성2="값2"...>
* 속성
 - 공통 속성 : 어떤 Element든 공통으로 가지고 있는 속성들 (id, class, title, data-*** 등등)
 - 개별 속성 : 특정 Element에만 있는 속성들 (value, name, checked, selected 등등)

 

---

5. this

 

    $('.ch').click(function(event){
        console.log(this);
        console.log($(this));
        console.log(event.target);
    })

 

 

기본 JS에서는 event.target으로 클래스 선택자나, 이벤트 전달을 했을 경우

현제 클릭한 요소가 무엇인지를 받아왔었다.

이는 this를 통해서도 클릭한 해당 요소를 가져올 수 있다.

즉, 클릭한 해당 요소의 선택자를 가져오게 되는 셈이다.

 

그렇다면 만약에 value값을 출력하고 싶다면?

기존 JS는 event.target.value 혹은 this.value 라고 하면 되지만,

jQuery를 통해 가져오려면, jQuery문법을 지켜야 한다는 점을 명심하자.

그냥 this.val()을 하면 안되고, 항상 선택자는 $('선택자')로 알려주어야 한다는점.

그래서 $('선택자').val() 을 통해서 값을 가져올 수 있다.

물론 $(event.target).val() 으로 값을 가져올 수도 있다.

 

---

6. Set

 

1. $('선택자').text('문자열')
 - 선택자 내부(Contents)를 해당 문자열로 대체
 - JS에서는 innerText = "문자열"

2. $('선택자').html("HTML 코드")
 - 선택자 내부(Contents)를 해당 HTML코드로 대체
 - JS에서는 innerHTML = "HTML 코드"

3. $('선택자').attr("속성명", 값)
 - 선택자의 속성을 값으로 교체
 - JS에서는 getAttribute = 값
 - prop도 동일한 문법 사용!

4. $('선택자').val(값)
 - 선택자의 value를 값으로 교체
 - JS에서는 선택자.value = 값 

 

설명1. 클래스 선택자에 대해 모든 요소에 동일 값 주기

 

        <input type="checkbox" name="ch" class="ch" value="1">
        <input type="checkbox" name="ch" class="ch" value="2">
        <input type="checkbox" name="ch" class="ch" value="3">
        <input type="checkbox" name="ch" class="ch" value="4">
 
 <script>
    $('.ch').click(function(event){

        $('.ch').prop('checked', true);

    })
</script>

 

위와 같이, 체크박스에 모두 ch라는 클래스를 부여했고,

해당 체크박스들의 속성을 모두 한꺼번에 변경하고 싶다면?

원래 JS는 for문을 돌려서 하나의 요소요소마다 값을 변경하도록 해야 했는데,

jQuery는 for문을 돌리지 않는다고 했다.

즉, 그냥 클래스선택자를 선택하고, 속성값을 set하는 함수를 호출해주면?

해당 클래스명을 가진 모든 요소들의 속성들이 setting한 속성으로 바뀌게 된다.

 

---

7. Add, Remove

 

-Set처럼 대체하는 것이 아니라, 기존 내용에 추가하는 것

1. $('선택자').append("추가할 HTML") : 선택 요소 내부 마지막에 추가
 - JS의 append와 동일
2. $('선택자').prepend("추가할 HTML") : 선택 요소 내부 맨 위에 추가
3. $('선택자').after("추가할 HTML") : 선택 요소 외부의 바로 다음(밑)에  추가 (형제 요소로 추가됨)
4. $('선택자').before("추가할 HTML") : 선택 요소 외부의 바로 이전(위)에  추가 (형제 요소로 추가됨)

- 기존 JS 이용시, createElement를 통해 번거롭게 추가해야 했지만,
   jQuery는 그냥 문자열로 HTML 코드 작성하면 됨

5. $('선택자').remove() : 선택자를 포함하여 하위의 요소들도 모두 삭제
6. $('선택자').empty() : 선택자는 제외하고 하위의 요소들만 모두 삭제

 

---

8. Selector

 

Traversing : 자신을 기준으로 부모, 형제, 자식 요소들을 선택할 수 있음

1. Ancestros(부모)
 - 자신을 기준으로 부모 또는 그 이상을 선택
 1) parent() : 자신의 바로 윗 부모를 선택 (함수 중첩사용 가능, 두번 올라갈려면 두번 사용)
 2) parents() : 자신의 모든 부모를 선택
 3) parents('선택자') : 자신의 모든 부모들 중에서, 명시한 선택자의 부모요소를 선택
 4) parentsUntil('선택자') : 모든 부모들 중에서 해당 선택자 포함하여 그 요소까지의 모든 부모요소를 선택

2. Decendants(자식)
 - 자신을 기준으로 자식들
 1) children() : 자신의 바로 아래의 직계자손 모두를 선택
 2) children('선택자') : 자신의 바로 아래의 직계자손 중에 명시한 선택자의 자손만을 선택
 3) find('선택자') : 직계자손 뿐만 아니라, 모든 후손들을 중에서 명시한 선택자의 자손만을 선택

3. Sibling(형제)
 - 자신을 기준으로 자신과 형제들인 요소를 선택
 - https://www.w3schools.com/jquery/jquery_traversing_siblings.asp 참조

---

9. 반복문

 

1. 기존 JS for문 활용
- for(let i=0;i<$(".클래스명").length;i++){}

2. jQuery each함수 활용
 - $("선택자").each(function(index, item){});
 - index : 반복문의 인덱스 저장
 - item : 배열에서 꺼내온 요소 저장

3. 기본 반복문의 경우
 - let ar = [1, 2, 3];
 - $.each(ar, function(index, item){});
 - 선택자 배열을 반복하는 것이 아니면, 위와 같이 each문의 매개변수로 반복할 배열변수명을 명시해야 함
 - 여기서의 item은 JS객체라, jQuery문법을 사용하지 못함

 

---

10. 이펙트

 

https://www.w3schools.com/jquery/jquery_hide_show.asp

jQuery Effects - Hide and Show

 

jQuery에서는 자동으로 이펙트를 넣어주는 기능들을 제공하고 있다.

위에 사이트에서 확인해보고 사용하면 된다.