프론트엔드/jQuery(4)
-
[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