본문 바로가기

전체

 (219)
[jQuery] Form 이벤트 / Submit 이벤트 Form 이벤트 예시) [html + css] Form Event 회원가입정보 아이디 비밀번호 이름 이메일 회원가입 다시작성 [회원가입] 버튼을 클릭한 경우 호출되는 이벤트 처리 함수를 등록 → 이벤트 처리 함수에서는 사용자 입력값을 검증하고 모든 입력값의 검증이 성공한 경우 제출 이벤트(Submit Event)를 발생시켜 form 태그가 실행되도록 명령 작성 $("#submitBtn").click(function() { //에러 메세지를 출력하는 모든 태그의 태그내용을 초기화 처리 $(".error").text(""); if($("#id").val()=="") { $("#idMsg").text("아이디를 반드시 입력해 주세요."); $("#id").focus(); return; } var idReg=/..
[jQuery] 마우스(mouse) 이벤트 / 키(key) 이벤트 / 스크롤(scroll) 이벤트 마우스 이벤트 1) click : 태그에서 마우스 버튼을 누른 경우 발생하는 이벤트 2) dbclick : 태그에서 마우스 버튼을 두번 연속 누른 경우 발생하는 이벤트 3) mousedown : 태그에서 마우스 버튼을 누르는 순간 발생되는 이벤트 4) mouseup : 태그에서 눌려진 마우스 버튼을 놓는 순간 발생되는 이벤트 5) mouseover : 태그에 마우스 커서가 진입하는 순간 발생되는 이벤트 → 버블링 단계 포함(자식 태그 포함해서 이벤트 발생한다.) 6) mouseout : 태그에서 마우스 커서가 벗어나는 순간 발생되는 이벤트 → 버블링 단계 포함(자식 태그 포함해서 이벤트 발생한다.) 7) mouseenter : 태그에서 마우스 커서가 진입하는 순간 발생되는 이벤트 → 버블링 단계 미포함 ..
[jQuery] Event Handle this 키워드 이벤트 처리 함수에서 this 키워드는 이벤트가 발생된 태그(Element 객체)를 표현한다. [html 태그] [html] jQuery Event Handle 점심 메뉴를 선택해 주세요. 가정식 백반 짜장면 짬뽕 설렁탕 순대국 삼계탕 쌀국수 돈까스 선택한 점심 메뉴는 ???입니다. $(selector).click(callback) : 선택자로 검색된 태그에서 click 이벤트가 발생될 경우 콜백함수(이벤트 처리 함수)를 호출하는 메소드 선택자로 검색된 태그의 내용이 변경되는 동적인 페이지를 구현할 수 있다. on 메소드 [html 태그] jQuery Event Handle 마우스를 클릭하거나 이동해 보세요. 선택자로 검색된 태그에서 click 이벤트가 발생된 경우 콜백함수를 호출한다. ..
[jQuery] 태그의 추가와 삭제 / 이동 태그의 추가와 삭제 [html 태그] 태그의 추가와 삭제 태그 이동 $(tag) : jQuery 함수의 매개변수로 HTML 태그를 전달받으면 자바스크립트의 Node(Element) 객체를 생성하여 제공받아 jQuery 객체로 반환 $(selector).appendTo(targetselector) : 선택자로 태그를 검색하여 타겟 선택자로 검색된 태그의 마지막 자식 태그로 이동하는 메소드 → 기존 태그를 검색하여 이동하는 메소드이지만 태그를 생성하여 이동 처리하는 것도 가능하다. $("").appendTo("#imageList1"); $("").appendTo("#imageList1"); $(selector).prependTo(targetselector) : 선택자로 태그를 검색하여 타겟 선택자로 검색된 ..
[jQuery] 메소드 (each, css, text, html) each 메소드 $(selector).each(callback([index][, element])) each 메소드는 선택자로 검색된 태그의 갯수만큼 콜백함수를 반복적으로 호출하는 메소드이다. (명시적 반복) 콜백함수의 매개변수에는 검색된 태그의 첨자와 태그의 Node(Element) 객체가 자동으로 저장되어 사용이 가능하다. [html 태그] each 메소드 each 메소드 호출-1 each 메소드 호출-2 each 메소드 호출-3 each 메소드 호출-4 each 메소드 호출-5 선택자에 의해 다수의 태그가 검색되면 태그의 갯수만큼 jQuery 객체를 생성하여 메소드를 호출한다. → 묵시적 반복 : 검색된 태그를 모두 jQuery 객체로 생성하여 메소드를 반복적으로 호출한다. → 검색된 모든 태그에 ..
[jQuery] 선택자(Selector) 선택자(Selector) 태그 선택자 태그 선택자는 태그명으로 태그를 검색하여 제공하는 선택자이다. 검색된 태그의 Node(Element) 객체로 jQuery 객체를 생성한 후 메소드를 호출할 수 있다. 다수의 태그가 검색된 경우 묵시적 반복에 의해 다수의 jQuery 객체가 생성되어 메소드를 호출한다. 예시) [html 태그] 선택자(Selector) jQuery Selector-1 jQuery Selector-2 jQuery Selector-3 jQuery Selector-4 [script 태그] $("h2").css("background", "yellow"); 클래스 선택자 클래스 선택자는 태그의 class 속성 값으로 태그를 검색하여 제공하는 선택자이다. 클래스 선택자는 태그 선택자와 구분하기 위..
[jQuery] jQuery란? / jQuery 라이브러리 이용법 jQuery jQuery는 이벤트 처리 및 태그 조작 기능을 제공하는 자바스크립트 라이브러리이다. jQuery를 사용하기 위해서는 저 script 태그를 사용하여 jQuery 라이브러리 파일을 웹문서에 포함시켜야 한다. → https://jquery.com/ 사이트 참조 방법1) jQuery 라이브러리 파일을 다운로드 받아 현재 서버의 자원으로 저장하여 웹문서에 포함시킨다. → 1.X : IE9 이하, 2.X 또는 3.X : IE10 이상 → 미압축파일(uncompressd) : 라이브러리 파일 변경 가능, 압축파일(compressd) : 라이브러리 파일 변경 불가능 download >> Download the compressed, production jQuery 3.7.0 >> 우클릭 : 다른 이름으로..
[JavaScript] 쿠키(Cookie) 쿠키(Cookie) 쿠키(Cookie)는 웹 서버가 클라이언트의 웹 브라우저에 저장하는 작은 데이터 조각이다. 이 데이터는 클라이언트와 서버 간의 상호작용을 추적하고 클라이언트의 상태를 기억하는 데 사용된다. 쿠키는 클라이언트의 로컬 컴퓨터에 텍스트 파일 형태로 저장되며, 웹 페이지를 방문할 때 웹 서버로부터 전송되고, 웹 브라우저에 의해 관리된다. 쿠키는 일정 기간 동안 지속되며, 만료일이 지나면 자동으로 삭제될 수 있다. 쿠키 사용 목적 1) 세션 관리: 쿠키를 사용하여 사용자의 세션을 식별하고, 로그인 상태를 유지하거나 세션 데이터를 저장할 수 있다. 2) 개인화: 사용자의 선호 설정, 언어 설정 등을 저장하여 맞춤화된 사용자 경험을 제공할 수 있다. 3) 트래킹 및 분석: 쿠키를 사용하여 사용자의..

티스토리툴바