간단한 jquery 문법

먼저 jquery를 사용하려면 head태그안에

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

이렇게 import를 시켜줘야 합니다.

---

val() 함수 이용하기 ▼

val() 함수는 어떠한 요소의 값을 가져올 때 사용합니다.

<input id="input" type="text"/>

위와 같은 input 태그의 값을 가져오려면

$('#input-q1').val()

라고 쓰면 값을 가져올 수 있고 이 값을 변수에 넣어서 사용할 수 있습니다.

---

버튼을 클릭했을 때 요소를 숨기고 보여주는 기능 만들기 ▼

<script>
  function open(){
    $('#hideshow').show()
  }
  function close(){
    $('#hideshow').hide()
  }
</script>
<div id="hideshow">기능이 사용될 요소</div>
<button id="hide-btn" onclick="close()">숨기기</button>
<button id="show-btn" onclick="open()">보여주기</button>

위처럼 코드를 작성하면 만들 수 있습니다.

---

입력한 값 추가, 모든 값 삭제 ▼

<script>
	 function q3() {
            let txt = $('#input-q3').val()
            let temp_html = `<li>${txt}</li>`
            $('#names-q3').append(temp_html)
        }

     function q3_remove() {
            $('#names-q3').empty()
        }
</script>
<input id="input-q3" type="text" placeholder="여기에 이름을 입력"/>
<button onclick="q3()">이름 붙이기</button>
<button onclick="q3_remove()">다지우기</button>
<ul id="names-q3">
    <li>세종대왕</li>
    <li>임꺽정</li>
</ul>

위의 코드처럼

$('#아이디명').append(추가할요소)

이렇게 작성하는데, 유의할 점은
append() 괄호안에오는 추가 할 요소는,
백틱(숫자1옆에기호)으로 값을 넣어줘야하고,
JS에서는 ${} 기호안에 변수를 넣어서 사용 할 수 있다.

그리고, 해당요소의 모든 값을 지울때는 empty() 를 활용한다!

---

split을 활용해서 원하는 값만 출력하기 ▼

이메일 값을 받아서 도메인부분만 가져오려면 어떻게 해야할까?

ex) name@gmail.com 에서 gmail만 가져오기!

<script>
	function q2() {
            let txt = $('#input-q2').val()
            if(txt.includes('@')){
              alert(txt.split('@')[1].split('.')[0])
            } else{
              alert('이메일이 아닙니다.')
            }
        }
</script>

<h2>2. 이메일 판별 함수 만들기</h2>
<h5>2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기</h5>
<h5>2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기</h5>
<h5>2-3. 이메일 도메인만 얼럿 띄우기</h5>
<input id="input-q2" type="text"/>
<button onclick="q2()">클릭</button>

이렇게 간단한 jquery 문법을 배워봤는데,
jquery는 처음해봤는데 문장도 짧고 사용법도 쉬워서 요긴하게 쓸 수 있을것 같다!