목록Web/JavaScript (7)
개발합니다
ajax란? Asynchronous JavaScript and XML 약자 자바스크립트를 이용해서 비동기식으로 서버와 통신하는 방식. 꼭 xml을 이용할 필요는 없고, 최근에는 json을 더 많이 이용한다. $.ajax(settings) 으로 사용한다. data : 서버에 전송할 데이터, key/value 형식의 객체 dataType : 서버가 리턴하는 데이터 타입 (xml, json, script, html) type : 서버로 전송하는 데이터의 타입 (POST, GET) url : 데이터를 전송할 URL success : ajax통신에 성공했을 때 호출될 이벤트 핸들러 - 예제 data에 담긴 POST 형식의 데이터를 url로 전달하고, json 타입으로 리턴받는다. 통신에 성공했을 시 반환 받은 j..
폼이란? 서버로 데이터를 전송하기 위한 수단이다. - .focus() | .blur() | .change() | .select() input 엘리먼트에 focus가 갔을 떄 focus input 엘리먼트에 focus가 사라졌을 때 blur input 엘리먼트의 값이 변경되었을 때 alert창이 뜬다. input 엘리먼트의 값이 선택됐을 때 select - .submit() | .val() form 태그에 submit이 일어났을 때, 만약 input 엘리먼트의 첫번째 = 의 값이 correct일 경우 Validated... span 값을 변경하고 return true; 를 통해 submit이 완료된다. (form action 실행) 만약 input 엘리먼트의 첫번째 = 의 값이 correct가 아닐 경우 ..
jQuery는 엘리먼트를 제어하는 일관되고 풍부한 기능들을 제공한다. - 자식으로 삽입 (.append()) I would like to say: 결과 I would like to say: Hello - 형제로 삽입 (.after()) I would like to say: 결과 I would like to say: Hello - 부모로 감싸기 (.wrap()) Span Text What about me? Another One 결과 Span Text - 삭제 (.remove()) Hello how are you? Call remove() on paragraphs 버튼을 누를 시 p 태그를 모두 삭제한다. - 치환 (.replaceAll(), .replaceWith()) Hello cruel World 결과..
event란? 시스템에서 일어나는 사건을 의미한다. (클릭, 마우스 이동, 타이핑, 페이지 로딩 등 ..) jQuery의 이벤트 크로스 브라우징의 문제를 해결해준다. click, ready와 같이 다양한 이벤트 헬퍼(helper)를 제공한다. bind로 이벤트 핸들러 설치, unbind로 제거 ==> on, off로 대체 됨. - bind, unbind, trigger를 이용한 이벤트의 설치, 제거, 호출 function clickHandler(e){ alert('thank you'); } $(document).ready(function(){ $('#click_me').bind('click', clickHandler); // click_me id를 가진 엘리먼트를 click할 시 clickHandler ..
jQuery 메소드들은 반환값으로 자기 자신을 반환해야 한다는 규칙을 갖고 있다. 이를 이용해서 한번 선택한 대상에 대해 연속적인 제어를 할 수 있는데 이를 chain이라고 한다. jQuery $('#tutorial').attr('href', 'http://jquery.org').attr('target', '_blank').css('color', 'red'); 부분을 분해해보면 $('#tutorial') -> id가 tutorial인 엘리먼트를 선택해 .attr('href', 'http://jquery.org') -> href 속성 값을 'http://jquery.org'로 변경하고, .attr('target', '_blank') -> target 속성 값을 _blank로 변경하고, .css('color..
jQuery는 엘리먼트 오브젝트를 전달하는 것보다 CSS스타일 선택자를 전달하는 경우가 많다. -> 효과적으로 엘리먼트를 선택할 수 있기 때문. - Basic
[jQuery] 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리. - jQuery API Documentation https://api.jquery.com/ jQuery API Documentation jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. If you're new t a..