Study Memos/JavaScript Front-End (48) 썸네일형 리스트형 jQuery 객체 (Section 17) 참고> opentutorials.org/course/1375/6670 1. jQuery 객체: jQuery 함수의 리턴값 ex) var li = $('li'); 2. css() 등의 jQuery 함수는 당연한 이야기이지만 DOM 객체에서 호출되는게 아니라 jQuery 객체에서 호출되는 것이다. ex) li.css(...) HTMLCollection (Section 16) 참고> opentutorials.org/course/1375/6666 1. console.group() & console.groupEnd() : console에 출력하는 메시지를 그룹핑해주는 함수 2. HTMLCollection에서 collection을 수정하면 바로 반영되기 때문에 re-load 할 필요 없다. HTMLElement (Section 15) 참고> opentutorials.org/course/1375/6665 1. 객체.constructor.name => 객체의 이름을 얻어올 수 있음 2. HTMLCollection: 유사 배열임 3. DOM Tree: DOM의 계층 구조를 나타내는 트리(최상위 객체는 Node) jQuery에서 제어 대상 찾기 (Section 14) 참고> opentutorials.org/course/1375/6658 1. $: jQuery 함수 => jQuery 객체를 리턴함 => ex) $(css 선택자) 2. css 선택자로는 [ Tag 이름 ] OR [ "." + 클래스명 ] OR [ ID명 ] 을 사용할 수 있음 3. CSS Chaining: $(css 선택자).css(CSS 이름, CSS 값).css(CSS 이름, CSS 값).css(...)... => 굳이 css() 함수가 아니어도 jQuery에서 제공하는 다른 함수들도 사용 가능 jQuery (Section 13) 참고> opentutorials.org/course/1375/6630 1. jQuery : DOM을 내부에 감추고 보다 쉽게 웹페이지를 조작할 수 있도록 돕는 라이브러리 도구. 제어 대상을 찾기 (Section 12) 참고> opentutorials.org/course/1375/6656 1. getElementsByTagName(): 파라미터로 받은 Tag 이름에 해당하는 Element들을 유사 배열로 리턴함 2. 특정 Element의 하위에 있는 Element들만 Tag 이름으로 찾고 싶을 경우, 해당 Element의 getElementsByTagName() 함수를 호출하면 됨 3. getElementsByClassName(): class 이름으로 Element들을 찾음 4. getElementById(): ID 이름으로 Element를 찾음 => 성능적인 측면에서 다른 함수들보다 좋음 => Element 하나만을 리턴함 (ID는 키값이기 때문에 해당되는 Element가 하나밖에 없음) => 많이 쓰이는 함수 5. .. DOM (Section 11) 참고> opentutorials.org/course/1375/6655 1. DOM(Document Object Model): 웹페이지를 자바스크립트로 제어하기 위한 객체 모델 2. window 객체의 document 프로퍼티를 통해 사용할 수 있다. 창 제어 (Section 10) 참고> opentutorials.org/course/1375/6651 1. window.open 함수: 새 탭을 만듦 => _self 파라미터 : 새 탭을 만들지 않고 기존 탭을 사용 => _blank 파라미터 : 새 탭을 만듦 => 창 이름 파라미터 : 해당 이름의 탭 하나를 생성, 중복X => 창 크기 파라미터: 새 탭의 크기를 조작할 수 있음; 보안상 브라우저에서 이 기능을 활성화 안되게 하는 경우도 있음 2. 팝업 차단 => 사용자의 인터렉션이 없이 창을 열려고 하면 팝업이 차단됨 (사용자가 명시적으로 팝업을 허용해 주어야 함) => 스크립트에서 window.open 하면 팝업 차단됨, But 사용자가 버튼을 눌렀을 때 window.open 되는 건 팝업 차단이 별도로 동작하지 않음 이전 1 2 3 4 5 6 다음