Frontend/jQuery8 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. 03. jQuery, text()와 html() 함수 / jQuery Method Chaining ○ text()와 html() - 해당 요소에 출력할 내용을 넣어준다 - 형식) $(선택자).text(출력할 내용); / $(선택자).html(출력할 내용); var str="Hello"; //JavaScript document.getElementById("text").innerText=str; //단순문자열 document.getElementById("html").innerHTML=str; //태그적용됨 //jQuery $("#text").text(str); //단순문자열 $("#html").html(str); //태그적용됨 - 차이점 ① text() : 단순 문자열로 출력됨 ② html() : 문자열이 마크업되면서 출력됨 (태그가 적용됨) 입 력 ○ jQuery Method Chaining - 함수 .. 2022. 6. 3. 이전 1 2 다음
