簡介：
jquery 全稱 javaScript Query.是js的一個框架。本質上仍然是js。特點：支持各種主流的瀏覽器、使用特別簡單、擁有便捷的插件擴展機制和豐富的插件。
一、JQuery內部封裝原理介紹：匿名閉包。
下面這兩行代碼是jquery包下的已經封裝的代碼，因為window我們可以省略不寫，因此我們可以直接使用 $ 符號。
// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;
匿名自調用，即使用閉包，將函數要執行的數據一次性掛載到window對象下。其推導過程如下：
function fn1(){
console.log("函數");
};
// 調用函數
fn1();
// fn1時函數名，它包含函數的代碼，函數的代碼就是“function(){console.log("函數");}”，用括號包裹，替換fn1，得：
(function (){
console.log("函數");
})();
因此對上面函數形參傳進去obj，下面的實參傳進去window對象，即為下面的表示形式
(function(obj){
//var bjsxt={};
obj.test=function(){
alert("工廠");
}
alert("匿名自調用");
})(window)
因此實現了由局部變量到全局變量window的一個轉變。注：因為window是一個全局變量，而且不能夠被修改和重定義。
二、jquery基本選擇器介紹：id，標簽，類，組合
注意：id選擇器要加#、標簽選擇器什么都不加、類選擇器要加“ . ”、組合選擇器就是直接寫多個，中間用逗號隔開。
下面是一些子選擇器，層級選擇器，等具體哪個可以去查找對應的API
//測試子選擇器
function testChild(){
var inps=$("#showdiv>input");
alert(inps.length);
}
//測試層級選擇器
function testCj(){
var inp=$("input:first");
alert(inp.val());
}
function testCj2(){
var tds=$("td:not(td[width])");
alert(tds.html());
}
三、jquery操作元素屬性
他封裝了set/getattribute方法，這里面對應的是attr ，同樣存在一個問題：不可以獲取實時的input text框中的內容，這個時候要使用value 這里對應的是val 方法
function testField(){
//獲取元素對象
var uname=$("#uname");
//獲取
alert(uname.attr("type")+":"+uname.attr("value")+":"+uname.val());
}
function testField2(){
//獲取元素對象
var uname=$("#uname");
uname.attr("type","button");
}
四、jquery操作元素內容
和js中的是一樣的也是一個innerHTML 和一個innerText，只不過是名字不同。
jquery 操作元素內容學習：
獲取元素對象
1、獲取
對象名.html()//返回當前對象的所有內容，包括HTML標簽。
對象名.text()//返回當前對象的文本內容，不包括HTML標簽
2、修改
對象名.html("新的內容")//新的內容會將原有內容覆蓋，HTML標簽會被解析執行
對象名.text("新的內容")//新的內容會將原有內容覆蓋，HTML標簽不會被解析
五、jquery操作元素樣式 css
js中的是直接對象.style.color=***;這里可以調用css()方法加上JSON來使用，
六、js操作文檔結構
將指定內容添加到對象內部、外部。等等，可以看API手冊
操作文檔結構學習：
獲取元素對象
1、內部插入
append("內容") 將指定的內容追加到對象的內部
appendTo(元素對象或者選擇器) 將制定的元素對象追加到指定的對象內容
prepend() 將指定的內容追加到對象的內部的前面
prependTo() 將制定的元素對象追加到指定的對象內容前面
2、外部插入
after 將指定的內容追加到指定的元素后面
before 將指定的內容追加到指定的元素前面
insertAfter 把所有匹配的元素插入到另一個、指定的元素元素集合的后面
insertBefore 把所有匹配的元素插入到另一個、指定的元素元素集合的前面。
3、包裹
4、替換
5、刪除
empty()
七、事件機制的學習
特點：jquery可以對事件添加，并且同一個事件可以添加多種效果，而js只能添加一種，添加多種的話會覆蓋。
注：頁面載入事件：js中式onload在這里不是使用bind而是使用ready方法。。可以看下面代碼！
//js動態添加事件
function testThing(){
//獲取元素對象
var btn=document.getElementById("btn2");
//添加事件
btn.οnclick=function(){
alert("我是js方式");
}
}
//jquery
//測試bind綁定
function testBind(){
$("#btn2").bind("click",function(){alert("我是bind綁定單擊事件")});
$("#btn2").bind("click",function(){alert("我是bind綁定單擊事件2w2222")});
}
//測試unBind解綁
function testUnfBind(){
$("#btn3").unbind("click");
}
//測試one
function testOne(){
$("#btn3").one("click",function(){alert("我是one")});
}
//頁面載入事件
//js方式
window.οnlοad=function(){
alert("我是js方式頁面加載");
}
window.οnlοad=function(){
alert("我是js方式頁面加載2222");
}
//jquery方式
$(document).ready(function(){
alert("我是jQuery");
})
$(document).ready(function(){
alert("我是jQuery22222");
})
八、動畫效果：
本質就是使用jquery的 hide show屬性來修改div的顯示時間，同時加上css的display：none等屬性
function test(){
$("#showdiv").show(3000);
$("#div01").hide(3000);
/*$("#showdiv").hide(3000);
$("#div01").show(3000);*/
$("div").toggle(3000);
$("#showdiv").slideDown(3000);
$("#div01").slideUp(2000);
$("#showdiv").fadeOut(3000);
}
總結
jquery就是對js的封裝，方便我們調用，在了解了js之后學起來非常塊，對于一個后端開發者來說，了解還是必須的。
在使用jquery實現一些動態效果的時候，可以靈活的運用標志位，比如鼠標點擊事件，點擊一次flag改變一次。可以用來達到某種動態效果的判斷條件。
