Web/JQuery
[JQ]effect_02
.animate()를 이용한 animation run을 눌렀을 때 아래 box가 움직이는 animation 만들기 1. body run 2. script
Web/JQuery
반응형
반응형
Web/JQuery
[JQ]effect_01
Effect 메소드 hide() show() toggle() slideUp() slideDown() slideToggle() fadeOut() fadeIn() fadeTo() fadeToggle() animate() 1. 연습코드(body) 이펙트 메서드 hide() show() toggle() slideUp() slideDown() slideToggle() fadeOut() fadeIn() fadeTo() fadeToggle() animate() 2. script fadeTo는 투명도(opacity)를 조정하여 이미지를 show/hide 하기 때문에 fadeIn/Out과 사용할 경우 이미 설정된 opacity값이 있어 원활하게 작동하지 않을 수 있다. 나는 fadeTo기능은 사용하지 않도록 하겠다:D ..
Web/JQuery
[JQ]event
이벤트 전파 각 요소가 서로 포함관계(중첩)인 경우 요소 중 하나에 이벤트가 발생하면 중첩된 요소에 이벤트가 전파된다. 1. 이벤트 전파 막기 1) stopPropagation(): 이벤트 요소 전파 막기 2) preventDefault(): 이벤트에 의한 기본 동작 막기 3) return false : 둘다 적용(이벤트 전파막기 + 기본 동작 막기) 2. 연습코드(body) 아래 코드를 보면 div 안에 p 안에 a 태그 순으로 놓여 있다. 이때 div, p, a 태그 각각에 이벤트가 걸려 있다면 a의 클릭만 누르더라도 div p a 각각의 이벤트가 모두 실행이 될 것이다. 이를 막기 위한 것이 이벤트 전파 막기 이며 아래 script에서 자세히 살펴볼 수 있다. unbind(): 이벤트 해제 클릭 클..
Web/JQuery
[JQ]DOM_기타탐색메소드
기타탐색메소드 1) add(): 선택한 엘리먼트에 추가적으로 selector 표현식을 작성할 때 사용 2) is(): 선택한 엘리먼트들 중에 원하는 엘리먼트가 있는지 확인 add() add(): 선택한 엘리먼트에 추가적으로 selector 표현식을 작성할 때 사용 is() is(): 선택한 엘리먼트들 중에 원하는 엘리먼트가 있는지 확인
Web/JQuery
[JQ]DOM_트리탐색메소드
트리 탐색 메소드 1) find("selector") 메서드: 선택한 엘리먼트 자손들 중에 탐색하고자 하는 엘리먼트를 찾는다. 2) children("selector") 메서드: 선택한 엘리먼트의 자식요소들 중에 탐색하고자 하는 엘리먼트를 찾는다. 3) parent()/ parents("selector") 메서드: 선택한 엘리먼트의 부모요소 / 조상요소를 찾는다. 4) next("selector") 메서드: 선택한 엘리먼트 다음에 나오는 요소를 찾는다. find("selector") 메서드: 선택한 엘리먼트 자손들 중에 탐색하고자 하는 엘리먼트를 찾는다. children("selector") 메서드: 선택한 엘리먼트의 자식요소들 중에 탐색하고자 하는 엘리먼트를 찾는다. parent()/ parents("..
Web/JQuery
[JQ]DOM_필터링메소드
필터링 메소드 1) eq() 메서드 : 선택한 엘리먼트들 중에 인덱스로 탐색 2) slice() 메서드: 선택한 엘리먼트들 중에 인덱스 길이로 탐색 3) first() 메서드: 선택한 엘리먼트들 중에 첫번째 요소 탐색 4) last() 메서드 : 선택한 엘리먼트들 중에 마지막 요소 탐색 eq() 메서드 : 선택한 엘리먼트들 중에 인덱스로 탐색 slice() 메서드: 선택한 엘리먼트들 중에 인덱스 길이로 탐색 first() 메서드: 선택한 엘리먼트들 중에 첫번째 요소 탐색 last() 메서드 : 선택한 엘리먼트들 중에 마지막 요소 탐색 eq() slice() first() last()
