목록분류 전체보기 (208)
YJ의 새벽
리셋 HTML 삽입 미리보기할 수 없는 소스 영어로 색 넣어보세요.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bPpHeO/btr1KPYhPqQ/rTwyl3buxmf4WjBgxu81L0/img.png)
순회(탐색) 메서드 -- Ancestors (조상) 메서드 : 선택된 요소의 상위 요소들을 선택할 수 있는 메서드 -- $('요소명').parent() : 선택된 요소의 바로 위 상위 요소 -- $('요소명').parents( [매개변수] ) : 선택된 요소의 모든 상위 요소 리턴 매개변수가 있으면 매개변수와 일치하는 부모만 리턴. -- $('요소명').parentsUntil( [매개변수] ) : 선택된 요소부터 매개변수 요소까지 범위의 요소 리턴. 순회(탐색) 메서드1 div(wrap) div (great-grand parent) ul (grand parent) li (direct parent) span div (grand parent) p (direct parent) span $(function(){..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/SNxck/btr1Qx95Y61/J0hTfdFri6V5wnUdO0gmgK/img.png)
태그 선택자 -- jQuery 선택자는 css선택자와 같다 !! 태그 선택자 테스트1 테스트2 테스트3 테스트4 테스트5 테스트6 $(document).ready(function(){ // jQuery 선택자는 css 선택자와 같다 !! $("h5").css("color","red"); $("p").css("color","blue"); $("h5, p").css("backgroundColor","yellow"); //document.getElementsByTagName("p").style.color="green"; 배열에 스타일적용 X const arr = document.getElementsByTagName("p"); for(let result of arr){ result.style.color="gre..
// jQuery 라이브러리가 추가되지않았을때 나오는 오류 Uncaught ReferenceError: $ is not defined jQuery 란? ** jQuery 를 나타내는 기호는 '$' 이다 !!! -- 기존에 복잡했던 클라이언트 , 즉 HTML스크립팅을 간소화하기위해 고안된 Javascript 라이브러리 -- jQuery 는 적은양의 코드로 빠르고 풍부한 기능을 제공함. ( 라이브러리 (library) ) : 프로그램 , 프로그래밍 언어에 없는 추가적인 기능 jQuery 라이브러리 연결 방법 -- jQuery 공식 홈페이지 : https://jquery.com/ -- jQuery CDN 코드 제공 페이지 : https://code.jquery.com/ 1. jQuery 라이브러리 다운로드하여..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/d6ehLd/btr1vsu6gie/WgM5gBLgQFHSLm5JpyFp3K/img.png)
즉시 실행함수 ( 익명함수 ) -- ( function ([매개변수]) { // 함수정의 } ) ( ) ; -- 익명함수의 한 종류로써 함수가 정의 되자마자 실행하는 함수. -- 함수선언 및 호출을위한 탐색과정이 생략되기때문에 속도적 우위를 가지고있다. -- 변수명 중복을 방지할수 있다. -> 즉시실행함수 내부변수는 지역변수로 분류 . //변수명 중복돼도 상관없음. //페이지 로딩 시 바로 수행 ( function(){ const str = "저녁메뉴추천!!"; console.log(str); } )(); ( function(){ const str = "아무값이나 !!!!"; console.log(str); } )(); 화살표 함수 ★ ★ ★ 1. 기본형태 ([ 매개변수 ]) => { 함수정의 } ; f..
추가 계산 // 추가버튼 클릭시 동작 document.getElementById("add").addEventListener("click",function(){ // // // × // //div 요소 생성 const div = document.createElement("div"); // //div에 row class 추가 div.classList.add("row") // //input 요소 생성 const input = document.createElement("input"); // //input에 in class 추가 input.classList.add("in"); // //input 에 type="number" 추가 input.setAttribute("type","number"); // // 요소에 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dINjA6/btr1CLVan8m/QXxpBKQWZPmSwRwqyZUNl1/img.png)
DOM ( Document Object Model ) -- HTML (웹문서,웹페이지) 문서를 객체 기반으로 표현한 것 -- HTML 문서에 작성된 내용을 트리구조 ( 계층형 ) 으로 나타냈을때 각각의 태그 , TEXT , COMMENT 등을 Node 라고 한다. Node 와 Element 의 차이 -- Node : 태그 (요소 노드) , 속성, 주석, 내용(텍스트 노드) 등을 모두 표현 -- Element : Node 의 하위 개념으로, 요소 노드만을 표현. Node 탐색 -- 부모 - 요소. parentNode : 요소의 부모 노드를 탐색해서 반환 -- 자식 - 요소. childNodes : 요소의 자식 노드를 모두 반환 ( NodeList 형태 ) - 요소. firstChild : 첫번째 자식 노드..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bNGAfz/btr1vsBDW2P/PQWVAQWmTxhAWKViGFPatk/img.png)
자바 스크립트 객체 -- 자바 스크립트의 객체는 { } 안에 Key : value 가 모여있는 형태로 작성된다. (Map 형식) -- 자바 스크립트 객체 = { K : V , K : V , K : V } .. -- 자바 스크립트 객체 모양의 문자열 - JSON ( JavaScript Object Notation ) 자바스크립트 객체 표기법 --> " { K : V , K : V , K : V } " -- 자바 스크립트에서 객체 생성하는 방법 1. { } : 객체 리터럴 표기법을 이용한 생성 2. 생성자 + new 생성자( ) 를 이용한 생성 - JS 객체의 Key 는 무조건 string (묵시적 string) -> Key 작성시 " " , 모두 string 으로 인식 --객체의 값을 얻어오거나 대입하는 ..