jQuery 활용하기

1. CallBack 함수란?

· JavaScript는 순차적으로 한 줄씩 실행, 하지만 해당 효과가 끝나지 않은 상황에서도 다음 구문을 실행하기 때문에

  오류가 발생할 수 있어 이러한 문제점을 방지하기 위해 콜백 함수를 사용한다.

  → 즉, 순차적인(동기적) 처리가 필요한 경우 사용

 아래 예제를 보면

 콜백 함수를 사용하지 않은 경우, hide 효과가 끝나기도 전에 alert 발생
 콜백 함수를 사용한 경우, hide 효과가 완료된 후 순차적으로 alert 발생

 

2. 속성 조작 메서드

1) 컨텐츠 가져오기
· $("").text(): 선택한 요소의 text만 가져옴 
· $("").html(): 선택한 요소의 태그까지 모두 가져옴
· $("").val(): 선택한 요소의 value 값을 가져옴
· $("").attr(): 선택한 요소의 속성 값을 가져옴

 

2) 컨텐츠 넣기

   $("").text("내용"): 선택한 요소에 text 지정
   $("").html("내용"): 선택한 요소의 태그까지 새로 적용
   $("").val("값"): 선택한 요소의 value 값을 새로 적용
   $("").attr("속성명", "값");: 선택한 요소의 속성 값을 가져옴

 

3. 요소 추가 메서드

1) 내부 추가

· $("").append(): 선택한 요소의 마지막에 자식 태그 추가

 

 

· $("").prepend(): 선택한 요소의 첫번째에 자식 태그 추가

 

 

2) 동등 추가

· $("").after(): 선택한 요소의 바로 뒤쪽에 새로운 요소 추가

  $("h1").after("<div>Hello</div>"); → <h1></h1> 이후에 <div>Hello</div> 삽입

· $("").before(): 선택한 요소의 바로 앞쪽에 새로운 요소 추가

  $("h1").before("<div>Hello</div>"); → <h1></h1> 이전에 <div>Hello</div> 삽입

 

4. 요소 삭제 메서드

· $("").remove(): 선택한 요소를 html 문서에서 제거, 해당 요소 포함하여 하위 태그 전부 삭제
· $("").empty(): 해당 요소의 하위 태그만 삭제

 

5. 회원가입 페이지_유효성 체크

※ 이전에 JavaScript로 작성했던 회원가입 페이지를 jQuery를 활용하여 제작해 볼 것!

    참고: https://yean-93.tistory.com/187

※ 단, js 파일은 별도로 생성하여 작성하고, css는 기존과 동일하게!

 

 

< singup.html >

 

 

< signup_check.js >