jQuery的介紹
一、什么是jQuery
jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之后又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。
Jquery它是javascript的一個輕量級框架，對javascript進行封裝，它提供了很多方便的選擇器。供你快速定位到需要操作的元素上面去。還提供了很多便捷的方法。
二、怎么使用jQuery
Jquery它是一個庫(框架)，要想使用它，必須先引入！
jquery-1.8.3.js：一般用于學習階段。
jquery-1.8.3.min.js：用于項目使用階段
三、jQuery的簡單入門
所有的jQuery代碼寫在頁面加載函數
$(function(){
jQuery代碼
});
獲取元素：
JS:document.getElementById();
JQ:$("#id");
jQuery與JS的區別：
<title>JS與JQ頁面加載區別</title>
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
window.onload = function(){
alert("張三");
}
//傳統的方式頁面加載會存在覆蓋問題，加載比JQ慢(整個頁面加載完畢<包括里面的其它內容，比如圖片>)
window.onload = function(){
alert("老王");
}
//JQ的加載比JS加載要快！(當整個dom樹結構繪制完畢就會加載)
jQuery(document).ready(function(){
alert("李四");
});
//JQ不存在覆蓋問題，加載的時候是順序執行
$(document).ready(function(){
alert("王五");
});
//簡寫方式
$(function(){
alert("汾九");
});
</script>
總結：
- JQ對象只能操作JQ里面的屬性和方法
- JS對象只能操作JS里面的屬性和方法。
jQuery對象與DOM對象的轉換：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dom與JQ對象之間的轉換</title>
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
function write1(){
//1.JS的DOM操作
//document.getElementById("span1").innerHTML="萌萌噠！";
//DOM對象無法操作JQ對象里面屬性和方法
//document.getElementById("span1").html("萌萌噠！");
var spanEle = document.getElementById("span1");
//將DOM對象轉換成JQ對象
$(spanEle).html("思密達");
}
$(function(){
$("#btn").click(function(){
//JQ對象無法操作JS里面的屬性和方法！！！
//$("#span1").innerHTML="呵呵噠！"
$("#span1").html("呵呵噠！");
//JQ對象向DOM對象轉換方式一
$("#span1").get(0).innerHTML="美美噠！";
//JQ對象向DOM對象轉換方式二
$("#span1")[0].innerHTML="棒棒噠！";
});
});
</script>
</head>
<body>
<input type="button" value="JS寫入" onclick="write1()"/>
<input type="button" value="JQ寫入" id="btn"/><br />
班長：<span id="span1">你好帥！</span>
</body>
</html>
jQuery的效果：
jQuery的效果.png
