728x90 반응형 jQuery10 [jQuery] 이벤트 # 이벤트 등록 $("요소").on("이벤트1 이벤트2 ...", function() { // 코드 }); // 또는 $("요소").이벤트(function() { // 코드 }); # 이벤트 강제 실행 $("요소").이벤트(); # 이벤트 취소 $("요소").off("이벤트1 이벤트2 ..."); # 태그가 가진 기본 이벤트 차단 $("요소").on("이벤트", function() { return false; }); // 또는 $("요소").on("이벤트", function(e) { e.preventDefault(); }); - 기본 이벤트 ex) a 태그 : 링크 기능 ex) submit 버튼 : 폼을 전송하는 기능 # 요소 무리 중, 이벤트가 발생한 요소의 인덱스 반환 $("요소").on("이벤트",.. 2023. 10. 20. [jQuery] 애니메이션 제어 메서드 형식 $("요소") .[delay(지연시간ms)].animate({ 스타일1 : "속성값1" }, 진행시간, ["가속도"]) // 1번째 .[delay(지연시간ms)].animate({ 스타일2 : "속성값2" }, 진행시간, ["가속도"]) // 2번째 ... .[delay(지연시간ms)].animate({ 스타일n : "속성값n" }, 진행시간, ["가속도"]) // n번째 # 큐(대기열)에 적용된 애니메이션 함수 반환 // queue() 메서드 이후에 있는 animate 메서드들은 실행되지 않음 $("요소").queue(); # queue 메서드 취소 $("요소").dequeue(); # 첫 애니메이션만 실행하고 나머지 취소 $("요소").clearQueue(); # 애니메이션이 지정되어 있던 요소.. 2023. 10. 20. [jQuery] 효과 메서드 형식 $("요소").효과메서드(["소요시간"], ["가속도"], [콜백함수]); - 효과 소요시간 : "slow" | "normal" | "fast" | ms단위 - 가속도 · "swing" : 시작/끝은 느리게, 중간은 빠르게 · "linear" : 일정한 속도로 - 콜백 함수 · 애니메이션이 완료된 후 호출되는 함수 · function() { 코드; } # 숨김 효과 메서드 - 요소 숨김 (공간도 삭제) : hide() - 요소가 점점 투명해지면서 사라짐 : fadeOut() - 요소가 위로 접히며 숨겨짐 : slideUp() # 노출 효과 메서드 - 요소 노출 : show() - 요소가 점점 선명해짐 : fadeIn() - 숨겨진 요소가 아래로 펼쳐지며 노출됨 : slideDown() # 토글 효과.. 2023. 10. 20. [jQuery] 수치 조작 메서드 # 높이 - 요소 높이 : $("요소").height(); - 요소 + 패딩 높이 : $("요소").innerHeight(); - 요소 + 패딩 + 테두리 높이 : $("요소").outerHeight(); # 너비 - 요소 너비 : $("요소").width(); - 요소 + 패딩 너비 : $("요소").innerWidth(); - 요소 + 패딩 + 테두리 너비 : $("요소").outerWidth(); # 브라우저 창의 스크롤 위치 - 수평 스크롤 이동 높이 : $("요소").scrollLeft(); - 수직 스크롤 이동 높이 : $("요소").scrollTop(); 2023. 10. 20. [jQuery] 속성 조작 메서드 # 해당 요소의 하위 요소 가져오기 (태그, 텍스트) $("요소").html(); // 덮어쓰기 $("요소").html("새_요소"); # 해당 요소의 하위 텍스트 가져오기 $("요소").text(); // 덮어쓰기 $("요소").text("새_텍스트"); # 해당 요소의 하위 요소 중 특정 요소 선택 $("요소").find("찾을_요소"); // 모든 하위 요소 선택 $("요소").find("*"); # iframe() 내부 요소에 접근 $("요소").contents(); # 요소의 상태에 따라 true/false 반환 $("요소").is(":요소상태") // 요소A가 요소B이기도 하면 true 반환 $("요소A").is("요소B") // ex: $(this).is("img") -> 대상 요소가 이면 .. 2023. 10. 20. 이전 1 2 다음 728x90 반응형
