인생은 양탄자의 무늬짜기

Ajax의 동작 방식 브라우저에서 Ajax 요청을 담당하는 XMLHttpRequest라는 객체를 통해 서버에 정보를 요청, 응답받음 콜백 동작 순서 성공 시 : success > complete > done > always 실패 시 : error > complete > fail > always jQuery를 이용한 Ajax Ajax의 기본 Method를 이용하면 XMLHttpRequest를 직접 사용하게 되는데 때문에 이러한 복잡한 과정 없이 jQuery를 이용하면 간단하게 서버와 데이터를 주고받을 수 있음 또한 크로스 브라우징 문제도 jQuery가 알아서 해결해주고 여러 가지 편리한 기능들을 제공 $.ajax([settings]) 함수의 property https://api.jquery.com/jque..

페이지마다 다른 버전의 jQuery 로드하기 jQuery의 autocomplete 기능이 TypeError: $(...).autocomplete is not a function 에러가 뜨며 기능이 동작하지 않음 autocomplete 기능이 jQuery의 모든 버전에서 작동하는 것이 아니기 때문 기능이 작동하는 jQuery 버전(1.12.1)을 사용하기 위하여 페이지에 필요한 페이지에서만 가져와 사용하기로 함 다른 버전의 jQuery가 필요한 페이지에 jQuery 로드하여 변수로 지정해놓고 필요한 곳에 지정해놓고 사용 1️⃣ 필요한 페이지 상단에 모듈 불러오기 2️⃣ script 태그 안에 변수로 지정해놓기 3️⃣ 필요할 때 사용 - $(document) 대신 $j112(document) 이런 식으로 사..

ajaxSubmit() ❓ jQuery 플러그인으로 form태그 내부의 데이터를 비동기 처리해 줌 특징 1️⃣ submit이지만 비동기로 처리할 수 있음 2️⃣ 동작 이전의 함수처리, 이후의 함수처리도 정의할 수 있음 주의점 submit기능 동작 정의 후 return false;를 해줘야 함 이 부분을 처리하지 않으면 아무리 success, error옵션을 처리하여도 페이지가 submit이 먹히기 때문에 페이지 리로드 현상이 발생하고 결과값에 따른 동작(alert() 메시지 출력)을 정상적으로 처리 할 수 없음 사용 예시 form.html title: Content: form.js 참고 자료 👉 http://www.joshi.co.kr/index.php?mid=board_nCHS89&document_sr..

jQuery 엔터키 이벤트 예시 👇 $("#selectBox").on("keyup",function(key){ if(key.keyCode==13) { alert("엔터키 이벤트"); } });

선택자에 변수 넣는 방법 1 . index로 선택하기 var id = 'example'; $('[index='+ id + ']'); 2. id로 선택하기 var id = 'example'; $('#'+ id ); 3 . class로 선택하기 var id = 'example'; $('.'+ id );

show | hide fadeIn | fadeOut | fadeTo animate css animation효과생성. callback함수

문서객체 제어 네이버로 이동 요소삽입1 : 추가할 요소 기준 $(B).appendTo($(A)) : B를 A의 자식요소로 마지막에 추가 $(B).prependTo($(A)) : B를 A의 자식요소로 처음에 추가 $(B).insertAfter($(A)) : B를 A의 형제요소로 뒤에 추가 $(B).insertBefore($(A)) : B를 A의 형제요소로 앞에 추가 A A A A 요소삽입2 : 기존 요소 기준 $(A).append($(B)) : B를 A의 자식요소로 마지막에 추가 $(A).prepend($(B)) : B를 A의 자식요소로 처음에 추가 $(A).After($(B)) : B를 A의 형제요소로 뒤에 추가 $(A).Before($(B)) : B를 A의 형제요소로 앞에 추가 A A A A 요소 삭제..

each 자바스크립트의 for ..in문과 비슷 배열, 객체의 요소를 순차적으로 접근 $.each(object, 콜백함수) ->배열이면 요소 하나씩, 객체면 키 벨류 : 배열/객체 $(배열).each(콜백함수) : 객체 사용불가 객체 : Object.keys(객체).forEach(callbackFunction) $(function() { let arr = ["홍길동","신사임당","이순신"]; $.each(arr, function(index, elem) { console.log(index + " : " + elem); }); //배열을 jquery객체로 변환 후 사용할 것 $(arr).each((i, e) => { console.log(i + " : " + e); }); let obj = { name :..

mouseover/mouseout 자식요소에 접근할때도 이벤트 발생 mouseenter/mouseleave 자식요소 접근시는 이벤트 발생하지 않음(더 많이 사용) key관련 이벤트 keydown keypress(자주 사용) keyup 동적으로 글자수 세기 0/30 on | off on : 이벤트 핸들러 연결 bind off : 이벤트 핸들러 제거 unbind 10CM 이벤트 버블링 이벤트 버블링(자식요소에 발생한 이벤트가 부모요소로 전파)을 사용하는 on이벤트 핸들링 안녕 잘가 trigger 0

traversing(요소 탐색) 예제 div (parent) p span h1 h2 h3 h4 p div.test ul1 li1-1 li1-2 ul2 li2-1 li2-2 li2-3 ul3 li3 fromMe