6.12 0327 javascript jQuery

javascript有許多不同的library，最有名的是jQuery
（vanilla JS 惡作劇的香草JS http://vanilla-js.com/）

使用jQuery

在vscode引入

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

html

在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
https://jqueryui.com/datepicker/

拖拉 draggable
https://jqueryui.com/draggable/

Select a repo