javascript/jQuery 썸네일형 리스트형 6. jQuery CSS 6. jQuery CSS ■ jQuery API CSS ο CSS 1) css(name) - 의미 최초의 요소가 가진 style 속성의 값을 리턴 2) css(properties) - 의미 매개변수로 전달된 객체에 키로 명시한 CSS 속성을 일치하는 엘리먼트의 해당 값으로 설정한다. - 매개변수 properties: (Object)확장 집합에 속한 모든 엘리먼트에 설정할 CSS 속성을 포함한 객체 - 반환값 : 확장집합 3) css(name, value) - 의미 일치하는 각 엘리먼트에 name 매개변수의 CSS 속성을 value 값으로 설정한다. - 매개변수 value: (String|Number|Functioin)프로퍼티 값을 포함하는 문자열, 숫자, 함수. - 반환값 : 확장집합 사용예 $("div.. 더보기 5. jQuery Events 5. jQuery Events ■ jQuery API Events ο Page Load 1) ready(handler) - 의미 DOM 이 로드 되어 조작·해석이 가능하게 된 타이밍에 함수를 실행 ο Event Handling 1) bind(eventType, [eventData], handler(eventObject)) - 의미 일치된 집합에 있는 모든 엘리먼트에 지정한 이벤트 타입의 핸들러로 전달된 함수를 할당한다. - 매개변수 eventType: (String)핸들러를 할당할 이벤트 타입의 이름 eventData: (Object)핸들러 함수에서 사용하도록 Event 인스턴스에 data라는 프로퍼티로 제공되는 데이터. 생략 가능 - 반환값 - 확장 집합 - 사용예 // '.'을 통하여 여러 커맨드를 .. 더보기 4. jQuery 조작_Manipulation 4. jQuery 조작_Manipulation ■ jQuery API Manipulation(조작) ο 개요 DOM의 제어, 갱신 조작 ο 내부 삽입 1) append(content) - 의미 모든 요소 내부에 컨텐츠를 추가한다. 사용예 // p 태그에 내용 추가 -> 결과 : 『중요과목 : 프레임워크』 $("p").append("프레임워크"); : 중요과목: 2) appendTo(content) - 의미 요소의 내용을 다른 요소에 추가한다. 사용예 // body 마지막 부분에 제이쿼리 추가 $("제이쿼리").appendTo("body"); // id가 a인 태그의 뒷 부분에 span 태그의 내용을 추가 -> 결과 : 『중요과목 : 프레임워크』 $("span").appendTo("#a"); : 프레임워크.. 더보기 3. jQuery 속성_Attributes 3. jQuery 속성_Attributes ■ jQuery API Attributes ο 개요 DOM의 속성 제어 ο Attr 1) attr(attributeName) - 의미 해당 속성 이름의 값을 return 한다. 매치되는 첫번째 것만 가져옴 사용예 // a라는 id를 가진 요소의 title 속성을 b라는 id를 가진 요소에 작성된다. $(function(){ var title = $("#a").attr("title"); $("#b").text(title); }); 2) attr(attributeName, value) - 의미 해당 요소의 속성(attributeName)의 값을 변경시킨다. 사용예 // a라는 id를 가진 요소의 src경로를 img/test.gif로 변경한다. $(function().. 더보기 2. jQuery 선택자_Selectors 2. jQuery 선택자_Selectors ■ jQuery API Selectors ο 개요 DOM의 요소(엘리먼트)를 선택 ο DOM(Document Object Model) - HTML 문서의 요소를 제어하기 위해 웹 브라우저에서 처음 지원 - DOM은 동적으로 문서의 내용, 구조, 스타일에 접근하고 변경하기 위한 방법 - 브라우저별로 DOM 구현이 호환되지 않음에 따라, W3C에서 DOM 표준 규격을 작성 ο 기본 셀렉터 - #id : 지정된 아이디를 가지는 엘리먼트와 일치하는 셀렉터. - element : 모든 엘리먼트와 일치하는 셀렉터.(태그 등) - .class : 지정된 클래스명을 가지는 요소를 선택 - * : 모든 엘리먼트를 선택 한다. - selector1, selector2, ... s.. 더보기 1. jQuery 개요 및 Core ■ jQuery 개요 ο 개요 - jQuery는 빠르고 간결한 JavaScript Library - HTML document traversing, 이벤트 처리, 애니메이션, Ajax 지원을 단순화하여 빠른 웹 개발을 가능하게 함 - CSS3 규격 지원 : CSS 1 ~ 3와 기본 XPath 지원 - 다양한 브라우저 지원 - 경량 파일(90KB 수준의 파일크기) - John Resig에 의해 개발 ο 다운로드 및 라이브러리 포함 - jQuery 다운로드 http://jquery.com/ - jQuery를 사용하기 위한 라이브러리 포함 ■ jQuery API Core ο 개요 jQuery의 핵심으로 jQuery 오브젝트를 의미 한다. ο jQuery 사용 jQuery는 $로 대체 가능. jQuery() 메소.. 더보기 이전 1 다음