$ npm install --save jquery # 최신 버전
$ npm install --save jquery@<version> # 특정 버전

$ bower install jquery # 최신 버전
$ bower install jquery#<tag> # 특정 버전

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
  // jQuery의 $만 사용할 수 있다.
});
// 다른 라이브러리의 $를 사용할 수 있다.
</script>

// good
const $myId = $('#myId');

// Bad
const myId = $('#myId');

// Good
document.getElementById("myId");
$("#myId");

// Bad
$('.myClass');

// Good
$('#inner');

// Bad
$('#outer #inner');

// Good
const $products = $('.products');

// Bad
const $products = $('div.products');

// Good
$('.wrap li.item');

// Bad
$('ul.wrap .item');

<div id="container" class="container-class first">
  <table id="table-id">
    <tr>
      <th class="first">Firstname</th>
      <th>Lastname</th> 
      <th>Age</th>
    </tr>
    <tr>
      <td  class="first">Jill</td>
      <td>Smith</td> 
      <td>50</td>
    </tr>
    <tr>
      <td class="first">Eve</td>
      <td>Jackson</td> 
      <td>94</td>
    </tr>
  </table>
</div>

// Good
$('#table-id .first');

// Bad
$('#container table#table-id tr th.first, td.first')

// Good: first-item 라는 아이디를 가진 요소를 대상으로 확인하기 때문에 더 빠른 결과를 얻을 수 있다.
$('.item','#first-item'); 

// Bad: item 클래스를 가진 대상을 전부 확인하기 때문에 느린 결과를 얻을 것이다.
$('.item'); 

// Good - #products는 내부적으로 이미 document.getElementById()를 통해 찾은 뒤 div.container 만 Sizzle 선택자 엔진을 거치게 되므로 빠르다.
const $productIds = $('#products').find('div.container');

// Bad - 중첩된 query 모두 Sizzle 선택자 엔진을 통한다.
const $productIds = $('#products div.container');

// Good
$('.buttons').children();
$('.category input:radio'); 

// Bad
$('.buttons > *');
$('.category *:radio'); 

// Good
$('div.someclass input:radio');

// Bad
$('div.someclass :radio');

<div id="table_container">
  <table>
    <tr>
      <td>ID</td>
      <td>Name</td>
    </tr>
  </table>
</div>

// Good
<script type="text/javascript">
  const parent = $( "#table_container" );
  const table = parent.find('table');
  table.detach();
  table.append('<tr><td>1</td><td>John Smith</td></tr>');
  parent.append(table);
</script>

// Bad
<script type="text/javascript">
  $('#table_container table').append('<tr><td>1</td><td>Hanjung</td></tr>');
</script>

// Good
const $mySelection = $('#nosuchthing');
if ($mySelection.length) {
    $mySelection.slideUp();
    ...
}

// Bad: 선택자에 아무것도 없다는 것을 여러 과정이 진행 된 이후 알아 차릴 것이다.
$('#nosuchthing').slideUp();

/* Good */
.error { color: red; font-weight: bold; }

// Good
$("#mydiv").addClass("error");

// Bad
$("#mydiv").css({'color':red, 'font-weight':'bold'});

// Good
$('#myLink').on('click', myEventHandler); 

<!-- Bad -->
<a id="myLink" href="#" onclick="myEventHandler();">my link</a>

$("#parent-container").on("click", "a", delegatedClickHandler);

// Good
function myLinkClickHandler(){...}
function myInitHandler(){...}
$('#myLink').on('click', myLinkClickHandler);

$(document).ready(myInitHandler);
$(myInitHandler);
// $(document).ready(myInitHandler)과 동일, 다른 형태로 작성하는 ready 구문은 3.0에서 디프리케이트 되었기 때문에 이렇게 작성할 것을 권장

// Bad
$('#myLink').on('click', function(){...}); 
$(function(){ ... });

const validate = function() {
  // 검증 코드
};
 
$( "form" ).on( "click.validator", "button", validate );
$( "form" ).on( "keypress.validator", "input[type='text']", validate );

// 'validator' namespace 하위의 이벤트 핸들러를 모두 해제 시킨다.
$( "form" ).off( ".validator" );

// Good
$('#myDiv').addClass('error').show();

// Bad
$('#myDiv').addClass('error');
$('#myDiv').show();

// Good
$('#myLink')
  .addClass('bold')
  .on('click', myClickHandler)
  .on('mouseover', myMouseOverHandler)
  .show();
    
// Bad
$('#myLink').addClass('bold').on('click', myClickHandler).on('mouseover', myMouseOverHandler).show();

// Good
$myLink.attr({
  href: '#',
  title: 'my link',
  rel: 'external'
});

// Bad
$myLink.attr('href', '#').attr('title', 'my link').attr('rel', 'external');

// Good
$.ajax({
  url: '//www.nhn.com/api/hello',
  ...
});

// Bad
$.ajax({
  url: 'https://www.nhn.com/api/hello',
  ...
});

// Good
$.ajax({
  url: 'something.php',
  data: { 
    param1: test1, 
    param2: test2 
  }
});

// Bad
$.ajax({
  url: 'something.php?param1=test1&param2=test2',
  ....
});

const jqxhr = $.ajax({
  url: url,
  ...
  dataType: 'json',
  ...
});

$.ajax({ ... }).then(successHandler, failureHandler);

// 위 코드를 다음과 같이 작성할 수 있다.
const jqxhr = $.ajax({ ... });
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);

const $elems = $(".someclass");
 
// 기존 jQuery 방식
$elems.each((i, elem) => {
  // elem 혹은 "this" 을 사용
});
 
// ES6 방식
for (let elem of $elems) {
  // elem을 사용
}

const defer = $.Deferred();
const filtered = defer.then(null, (value) => {
  return value * 3;
});
 
defer.resolve(6);

filtered.done(( value ) => {
  alert( "Value is 3*6 =" + value );
});

const promise1 = new Promise((resolve, reject) => {
  resolve('foo');
});

$.when(promise1).then((value) => { 
  console.log(value); // "foo"
});

$.when($.ready, $.getScript("optional.js")).then(() => {
 // document가 ready 되고 optional.js가 loaded/run 되었을 때 
}).catch(() => {
  // error가 발생할 경우
});