[航海99事前準備]Web開発総合クラス2週間

JQuery
Javascript Libraryは、過去のブラウザ間の互換性を考慮して、同じ機能を簡単に実現できます.
使用するには、CDNからjqueryをインポートする必要があります.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" />

いくつかのよく使われる方法

// structure
$(selector).method()

// methods
.append(string)	 // 자식요소 추가
.empty() 	 // 자식요소 비우기
.val([string]) 	 // get & set value
.attr(attr[, val]) // get & set attribute
.css(string) 	// css 속성
.hide() 	// 숨기기 (display: none 적용)
.show() 	// 보이기 (display: block or inline 적용)

$(document).ready(callback) 	// 페이지 로딩완료 후 callback 호출

hide()、show()実験
じっけんじょうけん
elementのdisplay値を非default値に置き換えます.

// style tag 이용.
<style>
  button {
    display: block;	// default는 inline-block;
  }
</style>

実験.실험조건でhid-showした場合、display: blockはまだ適用されますか?

結果display: blockに適用されます.

実験.실험조건にdisplay: noneを追加した場合、show-hideはdisplay: blockに適用されますか?

結果display: inline-block (default)に適用されます.

実験.실험조건にdisplay: noneが追加された場合、show-hideはdisplay: blockに適用されますか?

結果display: blockに適用されます.

Ajax(feat. jquery)
Asynchronous JSON And XMLの略.
JSONまたはXML形式のデータを非同期で交換します.
最も基本的なajaxメソッドはXMLHttpRequest(이하 XHR)である.
IE互換性の怖さ(?)ありますが、fetchやaxiosなどに詳しいです.
jqueryではajaxも使用できます.
jqueryのajaxは互換性のためXHRを使用しているようです.
使用方法

$.ajax({
  type: // [string] http request method (GET, POST, DELETE...)
  url: 	// [string] url
  data: // [object || dict] POST 시, 넘겨줄 body
  success: // [function(callback)] 성공했을 때 실행될 callback 함수.
})

ポスト
JavaScriptがES 6規格を採用するにつれて、jqueryの使用頻度も減少しているという.初めて触れたJavascriptはES 6のバージョンを使っているためか、あまり便利さは感じませんでしたが、jqueryを勉強しているうちに「必ず使う必要はない」という感じでした.
しかしjqueryの利点は直感的で簡潔な使い方です.