jQuery學習筆記，附有自己的註釋
<!doctype html>
<html>
<head>
<title>Learning jQuery</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript" src="jquery.min.js"></script> <!--本地調用jQuery 一般下載下來使用-->
<!--網址調用jQuery
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>-->
<style>
#circle {
width:200px;
height:200px;
background-color:green;
border-radius:100px; /*圓角化*/
}
.square {
width:200px;
height:200px;
background-color:red;
margin-top:10px;
</style>
</head>
<body>
<!--
<script>
if (typeof jQuery != "undefined") { /*判斷jQuery是否已經存在*/
alert("jQuery is installed!");
}
else {
alert("jQuery is not installed!")
}
</script>
-->
<!--
<p>This is some text!</p>
<iframe src="http://www.baidu.com"></iframe>
<script>
/*$表示接下來的是jQuery代碼, ("#circle")操作對象 selector指針*/
$("div").click(function(){ /*點擊時執行一個函數*/ /*jQuery處理多個對象時更簡易 既可以處理id也可以處理class還可以處理div*/
alert("Div Clicked!");
});
$("#circle").click(function(){
$("p").html("Hello world!")); /*改變段落文字信息*/
})
$("#circle").hover(function(){ /*鼠標移動到目標時執行一個函數*/
alert($("iframe").attr("src")); /*attribute屬性*/
})
</script>
-->
<!--圖形隱藏、出現-->
<!--
<div id="circle"></div>
<div class="square"></div>
<div class="square"></div>
<script>
$("#circle").click(function(){
/*$(this).css("width","400px"); /*修改點擊目標的寬度*/
/*$(this).css("display","none"); /*點擊目標立即隱藏*/
/*$(this).hide(); /*點擊目標立即隱藏的簡便寫法*/
/*$(this).fadeOut();/*點擊目標慢慢隱藏*/
$(".square").fadeOut(); /*點擊圓圈 方形隱藏*/
})
</script>
-->
<!--段落隱藏、出現-->
<p>Hello World!</p>
<button id="fader">Fade Out</button>
<button id="faderIn">Fade In</button>
<script>
$("#fader").click(function(){
$("p").fadeOut(3000,function(){ /*3000表示3s 3s內漸漸隱藏 數值越小速度越快*/
alert("fadeOut campletely.") /*隱藏結束後執行一個函數*/
});
})
$("#faderIn").click(function(){
$("p").fadeIn("fast"); /*"fast"快速，"slow"慢速*/
})
</script>
<!--元素動畫化-->
<div id="circle"></div>
<script>
$("#circle").click(function(){ /*點擊圓形執行一個函數*/
$(this).animate({
width:"300px", /*屬性裏面是，不是;*/
height:"300px",
borderRadius:"150px", /*不能寫成border-radius*/
marginLeft:"100px",
marginTop:"100px"
},800); /*讓圓形動畫化 屬性改變 改變時長*/
})
</script>
<!--AJAX 讓網頁運行速度更快-->
<!--
<h1>Asynchronous Javascript And XML</h1> Asynchronous 異步的
<script>
/*
$.get("test.html",function(data){ /*用get命令得到"test.html"文件，將"test.html"裏面的內容作爲data參數來執行函數操作
alert(data); /*會輸出一個以"test.html"文件內容的提示
}); /*使用get 如果用戶斷網的情況下就無法得到文件 什麼都不會出現也不會有提示
*/
$.ajax ({
url:"test.html"
}).done(function(data){ /*使用ajax是網頁真的找到文件以後纔會執行操作處理 給予更強的操控能力*/
/*$("h1").html(data); /*將h1的內容改成"test.html"的內容*/
$("h1").append(data); /*將"test.html"的內容添加到h1裏面*/
})
</script>
-->
<!--Regular Expression 正則表達式-->
<script>
/*var regex=/great/; 嚴格檢查大小寫*/
/*var regex=/great/i; /great/i則不會檢查大小寫*/
var regex=/e/g; /*查找e，g=global 表示查找全部的內容*/
var string="Reges is Great!";
var result=string.match(regex); /*在string裏查找regex這個變量，也就是查找內容great*/
alert(result); /*如果找不到會顯示null*/
</script>
</body>
</html>