前端技術（JQuery）學習筆記（一）JQuery文件準備就緒事件、JQuery事件處理、JQuery物件與DOM物件的、JQuery取值
一、JQuery，是一套JavaScript的函式庫（類庫），可以很大程度上簡化js程式碼。所以，利用Jquery對HTML元素的操作更加的便捷。
1、JQuery的核心函式：jQuery()函式，利用這個核心函式可以完成html元素的選取功能。為了簡化開發過程，JQuery提供了$號代替JQuery核心函式
比如jQuery("div");等價於$("div");
2、Jquery的文件準備就緒事件
我們知道JavaScript程式碼要嵌入到<script>元素內，而因為瀏覽器是以順序解析法解析前端程式碼的，
所以<script>元素的位置是有一定要求的。
所以我們經常會看到將JavaScript程式碼放在body的最下面的情況，同時開發人員也可以通過onload事件，解決以上問題
我們已經看到head中的JavaScript程式碼也成功執行了。所以開發人員可以將js程式碼編寫到文件準備就緒事件中編寫，避免在獲取html元素時找不到的情況。
JQuery也一樣，也提供了文件準備就緒事件ready()來解決這樣的問題，具體程式碼見下圖。（注意，兩種寫法)
3、JQuery的選擇器，JQuery選擇器允許我們對單個html元素或者某個元素組（多個html元素）進行操作，與css選擇器概念一致，同時CSS選擇器在JQuery中照樣實用
比如，在css中要設定某個html元素的樣式，需要使用css選擇器先去選中具體的html元素
比如，在JavaScript中要完成對html元素的操作，首先需要獲取html元素對應的dom物件，然後通過dom物件對html元素進行操作
在jquery中，要完成對html元素的操作首先需要通過jquery的選擇器選中被操作的html元素後，才能對其操作
4、JQuery物件和DOM物件，在JQuery中通過$獲取的物件是JQuery物件，而非DOM物件，同時dom物件和JQuery物件不能通用。也就是JQuery物件不能訪問dom物件，而dom物件也不能訪問JQuery物件中的方法中的方法
5、DOM物件與JQuery物件之間的轉化
①、將dom物件轉化成jq物件
var jqObj=$(dom物件); ②、將jquery物件轉化成dom物件
var domObj=$("div").get(0);
var domObj=$("div")[0]; 
6、JQuery對html事件的處理，在JavaScript中，可以通過DOM物件html事件進行相關處理，在JQuery中，JQuery也可以對html事件進行處理
①、JavaScript處理html事件:
②、JQuery對事件的處理方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
background-color: blueviolet;
}
</style>
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script type="text/javascript">
// javascript提供的用於繫結html元素事件的方法
var pObj=document.getElementById("d1");
pObj.click=function () {
console.log("這裡是JavaScript對html單擊事件的處理機制");
}
$(document).ready(function () {
// jquery繫結事件，在事件名稱括號中通過匿名函式繫結事件的處理程式
$("div").mouseover(function(){
$("div").css("backgroundColor","red");
});
$("div").mouseout(function(){
// $("div").css("backgroundColor","blueviolet");
/*
注意：若直接寫this，這個this是dom物件而非是jquery物件，若希望this是JQuery物件的話，
需要將this這個dom物件通過轉化方式轉化成JQuery物件。型別轉換$(domObj) 即 $(this);
*/
$(this).css("backgroundColor","yellow");
});
//jQuery提供的滑鼠進入事件，與html原生的mouseover基本一樣
// 區別：
$("p").mouseenter(function () {
$(this).css("backgroundColor","blue");
});
//jQuery提供的滑鼠離開事件，與html原生的mouseout基本一樣
$("p").mouseleave(function () {
$(this).css("backgroundColor","orange");
});
});
</script>
</head>
<body>
<div>我是<p>div</p>元素的值</div>
<p id="d1">我是p元素的值</p>
</body>
</html>
7、JQuery獲取html元素的值 Jquery中提供了對html元素和屬性進行操作的強大方法，同樣也提供了獲取html元素值的方法
JQuery提供的獲取html元素內容（值）方法與JavaScript對比如下
①、html() —->domObj.innerHTML
②、text() —->domObj.innerText
③、val() —->domObj.value;
程式碼案例如下：
