분류 전체보기
-
[JQuery] eventVScode/JQuery 2022. 9. 9. 14:50
1. 이벤트 연결 -기존 (자바스크립)의 이벤트 연결은 태그 안의 onclick 등의 속성을 넣고 자바스크립트 함수를 연결해서 실행되게 하는 방식이라면 제이쿼리는 직접선택자와 이벤트 이름을 연결하고 익명함수로 동작을 정의해서 실행되게 함 -on() -사용 형태 1) $(selector).on(eventName,function(event){}); -selctor에 eventName이 발생하면 function(event){} 함수 실행 -$(function(){//h1에 'click'이 발생하면 function(event){} 실행 header-0 header-1 header-2 2) $(selector).on(object); -두가지 이상의 이벤트와 그에 따른 실행 함수 지정 $(function(){ $(..
-
[JQuery] DOMVScode/JQuery 2022. 9. 9. 14:46
-DOM은 자바스크립트보다 제이쿼리에서 훨씬 활용도 높음 1. 기본 필터링 메서드 filter() -$(selector).filter(selector); -$(selector).filter(function(index){}); Header - 0 Header - 1 Header - 2 Header - 3 Header - 4 Header - 5 2. 문서 객체 탐색 chaining과 종료 -chaining을 사용해 한 줄로 서로 다른 문서 객체에 스타일 적용 가능 -관련 셀렉터들로 필터링한 후 chaining과 filter를 사용함. Header - 0 Header - 1 Header - 2 Header - 3 Header - 4 Header - 5 위의 체이닝 방식으로 실행하기 곤란한 상황일 때 *위 코드..
-
[JQuery] 속성/필터선택자, 배열VScode/JQuery 2022. 9. 9. 14:35
속성 선택자 -기본 선택자 뒤에 붙여 사용 -입력 양식과 관련된 태그를 선택할 때 많이 사용 선택1 선택2 필터 선택자 1. 입력 양식 필터 선택자(상태에 의한) -input: button -input: checkbox -input: radio -input: file -input: image -> : submit 버튼을 이미지로 대신할 때 사용. submit 버튼을 대신하는 이미지이기 때문에 경로에 그림이 없으면 '액박'이 표시되고 옆에 '제출'이라는 말이 같이 표시됨 -input: password -input: text -input: submit -input: reset -요소: checked -요소: disabled -요소: enabled -요소: focus -요소: selected Apple B..
-
[JQuery] 인접관계선택자VScode/JQuery 2022. 9. 9. 14:28
1. 자식(손) 선택자와 후손 선택자 -$("요소선택자 하위요소"): 요소선택자의 지정하위요소 모두를 선택함 -$("요소선택자>자식요소"): 요소선택자의 1단계 자식에 있는 자식요소만 선택 -$("요소선택자+하위요소"): 요소선택자의 바로 다음에 나오는 지정하위요소를 선택함 -$("요소선택자~하위요소"): 요소선택자의 뒤로 나오는 지정하위요소를 선택함 1) 선택자1과 선택자2 사이 공백('선택자1 선택자2'): 선택자1의 자손 중 선택자2 모두(자손의 자손도 포함) 자식(손) 선택자와 후손 선택자 Apple Bag Cat Dog 자식(손) 선택자와 후손 선택자 2) 선택자1> 선택자2: 선택자1의 바로 아래 자손들 중 선택자2 모두(자손의 자손은 미포함) $(function(){ $('div>h1')..
-
[JQuery] selectorVScode/JQuery 2022. 9. 9. 14:22
-모든 브라우저에서 동작하는 클라이언트 자바스크립트 라이브러리 -제작 이유: DOM과 관련된 처리를 쉽게 구현, 일관된 이벤트 연결을 쉽게 구현, 시각적 효과를 쉽게 구현, ajax 애플리케이션 쉽게 구현 -사용법: 직접 다운받아 사용(http://jquery.com)하거나 CDN 호스트 사용 -CDN(content delivery network ): 사용자에게 간편하게 콘텐츠를 제공하는 방식을 의미하며 구글, 마이크로소프트, jquery 측에서 사용자가 jquery를 사용하기 편하게 콘텐츠 제공 라이브러리 다운받아 포함하는 방법 1. 링크 연결 2. 직접 다운로드하여 저장하고 script 태그에 위치를 지정 제이쿼리를 사용한 웹페이지 형식 -제이쿼리는 자바스크립트의 확장판이기 때문에 작성영역이 ..
-
[JavaScript] DOMVScode/JavaScript 2022. 9. 9. 14:13
문서객체 모델(DOM, document object model) -넓은 의미: 웹 브라우저가 HTML 페이지를 인식하는 방식 -좁은 의미: document 객체와 관련된 객체의 집합 -HTML 페이지에 태그를 추가, 수정, 제거할 수 있음 -기본적인 자바스크립트만으로 DOM을 다루기에는 너무 복잡하므로 간단한 내용만 살펴보고 자세한 내용은 jQuery와 함께 DOM 관련 용어 -문서 객체: html or body 태그를 자바스크립트에서 이용할 수 있는 객체로 만들면 그것이 문서 객체 -노드: 각 요소(head, body, title, script, h1, HEADER...) --요소노드(Element Node): HTML 태그 --텍스트노드(Text Node): 요소 노드 안에 들어 있는 글자 -정적..
-
[JavaScript] vaildation, select tag, visibility, checkVScode/JavaScript 2022. 9. 8. 17:57
vaildation 사용자 등록 아이디 * 비밀번호 비밀번호 확인 이름 이메일 전화번호 - - * 는 필수 입력사항입니다 로그인 되었습니다 select tag, visibility 대한민국 +82 그리스 +30 뉴질랜드 +64 프랑스 +33 +82 +1 Canada +1 United States +63 Philppines +62 Indonesia +84 Vietnam +55 Brazil +86 China +85 HongKong +82 Korea 성별 남성 여성 취미 스포츠 영화 독서