DOCTYPE html> jQuery - Attribute $(function() { // .data() // - 사용자 정의 데이터 속성을 설정/반환하기 위한 메서드 // - 데이터 속성을 설정하기 위한 형식 // .data(key, value) → key : 'data-' 뒤에 오는 이름 // .data(object) → // - 데이터 속성을 반환하기 위한 형식 // .data(key) → key : 'data-' 뒤에 오는 이름 // .data() var $html = $("#html"); var meaning = $html.data("meaning"); console.log("Meaning of html = " + meaning); var $css = $("#css"); $css.data("me..

DOCTYPE html> jQuery - Traversal Method $(function() { // .filter() 메서드 // - jQuery 객체 내의 요소들 중 특정 요소를 선택하기 위한 메서드 // - 이때, 인자 값으로 함수를 전달하면 각 요소마다 // 개발자가 원하는 방식으로 요소를 선택할 수 있다. // → jQuery 객체의 메서드 중 값을 설정하는 메서드와 // 검사를 하기 위한 메서드의 대부분이 인자 값으로 함수를 받을 수 있다. // → jQuery 객체 내의 각 요소마다 기능을 수행하기 위함 // → jQuery 객체 내의 요소들의 순서에 영향을 받기 때문에 // :lt 선택자와 .prevAll() 메서드를 사용할 때 주의 // → 11.14 일자 수업 참조 var $itmes..

DOCTYPE html> $(function() { // document 객체의 ready 이벤트 핸들러 // 문서 객체 탐색 메서드 // jQuery 함수를 통해 DOM 에서 요소를 탐색 $("#list1").css("backgroundColor", "navy"); // #list1 요소의 하위 요소들을 탐색하여 조작 $("#list1 > li").css("color", "orange"); $("#list1 > li:even").css("border", "5px solid yellowgreen"); $("#list1 > li:odd").css("border", "5px solid yellow"); // jQuery 함수만 이용할 경우 // 매 번 DOM 전체에서 탐색을 하게 된다. //---------..

DOCTYPE html> jQuery - Selector $(function() { // document 객체의 ready 이벤트 핸들러 // → HTML 문서를 읽은 다음 DOM 구축을 끝낸 이후에 발생하는 이벤트 // → DOM 구축이 끝난 시점이기 때문에 모든 요소에 접근할 수 있다. //--------------------------------------------------------------- // 선택자(Selector) // - CSS 에서 사용했던 선택자 모두 사용 가능 // - jQuery 에서 추가된 필터 선택자가 있다. // 필터 선택자(Filter Selectop // - ':' 문자로 시작하는 선택자 // - 앞에 작성된 선택자에 의해 선택된 // 모든 요소들을 기준으로 필터링..

DOCTYPE html> // jQuery 시작 // - jQuery 라이브러리를 이용하여 JavaScript 프로그램을 작성 // → 'jQuery 객체의 메서드를 이용'하여 프로그램을 작성 // → jQuery 객체의 메서드를 이용하기 위해 'jQuery 객체를 생성/반환' // → jQuery 객체를 생성/반환하기 위해 'jQuery 함수에 객체 또는 선택자를 전달' // → jQuery 함수를 통해 jQuery 객체를 생성/반환하여 문서 객체를 조작 // jQuery 라이브러리를 이용하여 JavaScript 프로그램을 작성할 때 // 기존에 사용하던 window 객체의 load 이벤트가 아닌 // 비슷한 document 객체의 ready 이벤트를 이용 // → 앞으로는 document 객체의 re..