전체 글 (69) 썸네일형 리스트형 순회(탐색) 메소드 - 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 공식 홈페이지 .. 이벤트(Event) 이벤트(Event) : 동작, 행위- 브라우저에서의 동작, 행위 : click, keydown, keyup, change, submit, ...이벤트 리스너(Event Listener)- 이벤트가 발생하는 것을 대기하고 있다가 이벤트가 발생하는 것이 감지되면 연결된 기능(함수)를 수행하는 것이벤트 핸들러(Event Handler)- 이벤트 리스너에 연결된 기능으로 이벤트 발생 시 수행하고자 하는 내용을 작성해둔 함수(function)1) 인라인 이벤트 모델- 요소 내부에 이벤트를 작성하는 방법으로, on이벤트명 = 함수명() 형태로 작성인라인 이벤트 모델 확인// 인라인 이벤트 모델// ex) 버튼의 배경색, 글자색 변경function test1(button){ // 변수 button에는 이벤트가 발생.. JS 연습문제 1 - 간이 계산기 ver.1 ▶ JS 연습문제 1 - 간이 계산기 ver.1간이 계산기 만들기첫 번째 값 : 두 번째 값 : +-*/%계산 결과 : See the Pen 24-12-25 js review-pr1 by Namu (@Namu-the-sans) on CodePen. 변수와 자료형 ( 변수 선언 방식, 자료형 ) 변수 선언 위치에 따른 구분// 변수 선언 위치에 따른 구분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.get~. document.querySelector~ ) DOM(Document Object Model)- 웹 문서(HTML)의 모든 요소를 객체 형식으로 표현한 것 → 문서 내 특정 요소에 접근하는 방법을 제공DOM을 이용한 HTML 요소 접근하기 (해당 요소객체 가져오기)1) id로 접근하기 : document.getElementById("id속성값");2) name으로 접근하기 : document.get.ElementsByName("name속성값");3) class로 접근하기 : document.getElementsByClassName("class속성값");4) tag로 접근하기 : document.getElementsByTagName("태그명");5) CSS 선택자로 접근하기 5-1) document.querySelector("CSS 선택자").. 데이터 입출력 ( innerHTML, innerText, value ) ▶ 자바스크립트에서의 데이터 입/출력※ window : 자바스크립트 내장 객체로 브라우저 창이 열릴 때마다 하나씩 만들어지는 객체 브라우저 창 안에 존재하는 모든 요소들의 최상위 객체(생략 가능) document : 웹 문서마다 하나씩 만들어지는 객체 (html 문서에 대한 정보를 가지고 있음)1. 데이터를 출력하는 구문1) [window.]alert("알림창에 출력할 문구");2) [window.]console.log("콘솔창에 출력할 문구");3) document.write("화면상에 출력할 문구");4) 선택한요소.innerText = "요소에 출력할 문구";5) 선택한요소.innerHTML = "요소에 출력할 문구";[window.]alert("내용")- ale.. 이전 1 2 3 4 5 6 ··· 9 다음