본문 바로가기
반응형
SMALL

제이쿼리

[jQuery] 제이쿼리 기초 및 사용방법 part.5 text,append,prepend,before,after
TIPS 2023. 9. 13. [jQuery] 제이쿼리 기초 및 사용방법 part.5 text,append,prepend,before,after #jQuery #append #prepend #before #after #jQuery기초 #jQuery처음 #css #택스트 바로 설명 시작하겠다. 원하는 문자는 text, append, prepend, before, after를 써서 나오게 할 수 있다. 사용방법은 jQuery 기초 및 사용방법 part.2를 보고오시면 된다.(글 하단에 링크있다) 하나하나 기초적인 부분부터 설명하면 text를 사용하면 기존에 있던 값에다가 '덮어씌우게'된다. append를 사용하면 text와는 달리 기존에 입력되어있던걸 '유지'한 채 '우측에' 주가로 삽입하게 된다.(부모요소 마지막에) prepend를 사용하면 기존에 입력되어있던걸 '유지'한 채 '좌측에' 주가로 삽입하게 된다.(부모요소 맨앞에) before를 사용하..
[jQuery] 제이쿼리 기초 및 사용방법 part.4 CSS vs Animate
TIPS 2023. 9. 12. [jQuery] 제이쿼리 기초 및 사용방법 part.4 CSS vs Animate 일단 animate의 다양한 기능에 대해서 설명하겠다. $("div").animate({right: "250px"}); 이걸사용해서 원하는 태그를 이동시킬 수 있다. 혹시 여러개를 동시에 사용하고싶다면 $("div").animate({right: "250px", backgroundColor : "blue"}); 이렇게 , 로 묶으면된다. 이렇게 animate에서 right말고도 opacity, width, height, backgroundColor 등등 다양한 기능을 사용할 수 있다.(양이 방대하니 필요할때 원하는 기능을 즉각적으로 찾아보길 바란다) 그러면 의문점이 들것이다. 과연 animate는 언제 사용할까? 왜냐하면 css를 변경하려면 animate말고도 .css();를 이용하여 변경할 수 도 있기..
[jQuery] 제이쿼리 기초 및 사용방법 part.3 이벤트 종류
TIPS 2023. 9. 12. [jQuery] 제이쿼리 기초 및 사용방법 part.3 이벤트 종류 예시용 코드 $("#hacs")._____(function(){ $(this).show(); }); 이벤트 종류 click : 클릭시 일어나는 이벤트 추가로 $("#hacs").on("click", function(){ $(this).show(); }); 이것도 동일한click 작업을 수행한다. 하지만 더 읽기 쉽고 작업하기 편한 구문을 선택해야할텐데 일반적으론 on을 사용하지 않고 바로 click이벤트를 처리하는게 더 간결하고 보기가 쉽다. dblclick : 더블클릭시 일어나는 이벤트 keypress : 키보드 눌렀을 경우 일어나는 이벤트(input박스에 실험해보면 이벤트가 발생하고 키입력이 된다.) mouseenter : 마우스 올려놨을때 일어나는 이벤트(마우스 오버느낌(미리보기볼때 이런느낀이다))..
반응형
LIST

티스토리툴바