반응형 SMALL jQuery 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를 사용하.. 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();를 이용하여 변경할 수 도 있기.. 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 : 마우스 올려놨을때 일어나는 이벤트(마우스 오버느낌(미리보기볼때 이런느낀이다)).. 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가 되는거고.. TIPS 2023. 9. 11. [jQuery] 제이쿼리 기초 및 사용방법 part.1 $, #, 태그? 일단 여기서 설명할 방법은 다양한 예시를 보여주고 한줄한줄 풀어보면서 설명할 예정이다 왜냐하면 나는 공부할때 개념보단 문제를 먼저 보기 때문이다 쌩판 모르는 문제이지만 어떤것인지 예시를통해 추측하고 파악하는 케이스라 jQuery는 무엇무엇이다! 라고 말하는 기존 다른 블로그와는 다를것이다. 처음엔 간단한 사용방법만 알려주고 예시를 읽어가면서 어떻게 쓰이는구나 이런식으로 사용해야하는구나 하고 깨달아갔으면 좋겠다.(스스로 예시보고 사용방법보고 왓다갔다 해보자) 일단 jQuery는 반드시 기본 틀 안에서 작성해야한다. 예를들어 $(document).ready(function(){ // 여기서 코딩 시작 }); 이렇게 기본틀을 만들고 사용한다. 참고로 document, window, this는 jQuery에서 .. 프로젝트 2023. 8. 12. Mybaits를 이용한 UPDATE 쿼리~뷰까지 만들기 쿼리는 너무 쉽다 다만 결과값을 보여줄 필요가 없읜 resultType설정을 하지 않아도 된다. 파라미터타입은 HashMap으로 하였다. 키벨류가 있으니(원리는 자세히는 모름) UPDATE a테이블 이름 SET업데이트 시키고싶은 속성명 = #{input받은 값}, +a업데이트 시키고 싶은 것 WHERE원하는 조건id = #{입력받은 조건(변동 가능)} UPDATE b테이블 이름 SET업데이트 시키고싶은 속성명 = #{input받은 값}, +a업데이트 시키고 싶은 것 WHERE원하는 조건id = #{입력받은 조건(변동 가능)} UPDATE c테이블 이름 SET업데이트 시키고싶은 속성명 = #{input받은 값}, +a업데이트 시키고 싶은 것 WHERE원하는 조건id = #{입력받은 조건(변동 가능)} 이렇.. 프로젝트 2023. 8. 10. #HTML #JQuery 태그 삭제, 숨기기, 보이기 part3. 야매 응용(feat. context클릭 popup이벤트) 태그를 숨기는건 정말 비주얼적으로만 숨기는 것이다. (심지어 막 이뻐지지도 않음) 그럼 이걸 좀더 활용할 순 없을까?? 야매로 쓰는경우에도 사용될때가 있다 바로바로 현재화면을 좀더 구체적으로 알려주는 detail popup 이벤트를 할때이다. 참고로 팝업창을 띄워주기 위해선 java spring상 view안에 새로운 popup폴더를 만들고 거기에 새로운 popup view를 만들어야한다.(기본) 그런데 여기서 화면에 있는 값을 넘겨주기위해선 param를 이용하여 넘겨주어야한다. 특히 한 화면에 여러 개를 보여주는 탭을 넣는다면 탭에 때라 어떤탭인지 divison을 해줘야하고 그거에 따른 각각의 다른 popup이벤트도 있어야한다. 그러기위해선 division을 정해주는 치밀한 방법이 있는데....(여기서 .. TIPS 2023. 8. 10. #HTML #JQuery 태그 삭제, 숨기기, 보이기 part2. 숨기기, 보이기 이클립스 초기설정 part 1. 서버, 자바버전, 톰캣버전 설정 https://hacs2772.tistory.com/11 이클립스 초기설정 part 1. 서버, 자바버전, 톰캣버전 설정 이클립스를 처음 시작하다보면 많이 난감한 경우가 많다.(가시성 최고인 IntelliJ에 비하면..) 하지만 테마 설정은 하단 링크를 확인하시고 이클립스 초기설정 part.2 가독성 높이기(테마 및 색상변 hacs2772.tistory.com 이클립스 초기설정 part.3 가독성 높이기(글자색 변경) https://hacs2772.tistory.com/27 이클립스 초기설정 part.3 가독성 높이기(글자색 변경) 이번에 할 것은 사실상 코딩할때 기초설정중 가장 중요하다 할 수 있는 글자색 변경이다 왜인지 이해를 돕기위한 .. TIPS 2023. 8. 9. #HTML #JQuery 태그 삭제, 숨기기, 보이기 part1. 삭제 태그의 종류는 많지만 사용하는법은 어렵지 않다. 부득이하게 한 화면에 여러 태그를 사용하되 원하는 태그만 보여주고싶은 경우가 생길 수 있다. ex) 한 화면에 탭버튼을 이용하여 원하는 차트의 팝업창만 보여주고싶은경우 html 코드를 보여주면서 설명하겠다. 사용시간 이름 아이디 그룹이름 IP 행위 날짜 아이디 직업 유형 직업 상태 파일 사이즈 이건 testpopup에서 보여주는 팝업이벤트 화면부분이다. 이 화면에선 2가지의 팝업창을 각자 조건에 따라 보여주게 되는데 이걸 그냥 보여줄 수 없다. 왜냐하면 각자 차트마다 호출하는 data-key도 다를뿐더러 리스트 컬럼개수도 그리드1은 5개 그리드5는 6개 이다. 그냥 보여주게 된다면 하나의 팝업창에 2개의 표시도 안되는 그리드가 보여지게된다. 이러한 경우 각.. 이전 1 2 다음 반응형 LIST
![[jQuery] 제이쿼리 기초 및 사용방법 part.5 text,append,prepend,before,after](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/n0ynW/btstQSspony/0EKDJ3G1ldd7Pn6aa8Yh4k/img.jpg)
![[jQuery] 제이쿼리 기초 및 사용방법 part.4 CSS vs Animate](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/bDRaQB/btstTpCRfyt/gsbcmlA7BtLXtqz93JURTK/img.jpg)
![[jQuery] 제이쿼리 기초 및 사용방법 part.3 이벤트 종류](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/cbsNft/btstQVP6Ik8/UMKya3rTeCxltQNSPiJ8H1/img.jpg)
![[jQuery] 제이쿼리 기초 및 사용방법 part.2 hide, show, toggle](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/bWlhU4/btstHZ0xASO/VUBfFMGt5iA7rBykEyQFYK/img.jpg)
![[jQuery] 제이쿼리 기초 및 사용방법 part.1 $, #, 태그?](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/DivMX/btstSj32vQb/Mk3IUEMlzsG6QPcgI1pjq1/img.jpg)
