jQuery9 01. AJAX (jQuery AJAX 관련 메소드, $.ajax()함수, $.get() 함수, $.post 함수) ○ AJAX (Asynchronous JavaScript And XML) - 웹페이지 전체를 reload하지 않고, 일부분만 새로고침 - 비동기식 통신(문자단위 통신) - 전체 페이지는 1번만 불러오고, 그 이후에는 문자단위(비동기)로 통신이 이루어 진다 - 자바스크립트의 XMLHttpRequest객체를 이용하지만, 사용문법이 복잡해서 jQuery 오픈소스의 ajax() 함수를 많이 이용한다 ○ AJAX - 페이지 새로고침 없이 서버에 요청 - 서버로부터 데이터를 받고 작업을 수행 ○ jQuery AJAX 관련 메소드 - $.ajax() - $.get() - $.post() - 응답받은 메시지를 처리하는 함수를 callback함수라 한다 ○ $.ajax() 함수 - 형식) $.ajax()({name:va.. 2022. 6. 28. 08. jQuery, moment.js 오픈소스 (날짜 자동 생성, 아날로그 시계) ○ 오픈소스 인기 순위 - https://stats.js.org/ ○ moment.js - 자바스크립트의 내장객체 Date()의 복잡성을 단순, 다양하게 사용하기 위한 자바스크립트 기반 오픈소스 - 다운로드 링크 : https://momentjs.com - moment-with-locales.js 다운로드 (우클릭>다른 이름으로 링크 저장) - moment.js 오픈소스 ○ 날짜 데이터 자동 생성 - 예) 회원가입 시 생년월일 입력하는 드랍다운 목록 날짜 데이터 자동 생성 생년월일 : 년 월 일 ○ 아날로그 시계 만들기 - 참고 (시간 1=0.001초) ① setTimeout() : 일정한 시간 후에 작업을 한번 실행 (특정시간이후 한 번 실행) setTimeout('함수', 특정시간) ② setInte.. 2022. 6. 7. 07. jQuery, 요소 생성 (append, prepend) ○ 요소(element) 생성 - 요소(element) : HTML의 모든 태그 (참고 : CSS기본용어 ) - 요소를 생성하는 이유 ① 문자 단위의 통신에 많이 사용하기 때문(비동기식) → AJAX ② 댓글 더보기 등 무한 스크롤링하기 위해 - 요소를 생성 및 추가 ① 부모.append(자식), 자식.appendTo(부모) : 요소를 끝에 추가 ② 부모.prepend(자식), 자식.prependTo(부모): 요소를 앞에 추가 ○ 테이블 요소 생성하는 법 - 클릭했을 때 에 테이블 생성 요소 생성 테이블 생성 ① 문자열 이용 ② append(), prepend() 이용 2022. 6. 7. 06. jQuery, this & index ○ this - 선택한 요소 자신을 가리킴 - $(this) : jQuery에서 this객체 접근 버튼1 버튼2 ○ index - index() : 해당 요소의 인덱스 가져오기 버튼1 버튼2 ● PRACTICE 연습문제 Q) 각 버튼을 클릭했을 때, 해당 버튼의 정보를 에 출력하기 - : 해당 버튼 인덱스 - : 해당 버튼 배경색 - : 해당 버튼 글자 this 연습 멋진 핑크 쿨한 파랑 네온 녹색 클릭한 버튼정보 클릭한 버튼의 index : ? 클릭한 버튼의 뒷배경색 : ? 클릭한 버튼의 글자 : ? 2022. 6. 7. 05. jQuery, each반복문 ○ jQuery에서 기존요소 접근 vs 새로운 요소 생성 - $("html태그") : 에 있는 요소들 중에서 해당 요소에 접근 (기존 요소 찾기) - $("") : 에 새로운 해당 요소를 생성 $("li") // 에 있는 요소에 접근 $("") // 에 새로운 요소를 생성 ○ jQuery의 each반복문 - for( in ) {} 또는 for( : ) {} 과 동일한 결과 - 형식) $.each(배열, function(){ 실행할 코드 }); | $(배열).each(function(){ 실행할 코드 }); $("li").each(function(){//li안의 요소들을 처음부터 끝까지 하나씩 꺼내온다 var result=$(this).text(); }); ● PRACTICE 연습문제 Q) each 반복문.. 2022. 6. 7. 04. jQuery, css() 함수 / prop()와 attr() 함수 ○ css() - css() : jQuery에서 스타일 접근 함수 대한민국 - 형식 (jQuery에서는 대부분 getter와 setter함수 개념을 같이 사용) ① $(선택자).css(속성명); : getter 개념 ② $(선택자).css(속성명, 속성값); : setter 개념 ③ $(선택자).css({속성명:속성값, 속성명:속성값, 속성명:속성값, ... }); : 여러 개의 속성을 한꺼번에 세팅(JSON) 색상입력 크기얻기 여러개의 속성을 한번에 변경 ○ prop()와 attr() - 요소의 속성에 접근하는 함수 ( property → prop() / attribute → attr() ) - → 요소(element) - src, alt, title → 속성(attribute) title얻기 src변.. 2022. 6. 3. 이전 1 2 다음
