FrontEnd/jQuery

jQuery 라이브러리를 이용한 Ajax 사용 방법에 대하여 XHR 객체를 이용한 순수 자바스크립트 AJAX 는 크로스 브라우징이 지원되지 않는다 XHR 객체를 이용한 코드 작성이 불편하다 jQuery Ajax API 는 크로스 브라우징이 지원된다 jQuery DOM을 이용하여 응답데이터를 손쉽게 적용할 수 있다 jQuery Ajax API 종류 $객체.load(url, [data] [complete]); $객체.get(url, [data] [success] [dataType]); $객체.ajax(url, [settings]); $객체.ajax(settings); jQuery Ajax API 01 - $객체.load(); $객체.load(url, [data] [complete]) AJAX 요청의 결과로 ..

노드 스타일 다루기 $("객체").css("스타일속성") 스타일 속성의 값을 가져온다 $("객체").css("스타일속성", "스타일값") 스타일 속성의 값을 지정한다. $("객체").css(["속성1번", "속성2번", "속성3번", ... ]); 여러개의 스타일 속성의 값을 한번에 가져와서 출력한다. (배열) 배열(Array) 타입으로 입력한다. 객체(Object) 타입으로 반환한다. $("객체").css({"속성1":"1번의 속성값", "속성2":"2번의 속성값", ... }) 여러개의 스타일 속성의 값을 지정하여 설정한다. (객체) 객체(Object) 타입으로 입력한다. 속성 다루기 $("객체").attr("속성이름") 객체의 속성값 얻어오기 $("객체").attr("속성이름", "속성값") 객체의..

jQuery Event 전부 쌍으로 이루어져 있고, Deprecated 되어있다. bind unbind live die delegate undelegate load unload 지금 사용하고 있는 이벤트 리스너 등록/해제 함수는 on / one(등록) $("객체").on("이벤트이름", function() { // 이벤트 처리코드 작성 }); $("객체").on("이벤트이름", "Selector", function() { // 동적으로 추가되는 객체의 부모요소에 사용한다. // 셀렉터 부분을 알맞게 수정해준다. }); $("객체").on({ "이벤트명1": function() {}, "이벤트명2": function() {} // 이런식으로 여러 개의 이벤트 리스너를 한번에 등록할 수 있다. }); off..

노드의 여러가지 명령어 $("노드텍스트"); $("div") // div태그 객체가 생성된다. // $("div") - div태그 객체가 생성된다. // $(div) - div태그 객체를 선택한다. // 구분 잘 해야한다. $("객체").clone() - 객체를 복사하여 반환한다 var $div2 = $("#myDiv").clone(); // 깊은 복사(Deep Copy)로 새로운 사본이 만들어진다. // 자식노드까지 함께 묶음으로 복사된다. 노드 이동/추가 $부모노드.append($추가노드) $추가노드.appendTo($부모노드) 부모노드의 마지막 자식으로 추가노드를 삽입한다, 이미 다른 위치에 존재하던 노드라면 이동이 된다 $부모노드.prepend($추가노드) $부모노드.prependTo($추가노드)..

다양한 노드접근 방식 $("객체").eq(index) - index(숫자)번째 노드를 jQuery DOM 객체로 변환한다. $("객체").get(index) - index번째 노드를 JS DOM 객체로 반환한다. jQuery DOM 객체에 [index]를 적용하면 get(idx)와 같은 동작을 한다. $("p")[2] == $("p").get(2) 순차적으로 노드에 접근하기(반복문) $(객체).each(function(index, element) { // 요소마다 각각 반복 될 코드 }) // index : 객체의 인덱스 // element : 해당 반복의 JS DOM 객체 $("p").each(function(i, e) { console.log("-- " + i + " --") console.log(e..

jQuery API jQuery Core jQuery 문법이 적용되었음을 알리는 키워드 jQuery $ ex) document.getElementById("idname") 와 같은코드를 jQuery("#idname"), $("#idname") 으로 사용할 수 있다. jQuery Core 키워드는 변수에 저장하여 사용할 수 있다. var J = jQuery; --> J("#idname") jQuery 스타일의 DOM 객체 이용 코드 $(document).ready(function() { } ) == window.onload = function() { } jQuery 노드객체 찾기 -> jQuery에서 가장 중요한 파트 $("CSS셀렉터") $(jsDOM객체) 순수 JS API를 적용할 수 있는 객체를 js..

jQuery 자바스크립트의 DOM을 쉽게 사용하기위해 만들어진 라이브러리 순수 자바스크립트 코드보다 효율적이고, 코드 생산성이 향상된다. HTML 노드, 스타일, 속성, 이벤트 등을 다룰 수 있다. CSS 선택자(Selector)를 이용하여 DOM 객체를 관리한다. jQuery 홈페이지 jQuery 다운로드 다운로드 경로 클릭 후, compressed Ver, uncompressed Ver 둘 중 마음에 드는 것으로 클릭하고 우클릭 - 다른 이름으로 저장을 이용하여 저장하면 된다. 적용하기(head에 아래의 코드 추가하기)