본문 바로가기
728x90
반응형

제이쿼리4

[jQuery/AJAX ] Jquery를 이용한 AJAX연결과 예제 #Jquery #AJAX #JAVASCRIPT 지금까지는 javascript를 이용하여 함수를 생성하고 비동기 통신을 하는 방식을 하였는데, 코드가 길고 좀 복잡한 경향이 있었습니다. 이번엔 깔끔하게 JQUERY를 이용하여 해보도록 하게습니다. 핵심 코드 $.ajax({ 1. url : 자원 (XX.do, json, xml, jsp, html) 2. dataType : 넘겨오는 데이터 형태 ex) json, xml, html, text 3. type : 어떤 방식으로 데이터를 가져오느냐? post, get 4. success(){data} : 연결해서 성공적으로 데이터를 가져왔을 때, 처리 내용 들어온 데이터 내용이 data라는 값 5. error(){} : 에러가 나서 실패했을 때, 처리할 내용 기술 .. 2021. 4. 29.
[jQuery] 제이쿼리에서 아작스(AJAX) 사용 #7 jQuery에서 Ajax 사용하기 제이쿼리를 사용하면 자바스크립트에서보다 쉽게 아작스 기술을 사용할 수 있습니다.(xhr을 사용하지 않아도 됨) 아작스는 페이지를 새로 로딩하지 않고 동적으로 페이지의 내용을 바꿀 수 있는 기술입니다. Ajax 지원 메서드 $(document).ready(function () { // 1.html 등의 text 문서 읽기 $("#t1").click(function () { // $("#disp").load("jq9_a.html");// load() : Ajax 관련 메소드 $("#disp").hide().load("jq9_a.html", function () { ​ $(this).fadeIn();// fade effect }); }); ​ // 2. json 문서 읽.. 2021. 4. 27.
[jQuery] 제이쿼리 기초 : 조작하기, 이벤트, 이펙트 #4 jQuery 조작하기 $(document).ready(function () { var p = document.getElementsByTagName("p"); // alert(p.length + ", " + p.size()); p[0].style.color = "red"; // javascript p[1].style.color = "blue"; p[2].style.color = "green"; ​ $("p").eq(1).css("color", "aqua"); // jQuery // alert($("p").index($(".kbs"))); $("p").eq($("p").index($(".kbs"))).css("color", "yellow"); ​ //$("요소~요소2") : 요소2를 요소 1에서부터 검.. 2021. 4. 27.
[jQuery] 제이쿼리 기초 : 시작하기, 선택자 jQuery 기초 jQuery(제이쿼리)는 HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리다. 존 레식이 2006년 뉴욕 시 바캠프(Barcamp NYC)에서 공식적으로 소개하였다. jQuery는 오늘날 가장 인기있는 자바스크립트 라이브러리 중 하나이다. (자료출처 : https://ko.wikipedia.org/wiki/JQuery) 제이쿼리를 사용하는 이유는 다음과 같습니다. 페이지 내부 요소에 접근하기 쉽다.제이쿼리를 사용하지 않으면 DOM 트리를 이용해서 요소(element)에 접근해야 합니다. 이는 배우기도 어렵고 불편한데, 제이쿼리를 사용하면 CSS의 선택자를 이용해서 간편하게 접근할 수 있습니다. 페이지의 보여지는 모습을 변경하기 쉽다.동적으로.. 2021. 4. 27.
728x90
반응형

티스토리툴바