웹퍼블
jQeury - is()메소드
is()메소드 is() 메서드는 결과 값으로 참과 거짓을 반환합니다. $(selector).is(selectorElement)에서 selector , selectorElement 일치하는지 확인하여 Ture 또는 False 를 반환합니다. .select 를 클릭했을때 select가 div 태그이면 DIV SELECT를 select가 p 태그이면 P SELECT를 출력하도록 만들었습니다. DIV SELECT P SELECT 개인 공부용으로 만들었습니다. 다른 분들에게도 도움이 되었으면 좋겠습니다. 틀린 부분이 있으면 댓글을 남겨주시면 수정하겠습니다.
a 태그 링크 막는 방법(e.preventDefault())
a태그 링크 막는 방법입니다. e.preventDefault(); 를 사용하면 됩니다. $(function(){ $('h1 > a').on("click",function(e){ e.preventDefault(); }); }); 개인 공부용으로 만들었습니다. 다른 분들에게도 도움이 되었으면 좋겠습니다. 틀린 부분이 있으면 댓글을 남겨주시면 수정하겠습니다.
원하는 위치에서 이미지 나타나게 만들기
원하는 위치에서 이미지를 나타나게 만들기 입니다. $(window).scrollTop()의 높이가 원하는 값이 되면 addClass()을 이용하여 나타나게 한다. $(function(){ //페이지문서 로드 완료 후 바로 실행; $("#wrap1>.img").addClass("action"); //scroll할때 scroll함수 실행; $(window).on("scroll",scroll); function scroll(){ //스크롤한 높이 값 scrollTop = $(window).scrollTop(); console.log(scrollTop); //스크롤한 높이 값이 600보다 클때 addClass실행 if (scrollTop >= 600){ $("#wrap2 > .img").addClass("act..
jQuery - 요소 추가·제거, 숨기기·나타나기 효과
요소 추가 1.prepend() - 선택한 요소 안에 첫 부분에 내용 삽입 $(function(){ $(".box").prepend("추가 문자"); }); 2.append() - 선택한 요소 안에 끝 부분에 내용 삽입 $(function(){ $(".box").append("추가 문자"); }); 3.before() - 선택한 요소 앞에 내용 삽입 $(function(){ $(".box").before("추가 문자"); }); 4.after() - 선택한 요소 뒤에 내용 삽입 $(function(){ $(".box").after("추가 문자"); }); 요소 제거 1.remove() - 선택된 요소를 제거(자식 요소도 제거된다) $(".box").remove(); 2.empty() - 선택된 요소의 자..
jQuery - 콜백함수
콜백함수(CALLBACK FUNCTION) 콜백 함수는 현재 효과가 종료된 후 실행되는 함수이다. 버튼을 클릭하면 클래스가 box를 width:1000px까지 1초간 진행된 후 alert이 실행된다. $("button").click(function(){ $(".box").animate({"width":"1000px"},1000,function(){ alert("애니메이션이 종료된 후 실행!!"); }); }); 개인 공부용으로 만들었습니다. 다른 분들에게도 도움이 되었으면 좋겠습니다. 틀린 부분이 있으면 댓글을 남겨주시면 수정하겠습니다.
jQuery - 애니메이션(animate)
애니메인션(animate) 애니메이션 사용 - button을 클릭하면 클래스가 box인 요소에 라운드 100px, 2초간 진행 $("button").click(function(){ $(".box").animate({"border-radius":"100px"},2000); }); 위의 코드와 같은 코드이다.(카멜 표기법 사용) $("button").click(function(){ $(".box").animate({borderRadius:"100px"},2000); }); (순차적 진행) - 3초간 라운드100px로 만든 후 넓이를 200px로 진행 $("button").click(function(){ $(".box").animate({"border-radius":"100px"},3000) .animate(..