WEB108 Element 객체 정의 Element 객체* 엘리먼트를 추상화한 객체이다.* DOM은 HTML뿐만 아니라 XML, SVG 등의 마크업 형태의 언어를 제어하기 위한 규격이기 때문에 Element는 마크업 언어의 일반적인 규격을 정의하고 있고, 각각의 구체적인 언어의 기능은 HTMLElement, SVGElement과 같은 객체를 통해추가하여 사용하고 있다. - DOM 계층 구조 - 2016. 10. 15. JQuery 객체 JQuery 객체* JQuery 함수의 리턴 값으로 JQuery 함수를 이용해서 선택한 엘리먼트들에 대해서 처리할 작어을 프로퍼티로 가지고 있는 객체이다.* 조회된 엘리먼트가 담겨있다. JQuery 객체는 유사배열의 형태로 조회된 엘리먼트를 가지고 있기 때문에 배열처럼 사용해서 엘리먼트를 가져올 수 있다. - 암시적 반복* DOM과는 다르게 JQuery 객체의 메소드를 실행하면 선택된 엘리먼트 전체에 대해서 동시에 작업이 처리된다. 암시적 반복은 값을 설정할 때만 동작한다. 값을 가져올 때는 선택된 엘리먼트 중 첫번째에 대한 값만을 반환한다. - 체이닝*선택된 엘리먼트에 대해서 연속적으로 작업을 처리할 수 있는 방법이다. - 조회된 결과 열람1. 엘리먼트 조회 2. JQuery를 이용해 DOM 객체 제어.. 2016. 10. 15. JQuery : 기본 사용 JQuery 기본 문법* $ 는 JQuery의 문법을 사용자는 정의 표현을 뜻한다.* #은 ID값을 가진 HTML 요소를 선택하라는 의미가 되고 . 은 Class값을 선택하라는 뜻이다. JQuery 코드 생산성 - Befor 1 : DOM 사용 시document.getElementById('id'); - After 1 : JQuery 사용 시$('#id'); - Befor 2 : DOM 사용 시 var lis = document.getElementByTagName('li'); for( var i = 0 ; i < lis.length ; i++ ){ lis[i].style.color = 'red'; } - After 2 : JQuery 사용 시 $('li').css('color', 'red') HTML 엘.. 2016. 10. 15. JQuery JQuery* DOM을 내부로 감추고 보다 쉽게 웹페이지를 조작할 수 있도록 돕는 JavaScript 라이브러리이다.* 엘리먼트를 선택하는 강력한 방법과 선택된 엘리먼트들을 제어할 수 있는 다양한 수단을 제공하는 자바스크립트 라이브러리 - JQuery의 로드 방법 1. 라이브러리 파일을 다운 받아 직접 연결2. 원하는 라이브러리 버전 직접 연결 3. CND를 이용하는 방법 ( 보안 문제 가능성 있음. ) - 사용 예제 * Body 태그 아래에 Hello World 코드가 만들어진다.* jQuery(document).ready(function($){ }); 로 코드를 감싸는 것이 이상적이다. 2016. 10. 14. 이전 1 ··· 19 20 21 22 23 24 25 ··· 27 다음 반응형