✨ Front-end/jQuery13 [jQuery] var( ) 비밀번호 일치 여부 확인하기, (중복체크) HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 var pass1=$('#pwd1').val(); 비밀번호 필드(#pwd1)에서 입력된 값을 가져와 변수 pass1에 저장한다. var pass2=$('#pwd2').val(); 비밀번호 확인 필드(#pwd2)에서 입력된 값을 가져와 변수 pass2에 저장한다. if(pass1==pass2) { ... } else { ... }: pass1과 pass2를 비교하여 비밀번호가 일치하는지 확인한다. $('#result').html(...): 결과 메시지를 표시할 요소(#result)의 내용을 변경한다. .css(...)를 사용하여 텍스트의 색상을 변경한다. 일치할 경우 녹색('green'), 일치하지 않을 경우 빨강('red')으.. 2023. 9. 4. [jQuery] innerHTML, text 바꾸기 HTML 삽입 미리보기할 수 없는 소스 기존 javaScript를 이용해서 텍스트를 박아넣는 형식을 jQuery로 바꾸어보았다. HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 var str=$('#txt').val(); 텍스트 입력 필드(#txt)에서 입력된 값을 가져와 변수 str에 저장한다. $('#view1').text(str);: 변수 str의 내용을 요소(#view1)의 텍스트로 설정하여 출력한다. 출력2 버튼도 위와 같은 방식으로 작동되는 것이다. HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 .css({...}) .css() 메서드를 사용하여 요소의 스타일을 변경한다. 여기서는 텍스트의 색상('color'), 글꼴 굵기('fon.. 2023. 9. 4. [jQuery] 보이기 숨기기 기능 (show, hide, toggle, slideup, fade) show()와 hide() HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 $().ready(function(){ ... }); 이 부분은 문서가 로드될 때 실행할 JavaScript 코드를 정의하는 부분이다. $().ready(...) 또는 $(document).ready(...)와 같이 사용되며, 페이지가 완전히 로드되었을 때 내용을 실행다. $('#btn1').click(function(){ ... }); "보이기" 버튼(#btn1)이 클릭되었을 때 실행할 코드를 정의한다. 이 코드는 텍스트 입력 필드를 선택하여 show() 메서드 or hide() 메서드를 호출하여 표시한다. toggle(), slideup(), fade() HTML 삽입 미리보기할 수 없는 소스 H.. 2023. 9. 4. [jQuery] 가장 기초적인 $( function() { .... } 에 대해 $( function() {... } 란? 자바스크립트의 $(document).ready(function() { ... }); 을 축약한 jQuery이다. HTML 삽입 미리보기할 수 없는 소스 두 코드 모두 웹 페이지의 DOM 요소가 완전히 로드 되었을 때 실행된다는 것이다. 즉, 웹 페이지의 HTML 구조가 완전히 로드되고 초기화되서 사용자에게 표시되기전까지 기다린다. HTML 삽입 미리보기할 수 없는 소스 그렇다면 이 두개는 무슨 차이가 있을까? 코드를 적용해보면 페이지로 들어왔을 때 2가 먼저 출력이 되고 이후 1이 출력이된다. alert(2) 이 코드는 스크립트가 로드되면 즉시 실행되기 때문이다. 웹 페이지 로딩과는 관련이없으며, 스크립트가 로드되는 즉시 실행된다. 주로 초기화와 관계없는 간단한.. 2023. 9. 4. 이전 1 2 3 4 다음