Ting's Square 程式寫作之路

[Day22] JS: javascript jQuery

Total : 204 words.

javascript的library函式庫,最有名的是jQuery,能夠讓語法變得直覺、容易撰寫。

javascript有許多不同的library, (甚至還有惡作劇的vanilla JS。XD)
[香草JS](http://vanilla-js.com/)

現在我們來花2分鐘瞧瞧怎麼使用jQuery吧~之後的練習都會使用jQuery的語法!


目錄:


使用jQuery

在vscode引入

https://jquery.com/download/ https://code.jquery.com/jquery-migrate-1.4.1.min.js

html

<body>
     <script 
     src="script/jquery-migrate-1.4.1.min.js"></script>
</body> 

在jsbin引入

https://jsbin.com/ 左上角add library -> 選擇jQuery版本

html

<body>
  <a href="#" class="zone">Hello Zone</a>
  <script
  src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>

jQuery 與 javascript 寫法比較

  1. jQuery讓HTML元素的操作變得更簡單

jQuery $ 代表DOM元素

$('.zone').html('jQuery') 
//取class為zone在html的值,改成別的值

javascript

document.querySelector('.zone').innerHTML = 'javascript';  
//用js去控制html
  1. jQuery可以等DOM元素準備好再做下一個動作
$(document).ready(function() {
	console.log("出發吧!";)
});

更多方便的jQuery套件

日曆 datepicker
拖拉 draggable

相關連結

HackMD筆記