DOCTYPE html> jQuery - Event $(function() { // key 이벤트 var $remain = $("#remain"); $("#textarea1").on({ // eventName : eventHandler keydown : function(event) { console.log("keydown event!"); // 입력 요소의 입력된 값 = value 속성 var value = $(this).val(); console.log("value = " + value); // event 객체 내에 어떤 키를 눌렀는지 알려주는 속성 // event.keyCode = event.which console.log("keyCode = " + event.keyCode); switch(event..

DOCTYPE html> jQuery - Event Object $(function() { // 이벤트 객체(Event Object) // - 이벤트가 발생했을 때 이벤트와 관련된 정보를 담고 있는 객체 // - 이벤트 객체를 통해 이벤트의 상태와 이벤트 조작 // - 단, jQuery 메서드 내에서 사용되는 이벤트 객체는 // JavaScript 이벤트 객체의 속성들을 정리한 이벤트 객체 // → JavaScript 에서 사용하던 이벤트 객체와 // jQuery 에서 사용하는 이벤트 객체는 다르다. // 이벤트 객체 속성 // - event.type 발생한 이벤트 이름 // - event.which 이벤트를 발생시킨 마우스 또는 키보드의 코드 // - event.target 이벤트를 발생한 요소(typ..

DOCTYPE html> jQuery - Event .on { background-color: yellowgreen; color: navy; font-weight: bold; } .highlight { border: 10px solid pink; } $(function() { // document 객체의 ready 이벤트 핸들러 // jQuery 이벤트 연결 // - 기본 이벤트 연결 // : JavaScript 에서 사용하던 .addEventListener 와 같은 방식 // : .on() 메서드를 통해 이벤트 이름과 핸들러를 지정하여 연결하는 방식 // - 간단한 이벤트 연결 // : 이벤트 이름으로 된 메서드를 통해 이벤트 핸들러를 연결하는 방식 // ex) .click(function() { ....

DOCTYPE html> .buttons {width: max-content; margin: 0 auto;} .buttons > button { font-size: 1em;} .gray-box > ul { border: 5px solid yellowgreen; margin: 10px 0; border-radius: 8px; color: white; } .gray-box > ul > li { border: 3px solid white; margin: 10px; padding: 0 1em; } .gray-box > ul > li.prepend { border: 3px solid orange; } .gray-box > ul > li.append { border: 3px solid blueviolet; } .g..

DOCTYPE html> jQuery - Attribute #box1 { width: 100px; height: 100px; padding: 50px; border: 20px solid navy; background-color: blueviolet; } #container { position: relative; height: 500px; } #box2 { margin: 100px; height: 100px; background-color: yellowgreen; margin: 50px; position: relative; top: 100%; } $(function() { // document 객체의 ready 이벤트 핸들러 // 문서 객체의 스타일 설정 / 반환 // - css() 메서드 // : 속성 ..

DOCTYPE html> jQuery - Attribute .red { color: red; border: 2px solid red; } i {font-style: italic;} $(function() { // 문서 객체의 class 속성 조작 // 메서드 종류 // - addClass() // : 문서 객체에 class 속성 추가 // - removeClass() // : 문서 객체에 class 속성 제거 // - toggleClass() // : 문서 객체에 class 속성 추가 또는 제거 // 추가 ↔ 제거 // - hasClass() // : 문서 객체에 가진 class 속성 중 // 특정 class 가 있는지 검사 $("#list1 > li").on("click", function() { //..