웹개발종합 (3) -jQuery

1. jQuery란?
   : HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리!
   전문 개발자들이 짜둔 코드를 가져와서 사용하는 것이므로, 쓰기 전에 "임포트"를 꼭 해야함

- 임포트하기 (head 부분에 입력)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

2. jQuery 사용해보기

" jQuery에서는 class가 아닌 id로 이름을 지정해줌 "

$('#url').val('입력을 하고 싶다');
(= id가 url인 것에 jQuery를 적용할것이다.밸류를 넣을것이다'입력을 하고싶다'라는)

 --> id를 url로 지정했던 url칸에 '입력을 하고 싶다'가 입력되는 결과값 나옴

jQuery 예시1. 기본문

입력값이 공백이면 "입력하세요",공백이 아니면 입력값을 도출하는 얼럿띄우기

1) jQuery 부분
<script>
	function 버튼1() {
		let 임의지정1 = $('#입력창id1').val();
        if (임의지정1 =='') { 
        	alert('입력하세요')
        } else {
        	alert(임의지정1)
        }
    }            
</script>

2) HTML 부분
<div class="question-box">
<input id="입력창id1" type="text" /> <button onclick="버튼1()">클릭</button>
</div>

jQuery 예시2. 텍스트 일부를 나누기, 특정 문자를 포함하는지 여부 확인방법

입력값이 이메일이 아니면 "이메일이 아닙니다", 이메일이면 도메인만 얼럿 띄우기

1) jQuery 부분
<script>
	function 버튼2() {
    	let 임의지정2 = $('#입력창id2).val();
    	if (임의지정2.includes('@')) {
    		alert(임의지정2.split('@')[1].split('.')[0]
        } else {
        	alert('이메일이 아닙니다')
        }
    }

</script>

2) HTML 부분
<div class="question-box">
<input id="입력창id2" type="text" /> <button onclick="버튼2()">클릭</button>
</div>

jQuery 예시3. temp_html 태그를 만들어 붙여주는 방법

목표 : 이름을 입력하고 클릭하면 리스트에 추가기재되게 하기

1) jQuery 부분
<script>
	function 버튼3() {
    	let 임의지정3 = $('#입력창id3').val();
        let temp_html = `<li>${임의지정3}</li>`
  /// ~키에 함께있는 `를 입력해주어야 함(작은따옴표 아님!!!!!)
  		$('#리스트').append(temp_html)
        }
</script>

2) HTML 부분
<div class="question-box">
<input id="입력창id3" type="text" placeholder="여기에 이름을 입력" />
<button onclick="버튼3()">이름 붙이기</button>
<ul id="리스트">
<li> 보라 </li>
</ul>
</div>

** 리스트 내의 목록을 모두 지우기
<script>
	function 버튼4(){
		$('#리스트').empty()
</script>