본문 바로가기

Front60

jQuery - 선택자(인접 관계 선택자) jQuery 선택자(selector) jQuery 코드는 선택자와 메소드의 조합으로 구성되는 경우가 많음 중간에 자바스크립트 코드 같이 작성 HTML 태그를 쉽게 선택하기 위해 선택자 사용 선택자 종류 직접 선택자 인접 관계 선택자 상위 요소(조상 / 부모) 선택자 하위 요소(자식 / 자손) 선택자 형제 선택자 필터 선택자 속성 선택자 컨텐츠 탐색 선택자 인접 관계 선택자 부모 요소 선택 : parent() 조상 : parents() 형제 : next() / nextAll() / nextUntil() / prev() / prevAll() / prevUntil() 인접 관계 선택자 예제 child-selector.html 자식 / 자손 선택자 자식/자손 선택자 자손 요소의 선택 방법 $(“선택자 선택자”).. 2021. 12. 13.
jQuery - 선택자(직접 선택자) jQuery 선택자(selector) jQuery 코드는 선택자와 메소드의 조합으로 구성되는 경우가 많음 중간에 자바스크립트 코드 같이 작성 HTML 태그를 쉽게 선택하기 위해 선택자 사용 선택자 구조 $('선택자').메소드(매개변수, 함수 등) $('span').hide() 큰 따옴표 / 작은 따옴표 모두 사용 가능 선택자 종류 직접 선택자 전체 : $("*") 태그 : $('태그명') 아이디 : $('#id명') 클래스 : $('.클래스명') 그룹 선택자 인접 관계 선택자 필터 선택자 속성 선택자 컨텐츠 탐색 선택자 직접 선택자 예제 tag-selector 태그 선택자 Header1 Header2 Header3 id-selector.html 아이디 선택자 Header1 Header2 Header3 c.. 2021. 12. 13.
jQuery란? jQuery jQuery란? 2006년 John Resig(존 레식)이 디자인한 자바스크립트 라이브러리 자바스크립트를 이용해 만든 다양한 함수들의 집합 무료 사용 가능한 오픈 소스 라이브러리 모든 웹 브라우저에서 동작 jQuery 특징 용량이 약 100KB로 가벼움 동적으로 HTML이나 CSS 컨트롤 능력이 탁월함 짧고 간결하게 코딩 가능 웹 표준과 타 브라우저 호환성 뛰어남 편리한 Ajax 호출 방법 메소드 체인 방식(여러 베소드를 연결하여 사용)으로 효유류적인 코딩이 가능하며, 간결하고 효과적인 코드 수정이 가능 다양한 플러그인 제공 jQuery 목적 쉬운 DOM 처리 쉽고 일관된 이벤트 연결 구현 쉬운 시각적 효과 구현 Ajax 기능 쉽게 구현 DOM(문서객체 모델) 객체 지향 모델로서 구조화된 문.. 2021. 12. 13.
JavaScript - JSON JavaScript JSON(JavaScript Object Notation) 자바스크립트 객체 표기법 key, value 값이 쌍으로 구성된 형태의 객체 표기법 클라이언트와 서버 사이에서 데이터 교환 목적으로 사용 웹 서버에서 수신하는 데이터는 문자열이다. 문자열 데이터를 JSON 파싱 함수를 사용해서 자바스크립트 객체로 변환이 가능하다. 최근의 브라우저들은 전부 내장 객체로 JSON 변환 기능 지원 형식 {key:value} {"name":"홍길동"} 자바스크립트 객체 -> JSON 변환 JavaScript -> JSON data Stringify() 메서드 사용 결과: JSON 형태의 문자열 JSON data -> JavaScript parse() 메서드 사용 결과 : object json_pars.. 2021. 12. 13.
JavaScript - 사용자 정의객체 연습문제 JavaScript 사용자 정의 객체 클래스 생성 연습문제1 object7-classEx.html 프로퍼티: width, height 생성자 / getter / setter 메서드: getArea(): 넓이를 구해서 반환 출력 getter 호출해서 가로 길이, 세로 길이 출력 사각형의 넓이 출력 setter 호출해서 가로 길이, 세로 길이 변경 변경된 사각형의 넓이 출력 출력 내용 가로길이: 30, 세로 길이 10 사각형의 넓이: 300 (ㅊ가로 길이를 20, 세로 길이를 30으로 변경) 사각형의 넓이: 600 2021. 12. 13.
JavaScript - 사용자 정의 객체 JavaScript 객체 내장 객체 브라우저 객체 문서 객체(DOM) 사용자 정의 객체 사용자 정의 객체 사용자가 직접 필요한 객체를 생성해서 사용하는 것 사용자 정의 객체 생성 방법 리터럴 이용 생성자 함수 (function()) 이용 new Object() 이용 (ES6에 추가) class 정의하고 객체 생성 (ES6에 추가) 1. 리터럴 이용 객체 선언: 멤버 추가 property(속성): 속성값 멤버 메소드 추가 객체 사용(호출) 객체.속성; 객체.메소드(); person.getName(); // 객체의 멤버 메소드 사용(호출) 형식 var 객체 = { // 변수: 프로퍼티(속성) 속성명1: 값1; 속성명2 : 값2; // 멤버 메소드 메소드명 : function() { 수행 코드; } }; //.. 2021. 12. 13.
JavaScript - 폼 유효성 확인 JavaScript 폼 유효성 확인 form 객체 document 객체의 하위 객체 form 태그 내에 들어있는 여러 입력 양식을 제어 form의 하위 객체들 폼 객체 사용 방법 태그의 name 속성을 객체로 사용하는 경우 newMemberForm.id.focus(); newMemberForm.id.value = “”; newMemberForm.passwd.focus(); 문서 객체 모델 (DOM) 방식을 사용하는 경우 var name = document.getElementById(‘name’); name.focus(); name.value = “”; 폼 유효성 확인 예제 join.html (밑의 링크 확인) https://hyeon99-dev.tistory.com/75 별도의 checkForm.js 파.. 2021. 12. 10.
JavaScript - 이벤트 핸들러와 이벤트 처리 JavaScript 이벤트 핸들러와 이벤트 처리 사용자로부터 발생되는 여러가지 이벤트 처리 인라인 이벤트 핸들러 - HTML 태그에 직접 이벤트 달기 고전 방식의 이벤트 객체.onclick = function() { alert("msg"); } DOM : 이벤트 리스너 등록 addEventListener('이벤트 종류', '함수이름'); removeEventListener(); 자주 사용하는 이벤트 핸들러 onLoad: HTML 문서나 특정 요소가 로드되었을 때 발생 onUnload: HTML 문서나 특정 요소가 사라질 때 발생 onClick: 클릭했을 때 발생 onKeyUp: 키를 눌렀다가 떼었을 때 발생 onKeyPress: 키를 누를 때 발생 onMouseDown: 마우.. 2021. 12. 10.
JavaScript - 문서 객체 모델(DOM) JavaScript 객체 내장 객체 브라우저 객체 문서 객체(DOM) 사용자 정의 객체 문서 객체 모델(Document Object Model) 객체 지향 모델로서 구조화된 문서를 표현하는 방식 HTML 문서에 접근하기 위한 표준 모델 표준은 대부분의 브라우저에서 DOM을 구현하는 기준 문서 내의 모든 요소를 정의하고, 각 요소에 접근하는 방법을 제공 웹 브라우저에서 보여지는 HTML 문서 태그 요소에 대한 정보와 문서에 대한 여러 가지 속성을 제공 document 객체의 하위 객체를 이용하여 문서 내에서 일어나는 다양한 기능 제어 DOM 사용 시기 HTML 문서가 로드되고 나서 파싱 작업을 거쳐 DOM 트리 생성 DOM 문서가 로드될 때 모든 DOM을 사용할 수 있게 되는 파일 문서 내의 요소(태그) .. 2021. 12. 10.

티스토리툴바