언노운 개발

탐색 선택자탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 한 번 더 탐색해서 좀 더 정확하게 선택할 수 있습니다. 위치 탐색 선택자와 속성 탐색 선택자가 있습니다. ​위치 탐색 선택자기본 선택자로 선택한 요소는 배열에 담깁니다.    위치 탐색 선택자 종류 종류사용법설명$("요소 선택:first")$("요소 선택").first()$("li.first")$("li").first()전체 요소 중 첫 번째 요소만 선택$("요소 선택:last")$("요소 선택").last()$("li.last")$("li").last()전체 요수 중 마지막 요소만 선택$("요소 선택 :odd")$("li.odd")요소 무리 중 짝수 번째(홀수 인덱스) 요소만 선택$("요소 선택:even")$("li.eve..

인접 관계 선택자부모 요소 선택자부모 요소 선택자는 선택한 요소를 감싸고 있는 부모 요소를 선택합니다. 기본형)$("요소 선택").parent();하위 요소 선택자하위 요소 선택자는 기준 요소로 선택한 하위 요소만 선택합니다. 기본형)$("기준 요소 선택1 요소선택2");ex) $("#wrap h1") // id = "wrap"인 요소가 기준 요소가 됩니다.자식 요소 선택자자식 요소 선택자는 선택된 요소를 기준으로 지정한 자식 요소만 선택합니다. 기본형)1. $("요소 선택 > 자식 요소 선택")2. $("요소 선택").children("자식 요소 선택")3. $("요소 선택").children()형(이전) / 동생(다음) 요소 선택자형 요소 선택자는 선택한 요소를 기준으로 바로 이전 형제 요소만 선택합..

선택자는 HTML요소를 선택하여 가져옵니다. 제이쿼리 선택자는 CSS선택자와 마찬가지로 선택한 요소의 디자인 속성을 적용할 때 사용할 수 있습니다. 이때 HTML에 작성한 스타일은 사용자의 동작에 의해 스타일을 변경할 수 없기 때문에 HTML에서 작성한 스타일(CSS)은' 정적이다' 라고 표현합니다. 하지만 제이쿼리 선택자를 사용하면 '동적'으로 스타일을 적용할 수 있습니다. 선택자를 좀 더 정확하고 깊이 있게 공부하려면 문서 객체 모델에 대해 알아두는 것이 좋습니다​문서 객체 모델문서 객체 모델(DOM, Document Object Model)이란 HTML 문서 객체 구조를 말합니다. HTML 문서의 기본 객체 구조는 최상위 객체인 이 있고 하위 객체로 , 가 있습니다. 태그는 문단태그, 테이블태그,..

구분종류사용법설명직접선택자전체 선택자$("*")모든 요소를 선택합니다.아이디 선택자$("#아이디명")id 속성에 지정한 값을 가진 요소를 선택합니다.클래스 선택자$(".클래스명")class 속성에 지정한 값을 가진 요소를 선택합니다.요소 선택자$("요소명")지정한 요소명과 일치하는 요소들만 선택합니다.그룹 선택자$("선택 1, 선택 2, 선택 3, ...선택 n")선택1, ...,선택n에 지정된 요소들을 한 번에 선택합니다.종속 선택자$("p.txt_1")$("p#txt_1") 요소 중 class 값이 txt_1인 요소 또는 id값이 txt_1인 요소를 선택합니다.인접 관계선택자부모 요소 선택자$("요소 선택").parent()선택한 요소의 부모 요소를 선택합니다.상위 요소 선택자$("요소 선택").pa..

제이쿼리란?제이쿼리는 모질라 사의 자바스크립트 개발자였던 존 레식(John Resig)이 자바스크립트를 이용해 만든 라이브러리 언어입니다. 라이브러리 언어란 자바스크립트로 만들어진 다양한 함수들의 집합을 가리킵니다.앞선 포스팅에서 함수는 일련의 코드를 함수 내에 정의했다가 필요할 때마다 호출하여 사용하는 것이라고 배웠습니다. 제이쿼리는 이런 다양한 함수들을 사용자들에게 제공함으로써 자바스크립트에서 사용할때 불편했던 점들을 간편하게 사용할 수 있도록 개선했습니다.​  제이쿼리에서 개선된 사항들1. 호환성 문제 해결자바스크립트의 문서 객체 모델(DOM)과 이벤트 객체는 호환성이 떨어진다는 단점이 있습니다. 예를 들어 인접 요소 선택자 중 다음 요소 선택자는 IE8 이하의 브라우저에서 문서객체를 선택했을 때와..

메모리 절약을 위한 프로토타입 사용하기저번 포스팅의 예제를 통해 객체 생성자 함수를 선언하여 객체를 생성하고 속성과 함수를 등록해 보았습니다.하지만 앞에서 배운 대로 객체를 생성하면 객체를 생성한 만큼 함수가 등록됩니다.그리고 함수가 많이 등록되면 메모리 공간을 많이 차지하여 메모리를 낭비하게 됩니다. 이럴 때는 객체 생성자 함수에 프로토타입을 사용하여 함수를 등록하면 메모리 낭비를 줄일 수 있습니다.  //프로토 타입으로 객체를 생성할 때 함수를 등록하는 기본형 function 함수명 (매개변수1, 매개변수2, ..., 매개변수n) {    this.속성명 = 새 값; }  함수명.prototype.함수명 = function();    코드; }  var 참조 변수(인스턴스 네임) = new 함수명()..

함수 스코프함수 스코프란?스코프(scope)의 사전적 의미는 '범위'이며, 여기에서는 변수 또는 함수의 유효 범위를 가리킵니다.스코프를 이해하기 위해 지역 변수와 전역 변수의 개념과 차이를 먼저 살펴보겠습니다~전역 변수와 지역 변수의 개념과 차이전역 변수는 자바스크립트 어디에서든 사용할 수 있는 변수입니다.지역 변수는 함수 스코프(범위)에서만 사용할 수 있는 변수입니다.  //기본형 var 변수명; //전역 변수 function 함수명() {     var 변수명;  //지역 변수 }   전역함수와 지역함수의 차이전역 함수는 자바스크립트 어디에서든 사용할 수 있는 함수이고,지역 함수는 함수 스코프에서만 사용할 수 있는 함수입니다.기본형)전역과 지역을 나누는 이유프로그램을 개발할 때 전역과 지역을 나누면 ..

함수란?데이터를 저장할 때에는 변수를 선언하여 저장했습니다. 변수에는 데이터만 저장할 수 있고, 코드는 저장할 수 없습니다. 하지만 함수를 사용하면 코드를 메모리에 저장했다가 필요할 때마다 호출하여 사용할 수 있습니다. ​함수를 사용하여 코드를 저장한 것을 함수 정의문이라고 합니다. 변수를 선언할 때 var키워드를 사용한 것처럼 함수에서는 function 키워드를 사용해 변수를 선언합니다.  //기본형 function 함수명() {    코드; }  다음과 같이 익명 함수(함수명이 없는 함수)를 선언하고 변수에 참조해줘도 됩니다.  //기본형 참조 변수 = function(){     코드; }  함수는 메모리에 할당되어 대기하고 있다가 함수가 호출되면 실행됩니다.   //함수 호출 기본형 함수명(); ..

브라우저 객체 모델 브라우저 객체란? 브라우저에 내장된 객체를 브라우저 객체라고 합니다. window는 브라우저 객체의 최상위 객체이며, window 객체에는 하위 객체가 포함되어 있습니다. 계층적 구조로 이루어져 있으며, 이를 브라우저 객체 모델(BOM)이라고 합니다. window는 브라우저 객체의 최상위 객체이며, 아래 링크를 통해 window 객체의 메서드 종류를 많이 사용하니 숙지해주세요. 종류 설명 open("URL", "새 창 이름", "새 창 옵션") URL 페이지를 새 창으로 나타냅니다. alert(data) 경고 창을 나타내고 데이터를 보여줍니다. 방문자가 [확인] 버튼을 누르면 alert()를 사용한 다음 위치의 코드를 수행합니다. prompt("질문", 답변") 질문과 답변으로 질의 ..

내장 객체1.내장 객체 생성하기기본형) 참조 변수(인스턴스 이름) = new 생성 함수(); 바로 예제를 통해 알아보겠습니다. 2.날짜 정보 객체날짜나 시간 관련 정보를 제공받고 싶을 때는 날짜 객체(Data Object)를 생성합니다. 현재 날짜의 정보를 제공하는 Date 객체는 다음과 같습니다. 기본형) 참조 변수 = new Date(); ex) var t = new Date(); 특정 날짜의 Date 객체는 다음과 같이 생성합니다. (2002 월드컵 날짜를 예로 들겠습니다) 기본형) 참조 변수 = new Date("연/ 월/ 일"); ex) var t = new Date("2002/ 5/ 31"); 참조 변수 = new Date(연, 월-1, 일); ex) var t = new Date(2002, ..