본문 바로가기

전체 글

(54)
순회(탐색) 메소드 3 ( sideways 메소드, is("css선택자") ) sideways(옆으로, 옆에서) 메소드- 같은 레벨에 있는 요소(형제)를 선택할 수 있는 메소드- $("요소명").siblings( [ 매개변수 ] )   - 선택된 요소와 같은 레벨(형제)에 있는 모든 요소 리턴   - 매개변수가 있으면 같은 레벨에 있는 요소 중 매개변수와 일치하는 모든 요소 리턴- $("요소명").next( )   - 선택된 요소의 같은 레벨 중 선택된 요소 다음 한 개 요소 리턴- $("요소명").nextAll( )   - 선택된 요소의 같은 레벨 중 선택된 요소 다음의 모든 요소 리턴- $("요소명").nextUntil(매개변수)   - 선택된 요소의 같은 레벨 중 매개변수 이전까지의 모든 요소 리턴- $("요소명").prev( )   - 선택된 요소의 같은 레벨 중 선택된 요..
순회(탐색) 메소드 2 (descendants 메소드) descendants(자손, 후손) 메소드- 선택된 요소의 하위 요소들을 선택할 수 있는 메소드- $("요소명").children( [ 매개변수 ] )  - 선택된 요소의 모든 자식 객체 리턴  - 매개변수가 있으면 매개변수와 일치하는 자식 객체만 리턴- $("요소명").find(매개변수)  - 선택된 요소의 인자와 일치하는 모든 후손 객체 리턴 div (great-grand parent) ul (grand parent) li (direct parent) span div (grand parent) p (direct parent) span 테스트$(document).ready(func..
순회(탐색) 메소드 - 1 (Ancestors 메소드) Ancestors(조상) 메소드- 선택된 요소의 상위 요소들을 선택할 수 있는 메소드- $("요소명").parent( ): 선택된 요소의 바로 위 상위 요소- $("요소명").parents( [ 매개변수 ] ): 선택된 요소의 모든 상위 요소 리턴: 매개변수가 있으면 매개변수와 일치하는 부모만 리턴- $("요소명").parentsUntil(매개변수): 선택된 요소부터 매개변수 요소 전까지 범위의 요소 리턴 div (great-grand parent) ul (grand parent) li (direct parent) span div (grand parent) p (direct parent) span ..
jQuery 선택자 (태그, 클래스, 아이디, 자식/후손, 속성, prop()메소드) jQuery 선택자- jQuery는 요소를 선택할 때  $("CSS 선택자") 또는 $(요소가 저장된 변수)의 형식으로 작성- ★ CSS 선택자로 요소를 선택한 경우   - id로 선택 시 단일 요소를 반환   - class, name, 자식/후손 등으로 선택 시 배열로 반환태그 선택자태그 선택자테스트1테스트2테스트3테스트4테스트5테스트6// 태그 선택자// ready() 함수 : 문서가 로딩된 후 마지막에 수행하는 함수$(document).ready(function(){ $("h5").css("color", "green"); // 자바스크립트로 했을 경우 // document.getElementsByTagName('p').style.color = 'yellow'; // -> 배열에 ..
jQuery 개요 (기본 개념 / 라이브러리 연결방법 / ready( ) 함수) jQuery란?- 기존에 복잡했던 클라이언트측 HTML 스크립팅(JS)을  간소화 하기위해 고안된 JavaScript Library.  ※ 라이브러리(library) : 프로그램, 프로그래밍 언어에 없는 추가적인 기능- 단점 : jQuery 라이브러리를 다운로드 받아서 사용 → 로딩 속도 느림            순수 JS보다 속도가 조금 느림jQuery 라이브러리 연결 방법- jQuery 라이브러리는 .js 확장자로 작성되어 있어  script 태그를 이용하여 연결할 수 있음1) jQuery 라이브러리를 다운로드 받아서 직접 연결- 장점 : 서버 컴퓨터에 라이브러리가 존재하기 때문에 연결 속도가 빠름- 단점 : 폴더 구조 변경 시 경로가 꼬이게 되는 문제가 발생할 수 있음- jQuery 공식 홈페이지 ..
[ 응용 ] 간이 계산기 - Version.1 간이 계산기 Version.1See the Pen Review by Namu (@Namu-the-sans) on CodePen.간이 계산기 만들기 첫 번째 값 : 두 번째 값 : + - * / % 계산 결과 :
변수와 자료형 변수 선언 위치에 따른 구분[ JavaScript ]( .js 파일)// 변수 선언 위치에 따른 구분var num1 = 10; // 전역 변수(선언된 후 같은 문서 내 어디서든 사용 가능)num2 = 5; // 전역 변수(변수명 앞에 어떤 키워드도 없으면 전역 변수가 됨)var num1 = 20; // JS에서 var 변수는 덮어쓰기가 됨.. / Java에서는 오류 발생console.log("num1 : " + num1); // 윈도우 개발자도구 콘솔창에 num1 : 20 출력console.log("num2 : " + num2); // 윈도우 개발자도구 콘솔창에 num2 : 5 출력function test(){ var num3 = 3; // function 지역 변수 num4 = 4;..
요소 접근 방법 DOM(Document Object Model)- 웹 문서(HTML)의 모든 요소를 객체 형식으로 표현한 것   → 문서 내 특정 요소에 접근하는 방법을 제공DOM을 이용한 HTML 요소 접근하기 (해당 요소객체 가져오기)1) id로 접근하기 : document.getElementById("id속성값");2) name으로 접근하기 : document.get.ElementByName("name속성값");3) class로 접근하기 : document.getElementByClassName("class속성값");4) tag로 접근하기 : document.getElementByTagName("태그명");5) CSS 선택자로 접근하기    5-1) document.querySelector("CSS 선택자");  ..