Web 初學者的第八堂課
地表最強 -- jQuery
jQuery 有多強？
遇到問題 jq 一定有可以用的套件
jQuery 的歷史
jQuery
jQuery是一套跨瀏覽器的JavaScript函式庫，簡化HTML與JavaScript之間的操作。由約翰‧雷西格（John Resig）在2006年1月的BarCamp NYC上釋出第一個版本
jQuery
- is a JavaScript Library.
- greatly simplifies JavaScript programming.
- is easy to learn.
Hello jQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h1>Lesson 8 -- jQuery!</h1>
<p>Click</p>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).text("Sunny is handsome!");
});
});
</script>
</body>
</html>jQuery fade
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
.box { width: 80px; height: 80px; display: none; }
.red { background-color: red; }
.blue { background-color: blue; }
.green { background-color: green; }
</style>
</head>
<body>
<h1>Lesson 8 -- jQuery!</h1><p>Click</p>
<button id="fade">Click to fade in boxes</button><br>
<div id="d1" class="box red"></div><div id="d2" class="box blue"></div>
<div id="d3" class="box green"></div>
<script>
$(document).ready(function(){
$("p").click(function(){ $(this).text("Sunny is handsome!"); });
$("#fade").click(function(){
$("#d1").fadeIn(); $("#d2").fadeIn("slow"); $("#d3").fadeIn(2100);
});
});
</script>
</body>
</html>jQuery animation
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
.box { width: 80px; height: 80px; position: absolute;}
.red { background-color: red; }
</style>
</head>
<body>
<h1>Lesson 8 -- jQuery!</h1>
<p>Click</p>
<button id="animate">Click to animate the boxes</button><br>
<div id="d1" class="box red"></div>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).text("Sunny is handsome!");
});
$("#animate").click(function(){
$("#d1").animate({left: '250px'});
});
});
</script>
</body>
</html>jQuery UI
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>
<h1>Lesson 8 -- jQuery!</h1>
<p>Click</p>
<img src="http://orig11.deviantart.net/fdda/f/2015/174/f/6/tsundere_loli_by_impuresnow-d8yfcq2.png" height="450px">
<img src="https://ci.memecdn.com/942/7240942.jpg" style="left: 200px; height: 120px">
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).text("Sunny is handsome!");
});
$("img").draggable();
});
</script>
</body>
</html>jQuery ajax
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h1>Lesson 8 -- jQuery!</h1>
<p>Click</p>
<div></div>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).text("Sunny is handsome!");
});
$.get("https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22nome%2C%20ak%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys", function (res){
console.log(res.query);
$("div").text(res.query.results.channel.title);
});
});
</script>
</body>
</html>Facebook API
用今天所學調用臉書吧
Web 初學者的第八堂課
By Albert Hsieh
Web 初學者的第八堂課
大同資訊創意研究社系列社課
- 1,033
