본문 바로가기
반응형

개발 공부116

JQuery(제이쿼리) 이벤트 사용시 $(this)의미와 활용 JQuery(제이쿼리) 이벤트 사용시 $(this)의미와 활용 $(this)는 일종의 변수, 선택자라고 볼 수 있다. 일반적으로 동일한 소스가 반복되는 네비게이션 메뉴, 탭, 아코디언메뉴, 리스트등에서 많이 활용. 활용 예) btn이라는 class를 동일하게 가진 버튼들이 존재할때 ​ 현재는 어느버튼을 눌러도 class가 같기 때문에 모든 버튼에 글씨가 변하는 것을 볼 수 있다. 이 this를 활용하여 타겟버튼만 변경되게 바꿔보면 button.click(function(){ $(this).val("눌렀어~"); }); 이 부분만 바꾸면 ​ 만약 이 방법을 안쓴다면 아래 예제소스와 같이 각 버튼마다 id를 별도로 줘야한다. 각각의 이벤트를 만들어주는 번거롭고 비효율적인 일을 할수도 있다. 그러니 이 $(t.. 2023. 11. 25.
윈도우 시스템 다크 모드로 변경/해제 하는 법 윈도우창 시스템 다크 모드로 변경/해제 하는 법 1. 바탕화면에서 개인 설정을 누른다. 2. 개인설정 메뉴에서 색을 누른다. 3. 모드 선택에서 다크를 누른다. 4. 쉽게 윈도우의 모든 창들이 다크 모드로 변한 것을 볼 수 있다. 2023. 11. 24.
NVM 설치 및 버전 변경 방법 NVM 설치 및 버전 변경 방법 프로젝트의 환경설정을 하다가 보면 Node.js의 버전이 달라서 Node.js를 다시 지우고 다시 그 버전에 맞는 Node.js를 다시 설치해야하나 하고 생각 할 수도 있다. 그래서 Node.js의 버전을 쉽게 바꿀수 있는 NVM이 있다. NVM은 node version manager라고 하는데 NVM을 통해 쉽게 원하는 버전을 설치, 변경 할 수 있다. 1. NVM 설치 https://github.com/coreybutler/nvm-windows/ GitHub - coreybutler/nvm-windows: A node.js version management utility for Windows. Ironically written in Go. A node.js versio.. 2023. 11. 24.
Ajax 사용 - Ajax 메소드 $.ajax() $.get() $.post() .load() Ajax 사용 - Ajax 메소드 $.ajax() $.get() .load() Ajax 메소드 메소드 설명 $.ajax() 비동기식 Ajax를 이용하여 HTTP 요청을 전송함. $.get() 전달받은 주소로 GET 방식의 HTTP 요청을 전송함. $.post() 전달받은 주소로 POST 방식의 HTTP 요청을 전송함. $.getScript() 웹 페이지에 스크립트를 추가함. $.getJSON() 전달받은 주소로 GET 방식의 HTTP 요청을 전송하여, 응답으로 JSON 파일을 전송받음. .load() 서버에서 데이터를 읽은 후, 읽어 들인 HTML 코드를 선택한 요소에 배치함. $.ajax() 메소드 jQuery는 Ajax와 관련된 다양하고 편리한 많은 메소드를 제공한다. 그중에서도 $.ajax() 메소.. 2023. 11. 24.
element 요소 조작 (append, prepend, before, after, parent) Element 요소 조작 (append, prepend, before, after, parent) 기존 요소의 내부에 추가 .append() 선택된 요소의 마지막에 새로운 요소나 콘텐츠를 추가한다 .prepend() 선택된 요소의 첫번째에 새로운 요소나 콘텐츠를 추가한다 .appendTo() 선택된 요소를 해당 요소의 마지막에 추가한다. .prependTo() 선택된 요소를 해당 요소의 첫번째에 추가한다. ​ 기존 요소의 외부에 추가 .before() 선택한 요소의 바로 앞쪽에 새로운 요소나 콘텐츠를 추가한다. .after() 선택한 요소의 바로 뒤쪽에 새로운 요소나 콘텐츠를 추가한다. .insertBefore() 선택한 요소를 해당 요소의 앞쪽에 추가한다. .insertAfter() 선택한 요소를 해당.. 2023. 11. 24.
!important 선언으로 CSS 스타일 적용 !important 선언으로 CSS 스타일 적용 !important 순수 JavaScript를 사용하여 요소에 선언 일반 JavaScript에는 CSS 스타일을 적용할 수 있는 몇 가지 대안이 있다. ​ 1. 스타일시트에서 CSS 스타일 만들기 여기에서 아이디어는 다음을 사용하여 CSS 스타일을 만드는 것이다. !important 클래스 내부에 선언하고 해당 클래스를 요소에 적용한다. 일반 JavaScript에서 className 속성은 지정된 요소의 클래스 속성 값을 가져오고 설정하는데 사용할 수 있다. 따라서 이것을 다음과 같이 사용할 수 있다. ​ JS document.querySelector('input').className += " inputWidth"; CSS .inputWidth { widt.. 2023. 11. 24.
반응형

티스토리툴바