본문 바로가기
반응형
SMALL

jQuery 처음

[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 : 마우스 올려놨을때 일어나는 이벤트(마우스 오버느낌(미리보기볼때 이런느낀이다))..
[jQuery] 제이쿼리 기초 및 사용방법 part.2 hide, show, toggle
TIPS 2023. 9. 12. [jQuery] 제이쿼리 기초 및 사용방법 part.2 hide, show, toggle #hide #show #toggle #jQuery #숨기기 #보이기 #fadeOut #fadeIn #fadeToggle #slideDown #slideUp #slideToggle #html #css 숨기고 보이는 방법은 어렵지 않다 먼저 예시를 보여주겠다 hide $("#hacs").hide(); show $("#hacs").show(); id값이 hacs인것을 숨기고 보여주는 예시이다. '그러면 숨기고 보일때마다 버튼 2개만들어서 숨기는 버튼 보여주는 버튼 2개나 만들어야해??' 아니다 버튼하나로 끝낼 수 있다. 그 기능이 바로 toggle이벤트이다 예시먼저 보여주겠다. toggle $("#hacs").toggle(); 이것을 걸어주게되면 id값이 hacs라는게 show가 되어있으면 hide가 되는거고..
[jQuery] 제이쿼리 기초 및 사용방법 part.1 $, #, 태그?
TIPS 2023. 9. 11. [jQuery] 제이쿼리 기초 및 사용방법 part.1 $, #, 태그? 일단 여기서 설명할 방법은 다양한 예시를 보여주고 한줄한줄 풀어보면서 설명할 예정이다 왜냐하면 나는 공부할때 개념보단 문제를 먼저 보기 때문이다 쌩판 모르는 문제이지만 어떤것인지 예시를통해 추측하고 파악하는 케이스라 jQuery는 무엇무엇이다! 라고 말하는 기존 다른 블로그와는 다를것이다. 처음엔 간단한 사용방법만 알려주고 예시를 읽어가면서 어떻게 쓰이는구나 이런식으로 사용해야하는구나 하고 깨달아갔으면 좋겠다.(스스로 예시보고 사용방법보고 왓다갔다 해보자) 일단 jQuery는 반드시 기본 틀 안에서 작성해야한다. 예를들어 $(document).ready(function(){ // 여기서 코딩 시작 }); 이렇게 기본틀을 만들고 사용한다. 참고로 document, window, this는 jQuery에서 ..
반응형
LIST

티스토리툴바