WEB UIUX/jQuery
[jQuery]제이쿼리 항상 최신버전으로 사용하기
**** 위 코드를 head에 붙여주기 jQuery는 항상 모든 스크립트 링크의 맨 첫번째에 걸어야 적용 된다! ****
WEB UIUX/jQuery
WEB UIUX/jQuery
[jQuery]제이쿼리 animate() 메서드
# 기본값: $("요소선택").animate({스타일속성}, 적용시간, 가속도, 콜백함수); /* 기능추가기재하기!! */ See the Pen [jQuery]animate1 by kaia (@kaiaakim) on CodePen. 버튼1 "500px"이동 버튼2 "50px"씩 이동 $(function(){ $(".btn1").on("click", function(){ $(".txt1").animate({marginLeft : "500px", fontSize : "30px"}, 2000, "linear", function(){ alert("모션완료"); }); }); // [버튼1]을 클릭하면 class값이 "txt1"인 요소가 2초동안 오른쪽 방향으로 500px만큼 이동하고 글자의 크기는 30px 커지..
WEB UIUX/jQuery
[jQuery]제이쿼리 콜백함수(slideUp(), fadeIn(), toggleSlide(), fadeTo())
# CallBack 함수란 이름 그대로 나중에 호출되는 함수를 말한다. # 함수를 등록하기만 하고 어떤 이벤트가 발생했거나 특정 지점에 도달 했을때 호출 되는 함수를 말한다. * slideUp(), slideDown() - 선택된 요소를 슬리이드 효과로 보여졌다 사라졌다 적용 * fadeIn(), fadeOut() - fadeIn : 선택된 요소를 투명도의 조절로 보여준다.(opacity:1) - fadeOut : 선택된 요소를 투명도의 조절로 사라진 후, display:none으로 변경(opacity:0와 display:none) - 보통 콜백함수로 사용된다. // $("선택자").fadeIn(적용시간, 가속도, 콜백함수) * fadeTo() - 선택된 요소를 투명도의 조절로 보여주거나 사라지도록 한다..
WEB UIUX/jQuery
[jQuery]제이쿼리 마우스좌표값과 스크롤값 .on 이벤트로 구하기(mousemove(), scroll(), scrollTop(), scrollLeft())
See the Pen [jQuery]마우스좌표값,스크롤값 by kaia (@kaiaakim) on CodePen. mousemove X : 0 Y : 0 scroll scrollTop : 0 scrollLeft : 0 body{ height: 10000px; width: 5000px; } #wrap{ position: fixed; left: 10px; top: 150px; } $(function(){ $(document).on("mousemove", function(e){ //마우스 좌표값을 e라는 매개변수가 받을것이다 $(".posX").text(e.pageX); //.text(); ->텍스트가 작성된다는 뜻 //.posX에게 pageX값을 적용 $(".posY").text(e.pageY); //.po..
WEB UIUX/jQuery
[jQuery]제이쿼리 .on 이벤트(마우스클릭, 오버, 아웃.../click(), mouseover(), mouseout(), blur(), focus())
#on 이벤트 click() - 마우스 클릭시 이벤트발생 mouseover() - 마우스 오버시 이벤트발생 mouseout() - 마우스 아웃시 이벤트발생 blur() - 포커스가 선택한 요소에서 다른요소로 이동 되었을 때 이벤트가 발생하거나, focus이벤트가 강제로 사라지도록 함. focus() - Tab키 접근시 포커스되도록 함 See the Pen [jQuery]on이벤트 by kaia (@kaiaakim) on CodePen.
WEB UIUX/jQuery
[jQuery]제이쿼리 요소복제/삭제/변경(clone(), remove(), empty(), replaceWith(), replaceWith())
#요소복제와 삭제, 변경 clone() $("요소선택").clone(); - 선택한 요소를 복제(변수에 저장하기) empty() $("요소선택").empty(); - 선택한 요소의 하위요소 삭제 remove() $("요소선택").remove(); - 선택한 요소 삭제 replaceWith() $("요소선택").replaceWith("선택한 요소를 바꿀 새 요소"); - 선택한 요소를 새 요소로 바꿈 replaceAll() $("선택한 모든요소를 바꿀 새 요소").replaceAll("전체를 바꿀 요소선택") - 선택한 모든 요소를 바꿈
WEB UIUX/jQuery
[jQuery]제이쿼리 요소삽입/생성 메서드(after(), insertAfter(), before(), insertBefore(), prepend(), appendTo())
#요소삽입과 생성메서드 after() $("요소선택").after("선택요소 뒤에 삽입할 요소") insertAfter() $("선택요소 뒤에 삽입할 요소").insertAfter("요소선택") before() $("요소선택").before("선택요소 앞에 삽입할 요소") insertBefore() $("선택요소 앞에 삽입할 요소").insertBefore("요소선택") prepend() $("요소선택").prepend("선택요소의 맨앞요소에 추가생성할 요소") appendTo() $("선택요소의 맨마지막요소에 추가생성할 요소").appendTo("요소선택") See the Pen [jQuery]요소삽입/생성 by kaia (@kaiaakim) on CodePen.
WEB UIUX/jQuery
[jQuery]제이쿼리 선택요소의 좌표값 구하기(offset())
# offset() - 선택한 요소의 좌표값을 구하거나 특정위치로 옮길 수 있다. See the Pen Untitled by kaia (@kaiaakim) on CodePen. 오렌지색박스 하늘색박스 핑크색박스 연두색박스 보라색박스 *{ padding: 0; margin: 0; } .wrap{ height: 5000px; width: 500px; position: relative; } .box{ position: absolute; width: 150px; height: 150px; } .orange{ background: orange; left: 50px; top: 50px; } .skyblue{ background: skyblue; left: 100px; top: 100px; } .pink{ backg..
