• 메뉴 클릭시 하이라이팅 효과 주기
• 정규표현식으로 이메일 유효성 체크하기

연관 WIKI: HTML CSS

2006년 존 레식(John Resig) 최초 개발
클라이언트 측 솔루션 제작을 손쉽게 만들어주는 크로스 플랫폼 자바크스크립트 라이브러리
HTML 문서 탐색 및 조작, 이벤트 처리, 애니메이션, Ajax, …
공식 사이트
jQuery란 무엇인가?

jQuery기반으로 만들어진 사용자 인터페이스 상호작용, 효과, 위젯, 테마 제공
달력, 대화상자, 진행 표시줄, 풍선 도움말, 자동 완성, …
공식사이트

  <link href="/plugins/charts-c3/plugin.css" rel="stylesheet" />
  <script src="/plugins/charts-c3/plugin.js"></script>

  <link href="/plugins/maps-google/plugin.css" rel="stylesheet" />
  <script src="/plugins/maps-google/plugin.js"></script>

  <script src="/plugins/input-mask/plugin.js"></script>

  <script src="/plugins/datatables/plugin.js"></script>

  <script src="/js/require.min.js"></script>  

  <script src="/components/bootstrap/dist/js/bootstrap.min.js"></script>

jQuery 기반 플러그인으로 check box, radio button 커스터마이징
서로 다은 브라우저 및 장치에서 동일한 입력, 터치 장치 지원, 키보드 접근 입력 커스텀의 자유, 가벼운 크기
사용예시

...

홈페이지, GitHub
[jquery] iCheck plugin 사용하기

  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>

  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

  <link th:href="${#httpServletRequest.getContextPath()}+'/plugins/jqvmap/jqvmap.min.css'" rel="stylesheet" /> \\

JQVMap은 Interactive, Clickable Vector Maps를 렌더링하는 jQuery 플러그인입니다.
Firefox, Safari, Chrome, Opera 및 Internet Explorer 9와 같은 최신 브라우저에서 크기 조정이 가능한 SVG (Scalable Vector Graphics)를 사용합니다.
https://github.com/10bestdesign/jqvmap
https://www.10bestdesign.com/jqvmap/

<script th:src="${#httpServletRequest.getContextPath()}+'/plugins/chart.js/Chart.min.js'"></script>

<script th:src="${#httpServletRequest.getContextPath()}+'/plugins/sparklines/sparkline.js'"></script>

<script th:src="${#httpServletRequest.getContextPath()}+'/plugins/jquery-knob/jquery.knob.min.js'"></script>

momentjs

  <script th:src="${#httpServletRequest.getContextPath()}+'/plugins/moment/moment.min.js'"></script>

<script th:src="${#httpServletRequest.getContextPath()}+'/plugins/daterangepicker/daterangepicker.js'"></script>

<script th:src="${#httpServletRequest.getContextPath()}+'/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js'"></script>

<script th:src="${#httpServletRequest.getContextPath()}+'/plugins/summernote/summernote-bs4.min.js'"></script>

<script th:src="${#httpServletRequest.getContextPath()}+'/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js'"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>\\
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/sha256.js"></script>

• [ JS ] window.location VS reload 페이지 이동시키기

• 자바스크립트 배열에서 forEach, filter, map, reduce 활용법

• forEach

• window.open 사용법
• [jQuery] 팝업창에서 부모창 호출, Opener

• Math - ceil, round, floor 사용법
• Math-random 사용법

Console.log

Webpack
React
Node.js
Angular

• var, let, const 선언의 차이
• CSP로 웹사이트의 콘텐츠 보안 정책 설정하기

• [자바스크립트] 배열 또는 문자열에 IndexOf() 사용한 특정 문자 검색
• javascr ipt 중복 submit 방지 / 다중 클릭 방지 / 중복 클릭 방지
• JavaScript Standard Style

• JavaScript Note