animation? js와 css를 이용해서 엘리먼트에 동적인 효과 부여 jQuery의 효과 메소드를 호출해서 간단히 효과 부여 가능 ex1) target fade out : 서서히 사라짐 fade in : 서서히 나타남 hide : 숨김 show : 나타내기 silde down : 슬라이드 형태로 내려오면서 나타남 silde ip : 슬라이드 형태로 올라가면서 사라짐 mix : 여러 애니메이션 메소드 혼합 가능 animate 메소드 문법 : animate(최종 결과,진행 속도) ex2) » Run Hello! run 버튼 클릭 시 > 지정한 최종 결과로 지정한 시간에 맞춰서 변화

traversing? 체인 컨텍스트를 유지하면서 제어의 대상이 되는 엘리먼트를 변경하는 기법 * s는 스타일로 배경색과 테두리 효과 적용된 상태라는 것을 미리 알기! 래퍼로 root 선택 > s라는 클래스 추가 .children() root의 children에 s 클래스 추가 .first() root의 children의 첫번째 엘리먼트에 s class 추가 .next() root의 children의 첫번째 엘리먼트의 다음 엘리먼트에 s class 추가 .find('selector') 현재 엘리먼트에서 selector에 해당되는 자손 즉, li에 s class 추가 .closest('selector') 가장 가까운 selector 조상 엘리먼트에 s class 추가 위의 예제와 같이 체인으로 엮어서 계속 ..

Form? 서버로 데이터를 전송하기 위한 수단 Query는 폼을 제어하는데 필요한 이벤트와 메소드를 제공 ex1) .focus() : 주목 받으면 .blur() : 포커스와 반대의 개념 .change() : 셀렉터를 정하여 해당 셀렉터의 값이 변할 경우 변화를 캐치 .select() : 어떤 특정한 text 필드 안에서 어떤 데이터가 선택(드래그) 됐을 때 focus 이벤트 : input 태그 클릭 시 input 태그 다음 태그 focus html 추가 blur 이벤트 : input 태그 포커스 해제 시 input 태그 다음 태그 blur html 추가 change 이벤트 : 비어 있던 input 태그에 text 입력 (변화 있을 시) alert창 띄우기 select 이벤트 : input 태그 text ..

jQuery 엘리먼트를 제어하는 일관되고 풍부한 기능을 제공 - 자식으로 삽입 .append(), .appendTo(), .html(), .prepend(), .prependTo(), .text() I would like to say: - 형제로 삽입 .after(), .before(), .insertAfter(), .insertBefore() I would like to say: .after() 사용했기 때문에 다음 형제로 삽입! - 선택한 태그 부모로 감싸기 .unwrap(), .wrap(), .wrapAll(), .wrapInner() Span Text What about me? Another One .wrap() 사용하여 아래의 여러부모태그로 감싸는 것 사이에 들어감! - 삭제 .detach(),..

event? js나 jquery에서 이벤트는 브라우저에서 일어나는 사건(클릭, 마우스 이동, 타이핑, 페이지 로딩 등) jQuery의 event 크로스브라우징의 문제 해결 - on으로 이벤트 핸들러 설치 on : 현재 존재하지 않는 엘리먼트에 이벤트 설치 O > 동적 이벤트 O click me 클릭 시 이벤트 발생 > alert 창 뜸 - trigger로 이벤트 핸들러를 강제 실행 trigger 클릭 시 전달된 래퍼에 설치된 이벤트 호출하여 이벤트 발생 - off로 event 제거 off 버튼 클릭 시 click me에 설치된 event 제거 됨 trigger 버튼은 click me에 설치된 이벤트 호출하기 때문에 이벤트가 제거되어서 클릭 시 아무 동작 안 하게 됨. - click, ready와 같은 다..

Chain? jQuery의 메소드들은 반환값으로 자기 자신을 반환해야 한다는 규칙을 가지고 있다. 이를 이용하면 한번 선택한 대상에 대해서 연속적인 제어가 가능. 장점 : 코드가 간결 인간의 언어와 유사해서 사고의 자연스러운 과정과 일치. ex) 아래 a 태그의 속성값을 변경하는 코딩 jQuery 1.jQuery를 이용 //href 속성값 변경 타겟 속성값 변경 jQuery('#tutorial').attr('href', 'http://jquery.org').attr('target', '_blank').css('color', 'red'); 래퍼의 context가 유지가 됨! jquery 메소드는 자신을 return 하기 때문에 (여러개의 서술어가 가능한 것과 같음) 2.js의 DOM 이용 var tutor..