Dom加載事件
<!--事件是用戶操作時頁面或頁面加載時引發的用來完成javascript和HTML之間的交互操作。
常見的元素點擊事件、鼠標事件、鍵盤輸入事件等，
較Javascript相比JQuery增加並擴展了基本的事件處理機制，極大的增強了事件處理的能力。-->
<!--
DOM加載事件
頁面加載完畢後瀏覽器會通過javascript爲Dom元素加載事件，
使用Javascript時候使用的是window.onload方法，而Jquery使用的是$(document).ready()方法
$（document).ready方法是事件模塊中最重要的一個函數，可以極大地提高Web 應用程序的響應速度。
jQuery 就是用$（document) .ready（）方法來代替傳統JavaScript 的window.onload 方法的。
通過使用該方法，可以在DOM 載入就緒時就對其進行操縱並調用執行它所綁定的函數。
在使用過程中，需要注意$（document) .ready（）方法和window.onload 方法之間的細微區別：
1.執行時間
window.onload必須等到頁面內包括圖片的所有元素加載完畢後才能執行。
$(document).ready()是DOM結構繪製完畢後就執行，不必等到加載完畢。
2.編寫個數不同
window.onload不能同時編寫多個，如果有多個window.onload方法，只會執行一個
$(document).ready()可以同時編寫多個，並且都可以得到執行
3.簡化寫法
window.onload沒有簡化寫法
$(document).ready(function(){})可以簡寫成$(function(){});
-->
事件綁定
<!--
文檔裝載完成後，如果打算爲元素綁定事件來完成某些操作，
則可以使用bind（）方法來對匹配元素進行特定事件的綁定， bind（）方法的調用格式爲：
bind(type,[data], fn);
第1 個參數是事件類型，類型包括： blur、focus 、load 、click、mousedown 、mouseup 、mouseover 、mouseout 、change 、select、submit 等， 當然也可以是自定義名稱。
第2 個參數爲可選參數，作爲event.data 屬性值傳遞給事件對象的額外數據對象。
第3 個參數則是用來綁定的處理函數。
unbind()方法爲元素取消事件綁定，unbind()方法的格式如下：
$(selctor).unbind([type],[data]);
unbind()方法是元素bind()方法的反向操作，從每個匹配的元素中刪除綁定的事件。
當沒有參數時候刪除所有的綁定事件。如果提供了事件類型的參數則刪除指定的綁定事件。
如果指定了事件類型，第二個參數指定了函數名稱則刪除事件類型中與第二個參數名稱對應的事件。
bind()方法可以爲任何元素綁定事件。
但對於一些常用的事件，jQuery還提供了更加簡便的事件方法來完成相就的操作，下表列舉了幾個常用事件方法：
$(selector).click(function) 觸發或將函數綁定到被選元素的點擊事件
$(selector).focus(function) 觸發或將函數綁定到被選元素的獲得焦點事件
$(selector). blur(function) 觸發或將函數綁定到被選元素的失去焦點事件
$(selector).mouseover(function) 觸發或將函數綁定到被選元素的鼠標懸停事件
$(selector).mouseout(function) $(selector).mouseout(function)
-->
<script src="../JQuery/js/jquery-3.1.1.js"></script>
<script>
$(document).ready(function () {
//綁定單擊事件,改變字體顏色
$("#btn1").bind("click",function(){
alert("中國加油！");
});
$("#btn2").bind("click",function(){
$("p:first").css("color","red");
});
//鼠標移入移出事件
$("#p1").mouseover(function(){
//$(this).css();
$(this).attr("style","color: red;border: 1px solid yellow;");
}).mouseout(function(){
$(this).css({"color":"blue","border":"1px solid black"});
});
//change事件 onchange
$("#userName").change(function(){
//this.style="background:grey";
$(this).css("background","gray");
});
});
</script>
合成事件
<!--
jQuery 有兩個合成事件hover()方法和toggle()方法，類似前面講過的ready（）方法，
hover()方法和toggle（）方法都屬於jQuery 自定義的方法。
1.hover（）方法
hover()方法用於模擬光標懸停事件。方法格式：hover(enter,leave)。
當光標移動到元素上時，會觸發指定的第1 個函數(enter);
當光標移出這個元素時，會觸發指定的第2 個函數(leave) 。
2.toggle()方法
toggle()方法可以切換元素的可見狀態。方法格式：toggle(fun1,fun2,...,funN);
如果元素是可見的， 切換後則爲隱藏；如果元素是隱藏的，切換後則爲可見的。
-->
<script src="../JQuery/js/jquery-3.1.1.js"></script>
<script>
$(document).ready(function () {
//hover方法 鼠標移入和移出
$("div").hover(function(){
// 移入
$(this).css("color","red");
},function(){
// 移出
$(this).css("color","#00BFFF");
})
// toggle方法(顯示和隱藏)
$("#btnShow").click(function(){
$("h3").last().toggle();
});
});
</script>
Dom加載事件
<!--
show（）方法和hide（）方法是jQuery 中最基本的動畫方法。
在HTML 文檔裏，爲一個元素調用hide()方法，會將該元素的display 樣式改爲“none''。
當把元素隱藏後，可以使用show（）方法將元素的display 樣式設置爲先前的顯示狀態
（“block ”或“ inline ”或其他除了“none ”之外的值）。
show（）方法和hide（）方法在不帶任何參數的情況下，相當於css（”display'',"none/ block/inline），
作用是立即隱藏或顯示匹配的元素，不會有任何動畫。
如果希望在調用show（）方法時，元素慢慢地顯示出來，可以爲show（）方法指定一個速度參數，
例如，指定一個速度關鍵字“ slow 、normal、 fast”。應時間爲0.6秒、0.4秒和0.2秒
也可設置整數指定執行時間數字計數級別是毫秒 slow 、normal、 fast實際上相當於600、400、200的值，
用來設定整個顯示/隱藏過程消耗多少毫秒。
如：("p").show(1000);該示例使p元素中1秒內顯示完畢。也能添加回調事件函數。
-->
<script src="../JQuery/js/jquery-3.1.1.js"></script>
<script>
$(document).ready(function () {
//隱藏和顯示
$("#btnShow").click(function(){
$("p").show();
});
$("#btnHide").click(function(){
$("p").hide();
});
//帶有動畫的顯示和隱藏
$("#btnShow1").click(function(){
$("h3:last").show("fast");
});
$("#btnHide1").click(function(){
$("h3:last").hide(1000);// 1000ms
});
});
</script>
Echarts
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#chartmain{
width: 600px;
height: 400px;
}
</style>
<!--引入Echarts和JQuery文件-->
<script src="echarts.min.js"></script>
<script src="jquery-3.1.1.min.js"></script>
<script>
// 加載數據
$(function(){
// 指定圖標的配置和數據
var option = {
title:{
text:'ECharts 數據統計'
},
tooltip:{},
legend:{
data:['用戶來源']
},
xAxis:{
data:["Android","IOS","PC","Other"]
},
yAxis:{
},
series:[{
name:'訪問量',
type:'bar',
data:[500,200,360,100]
}]
};
// 初始化Echarts實例
var myChart = echarts.init(document.getElementById('chartmain'));
// 顯示圖表
//使用制定的配置項和數據顯示圖表
myChart.setOption(option);
});
</script>
</head>
<body>
<div id="chartmain"></div>
</body>
</html>