webservice_basics

AJAX는 비동기적으로, 화면을 새로고침 하지 않아도 서버로부터 데이터를 가져와서 사용하는 방법이다. 예) 네이버 실시간 검색은 우리가 새로 화면고침하지 않아도 알아서 시간단위로 refresh 된다 load() : 서버로부터 데이터를 받아온다 형식: $(selector).load(URL,data,callback); url: txt, xml 파일처럼 서버로부터 데이터를 받아올 파일. 이 파일은 현재 HTML문서가 위치해 있는 path와 동일한 곳에 있어야 한다! data: 예를 들어서 load("example.php", "#p") 이런식으로 사용하게 되면 내용을 선별해서 가져오는 것이 가능하다 load를 이용해서 데이터를 불러오는 방법 Let jQuery AJAX Change This Text Get Ex..

Traversing이란? DOM tree를 "move through"하는 것이다, 즉 각 element들이 맺고 있는 parent, child, sibling, ancestor, descendant 등의 관계에서 사이 사이를 지나는 것이다. parent() $("span").parent().css({ "color" : "red", "border" : "2px solid red"}); }); parents() : 지정한 element 상위의 모든 element에 적용된다, 그 중에서 filtering 하고 싶다면 parents() 파라미터 값에 selector를 적어주면 된다 parentsUntil() children() 첫번째 child만 선택하고 싶다면 .first 예) children("p.first..

동적으로 이벤트 거는 방법: on()을 사용하도록 하자! 예제) 다음과 같이 버튼을 클릭할 때마다 새로운 버튼이 생기고, 새로 만들어진 버튼을 클릭 했을 때 삭제가 되는 페이지를 만들어본다고 하자. createElement() example Click the below button to create more buttons CREATE 위 코드를 사용해서 새로 만들어진 버튼을 눌러보면 삭제는 정상적으로 되지만, 다음 코드 부분, $("button.test").click(function(){ alert('test'); }); 즉 버튼을 눌렀을 때 alert 메시지는 뜨지 않는 것을 확인할 수 있다. 그 이유는 .click() 이라는 이벤트는 맨 처음으로 로딩 되어야만 정상적으로 작동하고 동적으로 추가 되었을..

GET: 요청한 데이터를 받아올 때 사용한다 POST: 특정 팡일로 가공된 데이터를 전송한다 $.get() $.get(URL,callback); $("button").click(function(){ $.get("demo_test.asp", function(data, status){ alert("Data: " + data + "\nStatus: " + status); }); }); $.post() $.post(URL,data,callback); 비동기적으로 사용자의 입력값을 전송하는 방법이다. Form을 이용해서 데이터를 전송하면 화면이 바뀌면서(새로고침 되면서) 동기적으로 데이터가 전송되지만, $.post() 방식을 이용하면 AJAX으로 작업이 비동기적으로 이뤄진다. $("button").click(fu..

addClass() 여러 class 한번에 적용 가능하다 예) $("div").addClass("class1 class2 class3") Heading 1 Heading 2 This is a paragraph. This is another paragraph. This is some important text! Add classes to elements removeClass() toggleClass() css(): element의 css 속성을 받아온다 (여러 element일 경우에는 첫번째 element의 속성을 받아온다) css("propertyname"); css 속성을 지정해줄 때 문법: css("propertyname","value"); //여러 속성을 지정하고 싶다면 css({"propertyn..

1. HTML element 추가하기 특히 append()는 많이 쓰이는 함수이니 기억하도록 하자! Form처럼 사용자로부터 입력값을 받아올 때 항목을 더 추가 하게 할 때 자주 쓰인다. append(): 뒤에 element를 추가 prepend(): 앞에 element를 추가 after(): 지정된 element들 이후에 내용 추가 before(): 지정된 element들 이전에 내용 추가 예시) list 항목 추가하는 방법 (index로 현재 추가된 항목의 개수도 표시되도록 했다) List item 1 List item 2 List item 3 Append list items append() Append 하고 싶은 html content를 직접 적어도 되고, 아니면 (html content를 이미 지..

Content 받아오기 text() html() $(document).ready(function(){ $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); }); }); val() 자바스크립트에서 document.getElementById("id").value 를 간략하게 만든 것이다 $(document).ready(function(){ $("button").click(function(){ alert("Value: " + $("#test").val()); }); }); attr() : attribute values를 ..

animate top, left, height, width, opacity, fontSize 등을 이용해서 animation속성을 바꿀 수 있다 $(selector).animate({params},speed,callback); Start Animation By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute! stop chaining: 여러개의 action/method들을 묶는것 css, slideDown, ..