jQuery(6)
-
[jQuery] $(document).ready 여러개 사용
$(document).raedy()는 여러 번 사용이 가능함. 참고로 비교해보자면, window.onload : 이미지를 포함한 모든 elements가 로드될때까지 기다리고 method가 여러개여도 1개만 실행됨. $(document).ready : DOM구조가 완료되면 로드될때까지 기다리지 않고 method가 여러개이면 여러개가 실행됨. 이외의 자바스크립트에서 문서로드함수들의 로드시점과 관련된 내용은 여기 클릭
2020.12.16 -
[jQuery] animate메서드
animate -선택자.animate({속성:값,속성:값},시간,이징,다른할일(animate끝나고)) -jQuery에서 animate메서드는 수치가바뀌는 것만 가능 그래서 'background-color' 변경은 'animate'메서드로 적용이 안되는데 jQueryui라이브러리 추가 후 사용가능 $(function(){ // $('div').mouseover(function(){ // $(this).css({backgroundColor:'blue'}); // }).mouseout(function(){$(this).css({backgroundColor:'green'}); // }); $('div').mouseover(function(){ $(this).animate({backgroundColor:'blue..
2020.11.23 -
[jQuery] 실행 시점 제어하기,메서드체인
자주 사용하는 실행 시점 특정 요소에 마우스 포인터를 올려놓은 시점 특정 요소에서 마우스 포인터가 벗어나는 시점 특정요소를 클릭하는 시점 마우스를 움직이는 시점 창 크기가 바뀌는 시점 스크롤 시점 keydown 요소에 초점을 맞춘 상태에서 키보드의 키를 눌렀을 때 keyup 요소에 초점을 맞춘 상태에서 키보드의 키를 뗄 때 focus 요소에 포커스가 일치했을 때(포커스가 있는 요소만) blur 요소가 포커스를 잃어버렸을 때(포커스가 있는 요소만) change 입력 내용이 변경되었을 때(textarea요소, input요소, select요소 resize 요소의 크기를 다시 설정했을 때 scroll 요소를 스크롤 했을 때 mouseover / mouseout 예전에는 bind메서드 사용했지만 현재는 on메서드..
2020.11.20 -
[jQuery] jQuery 기본이해 / 스크립트파일작성방법
라이브러리 자주사용하는 기능화 효과(그들을 실행하는 프로그램)을 Javascript코드로 미리 만들어 두고 재활용할 수 있게 한 것 jQuery 특징 스크립트 코드보다 먼저 라이브러리 선언을 해주어야 함 문법이 간결함 사용하기 쉬움 빠르게 배울 수 있음 다른 라이브러리들과 충돌을 일으키지 않음 다야한 플러그인이 존재함 브라우저 호환성 문제를 해결해줌 MIT and GPL licenses jQuery라이브러리 다운로드 url : code.jquery.com/ jQuery 1.x 버전까지만 IE9를 지원함 (jQuery 2.x, 3.x ,... IE9 지원안함) uncompressed : 압축안된버전이므로 용량이 크고 로드시 느림, 주석이 상세함 , 코드이해하기 좋음 minified : 압축된버전이므로 로드..
2020.11.19 -
[JS] excel 다운로드
서버호출 없이 JS만으로 엑셀다운로드 구현 //엑셀다운로드시 호출함수 function fnExcelReport(id, title) { var tab_text = ''; tab_text = tab_text + ''; tab_text = tab_text + ""; //엑셀다운로드시 저장될 테이블 지정하여 복사 var exportTable = $('#resultTable').clone(); //복사된 테이블에서 input 태그 제거 exportTable.find('input').each(function (index, elem) { $(elem).remove(); }); tab_text = tab_text + exportTable.html(); tab_text = tab_text + ''; var data_ty..
2020.11.08 -
[JS] 헤더 고정 스크롤 구현
[헤더고정스크롤 구현] 요건 : JSP내에서 엑셀다운로드를 할 수 있는 테이블 만들어야 하는데, 화면에 보여질 때 헤더는 고정이 된 상태에서 스크롤시 동적으로 리스트를 생성해야함 방법1 . 임시테이블 하나 더 생성 검색 KEY 파일이름 생성일자 KEY 파일이름 생성일자 내용0 내용0 내용0 내용1 내용1 내용1 내용2 내용2 내용2 내용3 내용3 내용3 내용1 내용1 내용1 내용2 내용2 내용2 내용3 내용3 내용3 내용1 내용1 내용1 내용2 내용2 내용2 내용3 내용3 내용3 Excel Download 구현내용: 화면에 리스트로 보여줄 테이블(resultTable) 과 헤더만 보여질 테이블(fixedtable) 을 생성 화면에 리스트로 보여줄 테이블(resultTable) thead를 'display..
2020.11.07