[jQuery] 제이쿼리 recap

🌞jQuery 란? 

• HTML의 요소들을 조작하는 편리한 Javascript를 미리 작성해둔 것이다. (JS 라이브러리)
• 즉, 미리 작성된 JS코드이다. 다른 사람이 짜둔 코드를 가져와서 사용하는 것이기 때문에 쓰기 전에 import 를 해야 합니다. 
• jQuery를 쓰면 javascript보다 더 직관적이고 간편하게 쓸 수 있다.

▶JS와 jQuery 코드 비교

//JS 코드
document.getElementById('element').style.display = 'none';

//jQuery ver 좀 더 직관적인 코드 
$('#element').hide();

 

🌞jQuery 사용방법 

직접 파일을 가져와서 쓰는 방법도 있지만 google CDN을 통해서 코드 임포트 후 사용한다. 

//google CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

---

🌞jQuery 사용하기 

주의❗ jQuery가 하는 일은 많이 있습니다. 스크롤의 움직임을 감지한다거나, 화면 사이즈를 안다거나 등등 
그렇기 때문에 모든 것을 암기하는 것이 아니라 필요에 따라 찾아서 사용하면 됩니다. 

🌞자주 사용하는 기능 배워보기

jQuery의 경우, 주로 CSS selector 클래스(.)말고 아이디(#)를 이용해서 HTML 엘레멘트를 가져온다.

1. input 박스의 값을 가져오기

• 우선 내가 가져오고자 하는 input 박스에 아이디를 줍니다. (아래 예시에서는 url)
• 보통 아래와 같이 제이쿼리 메소드의 입력값을 주면 값을 update하고 아무 값도 전달하지 않으면 해당 내용에 대한 정보를 리턴해줍니다. 

윗줄은 input박스에 입력을 하고 싶다 라는 value를 넘겨주는 기능을합니다.

2. div 보이기 / 숨기기

• 제이쿼리가 매우 직관적인 코드라는 점을 아주 잘 보여주는 예시입니다. 
• 제이쿼리객체.hide()를 하면 화면에서 가려주고 다시 보여주려면 show()를 하면 됩니다. 

3. 태그 내에 html 입력하기 

- append()메소드를 사용하면 기존 요소의 내부에 새로운 요소나 콘텐츠를 추가할 수 있습니다. 

(이 외의 다른 메소드는 해당 주소를 참고:https://araikuma.tistory.com/609)

• append(htmlString)메소드: 선택된 요소의 마지막에 새로운 HTML요소나 콘텐츠를 추가 
• 주의할 점은 자식요소가 아니라 부모요소(맥락상 자식요소를 감싸고 있는 컨테이너)에 id값을 주고 거기에 append메소드를 통해 자식요소의 마지막에 html요소를 추가하는 것입니다. 

let temp_html = `<div class="col">
            <div class="card">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">여기에 제목이 들어갑니다.</h5>
                    <p class="card-text">여기에 내용이 들어갑니다.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">여기에 코멘트가 들어갑니다.</p>

                </div>
            </div>
        </div>`;
$('#card-box').append(temp_html);

-> `<button>버튼</button>` 처럼 백틱 안에 html요소를 담아서 card-box라는 요소의 마지막에 내가 만든 html 요소를 추가하는 기능을 한다. 즉, append(내가만든html요소) 를 통해 얼마든 지 새로운 컨텐츠를 추가해줄 수 있다는 뜻이다.

 

▶append 활용하기 (내가 만든 html요소의 내용을 수정해서 추가하기)

let mytitle = '감자공주';
let temp_html = `<div class="col">
            <div class="card">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">${mytitle}</h5> //여기에 내가 만든 타이틀을 넣어줬음
                    <p class="card-text">여기에 내용이 들어갑니다.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">여기에 코멘트가 들어갑니다.</p>

                </div>
            </div>
        </div>`;
$('#card-box').append(temp_html); // 그 다음 감자공주가 들어간 카드를 마지막 요소로 넣어줬다.

결과물

-감자공주라는 타이틀을 가진 html요소가 마지막에 추가됐다. 

---

🌞jQuery 활용하기

1. 빈칸 체크

 let val = $('#input-q1').val();
    if(val == ''){
        alert('입력해주세요!');
    }else{
        alert(val);
    }

2. 이메일 판별하기

• 이메일 형식이 아닐 경우, 알림 메세지 
• 이메일이 형식이 맞을 경우, 도메인을 알림창에 표시
• JS includes()메소드: 인수로 전달받은 값이 존재하면 t, 아니라면 f 리턴 (주의: 대,소문자를 구별한다)

let input = $('#input-q2').val();
    if(input.includes('@')){
        let domain = input.split('@')[1].split('.')[0];
        alert(domain);

    }else{
        alert('이메일이 아닙니다!');
    }

3. 이름을 입력하면 리스트에 추가해주기 (HTML 붙이기/ 지우기)

//HTML 붙이기
let name = $('#input-q3').val();
    let temp_html = `<li>${name}</li>`;
    $('#names-q3').append(temp_html);
   
//HTML 전부 지우기 

$('#names-q3').empty();

• jQueryObj.empty()의 경우, DOM의 모든 자식요소를 제거한다. 즉 부모요소에 .empty()를 하게되면 자식요소들이 전부 사라진다.