➰ Ancestors(조상) 메소드 : 선택된 요소의 상위 요소들을 선택할 수 있는 메소드 $("요소명").parent() 선택된 요소의 바로 위 상위 요소 $('요소명').parents([매개변수]) 선택된 요소의 모든 상위 요소 리턴 매개변수가 있으면 매개변수와 일치하는 부모만 리턴 $('요소명').parentsUntil(매개변수) 선택된 요소부터 매개변수 요소 전까지 범위의 요소 리턴 ➰ descendants(자손, 후손) 메소드 : 선택된 요소의 하위 요소들을 선택할 수 있는 메소드 $('요소명').children([매개변수]) 선택된 요소의 모든 자식 객체 리턴 매개변수가 있으면 매개변수와 일치하는 자식 객체만 리턴 연속해서 사용 가능 $('요소명').find(매개변수) 선택된 요소의 인자와 일..
ON/JavaScript
➰ Ancestors(조상) 메소드 : 선택된 요소의 상위 요소들을 선택할 수 있는 메소드 $("요소명").parent() 선택된 요소의 바로 위 상위 요소 $('요소명').parents([매개변수]) 선택된 요소의 모든 상위 요소 리턴 매개변수가 있으면 매개변수와 일치하는 부모만 리턴 $('요소명').parentsUntil(매개변수) 선택된 요소부터 매개변수 요소 전까지 범위의 요소 리턴 ➰ descendants(자손, 후손) 메소드 : 선택된 요소의 하위 요소들을 선택할 수 있는 메소드 $('요소명').children([매개변수]) 선택된 요소의 모든 자식 객체 리턴 매개변수가 있으면 매개변수와 일치하는 자식 객체만 리턴 연속해서 사용 가능 $('요소명').find(매개변수) 선택된 요소의 인자와 일..
📌jQuery 🌝 기존에 복잡했던 클라이언트 측 HTML 스크립팅(JS)을 간소화하기 위해 고안된 Javascript Library이다. ( * 라이브러리(library) : 프로그램, 프로그래밍 언어에 있는 추가적인 기능 ) 🌚 단점 : jQuery 라이브러리를 다운로드 받아서 사용 -> 로딩속도 느림 (순서 JS보다 속다가 조금 느림) 📌jQuery연결방법 1) jQuery 라이브러리를 다운로드 받아서 직접 연결 - 장점 : 서버 컴퓨터에 라이브러리가 존재하기 때문에 연결 속도가 빠름 - 단점 : 폴더 구조 변경 시 경로가 꼬이게되는 문제가 발생할 수 있다. - jQuery 공식 홈페이지 : https://jquery.com/ 1. js폴더에 jquery 파일을 다운로드 받아 넣는다. 2. html ..
요소.classList : 요소가 가지고 있는 클래스를 배열로 반환 요소.classList.remove("클래스명") : 요소의 특정 클래스 제거 요소.classList.add("클래스명") : 요소의 특정 클래스 추가 요소.classList.toggle("클래스명"): 클래스가 있으면 제거 없으면 추가 요소.setAttribute("속성","속성값") : 요소에 속성 / 속성값 추가 HTML 코드 추가 계산 JS 코드 // 추가 버튼 (#add) 클릭 되었을때 document.getElementById("add").addEventListener("click", function () { //div요소 생성 const div = document.createElement("div"); //div에 row..
📌DOM(Document Object Model) HTML(웹문서, 웹페이지) 문서를 객체 기반으로 표현한 것 -> HTML 문서에 작성된 내용을 트리구조(계층형으로 표현)로 나타냈을 때 각각의 태그, TEXT, COMMENT 등을 Node라고 한다. document : { DOCTYPE : html, HTML : { HEAD : { TITLE : { TEXT : "문서 제목" }, STYLE : {...}, META : {...} } , BODY : { H1 : { TEXT : "제목", ATTRIBUTE : "속성" }, COMMNET : {TEXT : "주석 내용"}, DIV : {...} } } } 🔊 Node 확인하기 → 태그(요소 노드), 속성, 주석, 내용(텍스트 노드) 등을 모두 표현 No..
➰ 문자열.trim() : 문자열 양 끝에 공백을 모두 제거 ex) " k h ".trim()->"k h" ➰ 키보드 이벤트 onkeydown : 키가 눌러졌을 때 (키보드을 누르자마자!) onkeypress : 키가 눌러지고 있을 때 (키보드을 누르고 있을때 == 실제로 글자를 쓸때) onkeyup : 키를 눌렀다 땠을때 (사용빈도 ↑ ) ➰ 버튼 색 바꾸기 방법 1) 요소를 문서에서 찾아서 선택 document.getElementById("test2-3").onclick=function(event){ document.getElementById("test2-3").style.backgroundColor="pink"; } 방법 2) 매개변수 e 또는 event 활용하기 -> 이벤트 핸들러에 e 또는 ev..
📌배열(Array) -> 변수를 묶음으로 다루는 것( 변수가 연속적으로 나열됨!) 값이 저장되기 전까지 자료형이 저장되지 않음 JS 배열의 특징 1. 자료형 제한 x 2. 길이 제한 x 📌배열관련 함수 🔊 push() : 배열 마지막 요소로 추가 🔊 pop() : 배열 마지막 요소로 꺼내옴 배열. indexOf("값") : 일치하는 값을 가진 요소의 index를 반환 없으면 -1 반환 배열.sort([정렬기준함수]) : 배열내 요소를 오름차순으로 정렬(문자열) 단, [정렬 기준 함수]가 작성되면 정렬 결과가 달라짐 숫자 오름차순 숫자 오름차순 arr2.sort(function(a,b){ return a-b;})); 배열.toString() : 배열 요소를 하나의 문자열로 출력 (요소 사이에 "구분자" 추..
🔊 문자열 (String 내장 객체) 자바스크립트에는 문자열을 나타내는 객체(String)이 존재하며 문자열과 관련된 기본적인 함수를 제공해준다. 문자열.indexOf("str") : 문자열에서 str과 일치하는 부분이 시작되는 인덱스를 반환 없으면 -1 반환 const str1 = "Hello world!"; console.log(str1.indexOf("e")); // 1번째 인덱스에 위치하고 있다. console.log(str1.indexOf("l")); // 3번째 인덱스에 위치하고 있다 ( 가장 먼저 검색된 인덱스 반환) console.log(str1.indexOf("가"));//-1/ "가"가 없어 -1이 반환된다. 문자열.substring(시작인덱스,종료인덱스(미포함)) : 문자열 일부 잘라..
