2월에는 한 번에 정리해보았는데 3월에는 다시 자주 자주 벨로그에 기록해두기 목표~~!~!~!
코로나 확진자 2천명이라고 벌벌 떨었던 때가 엊그제같은데... 다들 건강조심
1. JQuery (1) 이벤트:(Event) 등록하기
이벤트 등록하기 형식 :
$ ('선택자').이벤트명령어(function(e){실행문 ;});
$('선택자').이벤트핸들러('이벤트명',function(e){실행문 ;})
요소의 속성 변경하기 종류
$('선택자').attr('속성명')
-> 선택자의 속성의 해당 값을 가져온다.
$('선택자').attr('속성명','속성값')
-> 선택자의 속성의 값을 변경한다.
$('선택자').removeAttr('속성명')
-> 선택자의 속성값을 제거한다.
#btn01 을 클릭하면 p>img 의 src 속성이 'img/sea.jpg' 로,
span>a 를 클릭하면 p>img 의 src 속성이 'img/building.jpg' 로 바뀌도록 만들어보자
여기서 잠깐~!~!~!
< a > 요소의 클릭 이벤트
a요소는 클릭이라는 이벤트를 만나면 href 로 이동이 되므로, return false 로 막아주어야 한다!!!!
버튼을 클릭하면 바다가 되고 링크를 누르면 빌딩 사진으로 바뀌는 것을 볼 수 있다.
2. JQuery (2) event :this
현재 선택자인 $('li>a')를 $(this)로 표기해 사용할 수 있다. 매우 편리해잇~!~!
변수 pic에 href 속성을 담아와
넣을 선택자에 넣어준다.
a 요소이므로 return false 꼭 사용하기
멋지군..
3. JQuery (3) 작은 갤러리
가운데 크게 보일 이미지를 div 로 설정해두고
작은 이미지 목록을 id all과 show_view 안의 ul>li 로 정렬한다.
prev 와 next 버튼을 사용해 클릭 이벤트를 부여할 계획!
버튼을 누르면 맨 앞과 맨 뒤로 갔던 내용을 떠올려서 쓰기~!
작은 이미지를 누르면 가지고 있던 src 속성을 큰 이미지 에 변수를 만들어 넣어 적용한다~!
예쁘군
4. JQuery (4) event : dblclick, mouseDown, mouseUp
on 을 사용해 'click'이벤트를 넣어보았는데, 한 번 클릭 말고
더블클릭 (dblclick) 코딩을 해보자!
$ ('li>a')를 더블클릭 해 변수 pic 에 속성 href 를 담아주고
$('#back_pic<img)에 속성을 넣어준다.
더블클릭으로만 작동되고 클릭(한 번)으로는 작동되지 않게
.click(function(e){
return false;});
로 닫아준다.
click(한번) 으로는 작동하지 않고, dblclick(더블클릭)을 해야지만 수행된다.
li 요소를 추가하기
button 을 클릭하면
#linkBtn 뒤에 li 요소를 새로 만든다.
li 요소를 추가 버튼을 누르면
li 요소가 추가되며 빌딩 사진도 추가되어 나온다.
5. JQuery (5) 콜백함수
이펙트 매서드
형식: $('선택자').이펙트명령어(시간,'easing',콜백함수(function()실행문;});
콜백 함수는 이펙트가 끝난 후 실행할 실행문을 설정한다.
콜백함수를 사용하지 않은 코딩은
선택자 뒤에 slideDown 이라는 이벤트 뒤에 시간을 넣고
다시 새로운 선택자를 열어 css 로 속성을 변경한다.
콜백함수를 사용할 밑의 코딩은
선택자 뒤에 slideDown 이라는 이벤트 뒤에 시간, 콜백함수로 다시 function()을 열어
내가 지금 선택한 선택자 $ (this)의 css 속성을 변경한다.
콜백함수를 사용하지 않은 코딩의 결과값은
클릭과 동시에 css 로 변경된 분홍색이 되어 slideDown으로 내려온다.
한편 콜백함수를 사용한 코딩의 결과값은
클릭하면 slideDown 명령어가 완료된 후 색이 바뀌는 것을 볼 수 있다.
animate()
#btn 클릭 시 left 로 100px 씩 증가하도록
#btn01 클릭 시 left 로 300px 씩 증가하도록
#btn02 클릭 시 배경컬러가 초록색이 되도록 코딩해보았다.
싹싹 잘 움직이고 뾰로롱 잘 바뀐다 크크크
두 개의 이미지를 두고 이미지 클릭 시 한 개씩만 보여지도록 움직일 수 있게 설정해보자.
꽃 사진을 클릭하면 marginLeft 를 li width 값인 400px 만큼 화면 왼쪽으로 가서 숨겨지도록 -=400px 로 설정하고,
빌딩 사진을 클릭하면 다시 원래대로(오른쪽으로 +=400px만큼) 돌아오도록 marginLeft 를 0px 로 설정한다.
슉
슈슉
fadeOut
이제 선택자 클릭 하고 변수 만드는 건 누워서 떡 먹기!
#main 앞에 이미지 요소를 만든다.
변수로 만들었던 pic 을 사용해 +pic+ 으로 넣기!
#main의 마지막 이미지는 fadeOut으로 사라지면서 첫 번째 아닌 모든 이미지는 지워지도록 설정했다.
슉
슈슉
