웹퍼블/웝퍼블(JS, jQuery)
JavaScript - HTML요소 선택하기
1.아이디로 선택하기 var boxList = document.getElementById("box-list"); var boxList = document.querySelector("#box-list"); 2.클래스로 선택하기 var list = document.getElementsByClassName('list'); var list = document.querySelector(".list"); var list = document.querySelectorAll(".list"); 3.태그로 선택하기 var h2 = document.getElementsByTagName('h2') var h2 = document.querySelector('h2'); var h2 = document.querySelectorAll..
jQeury - is()메소드
is()메소드 is() 메서드는 결과 값으로 참과 거짓을 반환합니다. $(selector).is(selectorElement)에서 selector , selectorElement 일치하는지 확인하여 Ture 또는 False 를 반환합니다. .select 를 클릭했을때 select가 div 태그이면 DIV SELECT를 select가 p 태그이면 P SELECT를 출력하도록 만들었습니다. DIV SELECT P SELECT 개인 공부용으로 만들었습니다. 다른 분들에게도 도움이 되었으면 좋겠습니다. 틀린 부분이 있으면 댓글을 남겨주시면 수정하겠습니다.
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(..
jQuery - 이벤트 정리
마우스 이벤트(MOUSE EVENTS) 1.click(); - 마우스 클릭할 때 실행 $("button").click(function(){ //클릭할 때 실행할 때 명령 입력!! }); 2.dblclick(); - 마우스 더블 클릭할 때 실행 $("button").dblclick(function(){ //더블클릭할 때 실행할 명령 입력!! }) 3.mouseenter(); - 마우스가 요소 위에 올려질 때 실행 $("button").mouseenter(function(){ //마우스가 요소에 올려질 때 실행할 명령 입력!! }); 4.mouseleave(); - 마우스가 요소 위에서 나갈 때 실행 $("button").mouseleave(function(){ //마우스가 요소에 날갈 때 실행할 명령 입력..