자바스크립트(JavaScript)/제이쿼리(jquery)8 [jquery] 애니메이션 메서드 동작을 불어넣는 애니메이션 메서드애니메이션 메서드를 사용하면 선택한 요소에 스타일을 적용한 움직임을 만들어 낼 수있다.애니메이션을 적용하기 위해서는 .animate()메서드를 사용한다.// 기본형 $('요소').animate({css스타일 속성 : 값}, 효과 적용시간, 가속도, 콜백함수) - {css스타일 속성 : 값}애니메이션으로 적용할 css 스타일을 넣는다.객체로 넣어야 하며 속성명 : "속성값"의 형태로 작성한다.- 효과 적용시간동작에 반응하는데 소요되는 시간을 뜻한다.적용 시간은 'fast', 'slow', 'normal'이나 밀리세컨즈(ms) 단위로 사용한다.- 가속도애니메이션의 가속도를 결정한다. 'swing'과 'linear'를 적용할 수 있다.swing은 시작과 끝은 느리고.. 2024. 8. 28. [jquery] 효과 메서드 효과 메서드효과 메서드를 이용하면 쉽고 역동적으로 동작을 조절하여 객체를 화려하게 숨기거나 보일 수 있다.또한 애니메이션 메서드까지 사용하면 다양한 동작(Motion)까지 적용할 수 있다.효과 메서드숨김 효과hide()display none과 같이 요소를 숨긴다.fadeOut()요소가 점점 투명해지면서 숨겨진다.slideUp()요소가 위로 접히며 숨겨진다.노출 효과show()display block 처럼 요소가 나타난다.fadeIn()숨겨진 요소가 점점 선명해지면서 나타난다.slideDown()숨겨진 요소가 아래로 펼쳐지며 나타난다.숨김, 노출 효과toggle()show()와 hide()효과를 적용한다.fadetoggle()fadeOut(), fadeIn() 효과를 적용한다. slidetoggle() .. 2024. 8. 28. [Jquery] 제이쿼리 이벤트(Event) 제이쿼리 이벤트자바스크립트에서 사용자가 사이트에 방문 후 취하는 모든 행위는 이벤트라고 한다.로딩부터 시작해서 클릭과 같은 모든 동적인 행위(이벤트)가 발생하면 특정 코드가 발생하도록 입력할 수 있는데이렇게 실행되는 코드를 이벤트 핸들러라고 부른다.이벤트의 종류에는 로딩이벤트, 마우스 이벤트, 스크롤 이벤트, 포커스(폼) 이벤트, 키보드 이벤트가 존재하며 이벤트 메서드를 통해 실행 가능하다.이벤트 등록 메서드의 구조에는 하나의 이벤트만 등록할 수 있는 단독 이벤트 등록 메서드와 여러 이벤트를 등록하는 그룹 이벤트 등록 메서드가 있다.이렇게 실행된 이벤트는 이벤트를 제어하는 메서드와 프로퍼티를 통해 제어 가능하다.// 기본형 $("이벤트 대상").이벤트명(function(){ .. 2024. 8. 23. [Jquery] 객체 조작 메서드 객체 조작 메서드 객체조작 메서드는 객체를 생성, 삭제, 복제, 속성 변환하는 메서드이다.객체 조작 메서드는 속성 조작 메서드와 수치 조작 메서드, 객체 편집 메서드로 나눠진다.속성 조작 메서드는 요소의 속성을 바꿀 때 사용하고, 수치 조작 메서드 요소의 넓이 높이나 위치 등을 조작할 때 사용하고, 객체 편집 메서드는 객체를 생성하거나 삭제 또는 복제할 때 사용한다. 속성 조작 메서드 속성 조작 메서드는 요소의 속성을 조작하는 메서드이다.1. html() / text() 메서드html() 메서드는 선택한 하위 요소를 가져와 문자열로 반환하거나 하위 요소를 전부 제거하고 새 요소로 바꿀 때 사용한다.text() 메서드는 선택한 요소에 포함되어 있는 전체 텍스트를 가져오거나 하위 요소를 전부 제거하고 .. 2024. 8. 20. [Jquery] 제이쿼리 배열 관련 메서드 제이쿼리 배열관련 메서드자바스크립트와 제이쿼리에는 배열 안을 탐색하는 다양한 메서드들이 있다. 1. each / $.each()메서드 ★★ 선택자로 선택한 요소(배열에 담긴 요소들)을 순서대로 하나씩 선택하면서 인덱스 정보를 가져온다.// 기본형(1) $("요소").each(function(매개변수1, 매개변수2 ...){ 자바스크립트 코드 });// 기본형(2) $.each($("요소"), function(매개변수1, 매개변수2 ...){ 자바스크립트 코드 });기본형 1과 2 모두 배열에 저장된 요소의 개수만큼 메서드를 반복 실행한다.메서드를 실행 할 때마다 매개변수에는 배열에 저장된 요소와 인덱스의 값이 오름차순으로 대입된다.첫번째 매개변수는 인덱스 번호를 참조하고 두번째.. 2024. 8. 20. [Jquery] 제이쿼리 선택자 총 정리 제이쿼리 선택자 제이쿼리 선택자란 DOM 안의 태그 요소를 선택할 때 사용하는 선택자이다.종류로는 크게 '직접 선택자'와 '인접 관계 선택자'로 나뉜다.제이쿼리에서 태그를 선택할 때에는 $(" ")안에 선택자명을 쓴다.직접선택자전체 선택자, id 선택자, class 선택자, 그룹 선택자, 종속 선택자와 같이 태그를 직접 선택하는 선택자이다. 직접 선택자 기본형$("*")전체선택자$("#아이디명")아이디 선택자$(".클래스명")클래스 선택자$("태그1, 태그2")그룹 선택자$("태그.클래스명") or $("태그#아이디명") 종속 선택자인접 관계 선택자인접 관계 선택자는 직접 선택자로 요소를 먼저 선택한 뒤 그와 가까이 있는 요소를 선택할 때 사용한다.선택한 요소를 감싸고 있는 바로 윗계층 요소는 부모요소(.. 2024. 8. 20. 이전 1 2 다음
