[TOC]
# jQuery簡介
jQuery是一款優秀的javaScript庫（框架），該框架憑借簡潔的語法和跨平臺的兼容性，極大的簡化了開發 人員對HTML文檔，DOM，事件以及Ajax的操作。
主旨口號：寫的更少, 干的更多(以更少的代碼,實現更多的功能)
作者：John Resig(約翰·雷西格)
John Resig(約翰·雷西格)，1984年5月8日出生于美國紐約。 個人著作： 精通JAVASCRIPT 以及 JAVASCRIPT忍者的秘密
工作經驗：先后于Mozilla、可汗學院擔任開發工程師。
jQuery框架版本相關介紹開源許可協議：MIT許可證
官方網站： [http://jquery.com/](http://jquery.com/)
中文API網站: [http://jquery.cuishifeng.cn/](http://jquery.cuishifeng.cn/)
托管倉庫： [https://github.com/jquery/jquery](https://github.com/jquery/jquery)
版本情況：
JQuery目前分成1.x版、2.x版和3.x版本，從 2.0.0開始不再支持IE 6/7/8，2.0.0版本之前通過jQuery Migrate plugin與先前版本保持兼容。
最新版本 ：3.2.1
# jQuery的優點
* 輕量級
* 免費開源
* 完善的文檔
* 豐富的插件支持
* 完善的Ajax功能
* 不會污染頂級變量
* 強大的選擇?功能
* 出色的DOM操作封裝
* 出色的瀏覽?兼容性
* 可靠的事件處理機制
* 隱式迭代和鏈式編程操作
# jQuery的基本功能
## Query 查找
### **1. 訪問和操作DOM元素**
   說明:使用jQuery庫,可以很方便地獲取和修改頁面中的某元素無論是刪除、移動、復制元素,jQuery都 提供了一整套方便、快捷的方法,既減少了代碼的編寫,又大大提高了用戶對頁面的體驗度。
**方法示例**：
**append()** ———— 向每個匹配的元素內部后面追加內容。
**appendTo** ————把內容在每個匹配的元素外部后面插入。
**prepend()** ————向每個匹配的元素內部前面追加內容。
**prependTo** ————把內容在每個匹配的元素外部前面插入。
**empty()** —————刪除匹配的元素集合中所有的子節點。
**remove()** ————從DOM中刪除所有匹配的元素。
   這個方法不會把匹配的元素從jQuery對象中刪除，因而可以在將來再使用這些匹配的元素。但**除了這個元素本身得以保留之外，其他的比如綁定的事件，附加的數據等都會被移除。**
**detach()**—————從DOM中刪除所有匹配的元素。
   這個方法不會把匹配的元素從jQuery對象中刪除，因而可以在將來再使用這些匹配的元素。與remove()不同的是，**除了這個元素本身得以保留之外，所有綁定的事件、附加的數據等都會保留下來。**
html()
text()等
例：
html和css代碼
```
<button>點擊刪除</button>
<button>點擊增加</button>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
```
JavaScript代碼
```
<script>
//給 li 綁定事件
$("li").click(function () {
alert(1)
});
//點擊按鈕,在ul里面的前面添加一個li
$("button").click(function () {
//創建節點
var newtag = $("<li>列表項</li>");//創建節點
//分別在內部和外部后面增加節點
$("ul").append(newtag); //在ul內部后面追加新節點
newtag.appendTo($("ul")); //把新節點追加到ul里面的后面
//分別在內部和外部前面面增加節點
$("ul").prepend(newtag); //在ul內部的前面追加新節點
newtag.prependTo($("ul")); //把新節點追加到ul里面的前面
//刪除內容
$("button:eq(0)").click(function () {
$("ul").remove(); // 把選中的元素在頁面中刪除，但在jQuery對象會保留，綁定的事件和附加的數據會被移除
$("ul").empty(); //把選中元素里面的內容清空
lis.detach(); //把選中的元素在頁面中刪除，但在jQuery對象會保留，綁定的事件和附加的數據會保留下來
});
//以下用來測試恢復的節點說綁定的事件和附加的數據是否保存
$("button:eq(1)").click(function () {
$("ul").append(lis)
});
});
</script>
```
### **2. 控制頁面的CSS樣式**
   說明:使用jQuery框架,可以幫助我們方便快捷的來操作CSS樣式，且jQuery已經完成了瀏覽?兼容性處理。
**方法示例：**
**css()**————————添加或修改匹配元素的樣式屬性。
**addClass()**—————為每個匹配的元素添加指定的類名。
**toggleClass()**————切換類，若存在就刪除一個類，若不存在就添加一個類
**hasClass()**—————檢查當前的元素是否含有某個特定的類，如果有，則返回true。
**removeClass()**———從所有匹配的元素中刪除全部或者指定的類。
html和css代碼
```
<html>
<style>
.hezi {
background: tan;
}
.box {
width: 200px;
height: 200px;
border: 1px solid #000;
}
</style>
<script src="jquery-3.4.1.js"></script>
<body>
<button>獲取類屬性</button>
<button>增加類</button>
<button>刪除類</button>
<button>切換類</button>
<button>檢索類</button>
<div class="hezi">盒子</div>
</body>
</html>
```
JavaScript代碼
```
<script>
$("button").eq(0).click(function () {
//添加或修改類屬性
$(".hezi").css('font-size','30px');
});
$("button").eq(1).click(function () {
//增加box類
$(".hezi").addClass("box");
});
$("button").eq(2).click(function () {
//如果不指定刪除類名,就會刪除全部類名
$(".hezi").removeClass("box");
});
$("button").eq(3).click(function () {
//如果不指定刪除類名,就會刪除全部類名
if ( $(".box").hasClass("hezi") ){
alert('201314');
}
});
$("button").eq(4).click(function () {
//切換box類,如果有這個類就刪掉,沒有就添加
$(".hezi").toggleClass("box");
});
</script>
```
### **3. 完善的Ajax網絡請求**
   說明:
**方法示例**：
**ajax()** ————通過 HTTP 請求加載遠程數據。
**get()** ————取得其中一個匹配的元素。
**post()** ————通過遠程 HTTP POST 請求載入信息。
html和css代碼
```
<p>段落1</p>
<p>段落2</p>
```
JavaScript代碼
```
<script>
var aa =$('p').get(0);
console.log(aa); //輸出結果：<p>段落1</p>
var bb =$('p').get();
console.log(bb);
</script>
```
### **4. 頁面標簽事件處理**
   說明:
**方法示例**：
**on()**———————— 在選擇元素上**綁定**一個或多個事件的事件處理函數。
**off()** ————————在選擇元素上**移除**一個或多個事件的事件處理函數。
**click()** ———————觸發每一個匹配元素的click事件。
**mouseenter()** ————當鼠標指針穿過元素時，會發生 mouseenter 事件。該事件大多數時候會與mouseleave 事件一起使用。
**hover()**———————一個模仿懸停事件（鼠標移動到一個對象上面及移出這個對象）的方法。
html和css代碼
```
<style>
div{
width: 100px;
height: 100px;
background: skyblue;
border: 1px solid #000;
margin: 10px;
}
.box1{
width: 200px;
height: 200px;
background: skyblue;
}
</style>
<body>
<button class="btn2">撤銷變色</button>
<button class="btn">點擊</button>
<div class="box">盒子</div>
</body>
```
JavaScript代碼
```
~~~
<script>
//新建節點
var oBOX = $('<div class="obox">盒子2</div>');
var oBtn = $('<button class="btn1">變色和增高</button>');
//注冊點擊事件
$('.btn').click(function () {
$('.box').css('width','300px');
$('.box').after(oBOX);
oBtn.insertAfter($('.btn'));//在 .btn 后面插入 oBtn
});
//事件委托，
$('body').on('click','.btn1',function () {
$('.box').css('background','pink');
console.log('變色');
});
$('body').on('mouseenter','.btn1',function () {
$('.box').css('height','300px');
console.log('變高');
});
$('body').on('mouseleave','.btn1',function () {
$('.box').css('height','100px');
console.log('恢復');
});
//點擊 .btn2 移除 .btn1 的 click 事件，mouseenter 事件不受影響
$('.btn2').on('click',function () {
console.log('禁止變色按鈕');
$('body').off('click','.btn1');//
});
//鼠標移入事件
$('body').on('mouseenter','.box',function () {
$('.box').css({
width:'300px',
height:200
});
});
//鼠標移出事件
$('body').on('mouseleave','.box',function () {
$('.box').css({
width:'100px',
height:100
});
});
//鼠標進入事件
$('.btn').hover(function () {
console.log('鼠標進入');
$(this).css('background','pink');
$('.obox').css('font-size','30px');
},function () {
console.log('鼠標離開');
$(this).css('background','#ccc');
$('.obox').css('font-size','16px');
});
</script>
```
### **5. 整套的動畫特效實現**
   說明:
**方法示例**：
**show()** —————顯示隱藏的匹配元素。
**hide()** —————隱藏顯示的元素
**slideDown()** ——通過高度變化（向下增大）來動態地顯示所有匹配的元素，在顯示完成后可選地觸發一個回調函數。
**slideUp()** ————通過高度變化（向上減小）來動態地隱藏所有匹配的元素，在隱藏完成后可選地觸發一個回調函數。
**slideToggle()**———通過高度變化來切換所有匹配元素的可見性，并在切換完成后可選地觸發一個回調函數。
**animate()** ———— 用于創建自定義動畫的函數。
html和css代碼
```
<style>
div{
width: 200px;
height: 200px;
background: skyblue;
}
</style>
~~~
<body>
<button>滑動隱藏</button>
<button>滑動顯示</button>
<button>滑動切換</button>
<button>隱藏</button>
<button>顯示</button>
<button>動畫</button>
<div></div>
</body>
~~~
```
JavaScript代碼
```
<script>
$(function () {
//滑動隱藏
$('button:eq(0)').click(function () {
$('div').slideUp();
});
//滑動顯示
$('button:eq(1)').click(function () {
$('div').slideDown();
});
//滑動切換
$('button:eq(2)').click(function () {
$('div').slideToggle();
});
//隱藏
$('button:eq(3)').click(function () {
$('div').hide();
});
//顯示
$('button:eq(4)').click(function () {
$('div').show();
});
//動畫
$('button:eq(5)').click(function () {
$('div').animate({
width: '500px',
height: 400,
background: 'pink'
},1500);
});
})
</script>
```
### **6. 好用的工具方法和強大的插件支持**
   說明:
**方法示例：**
**extend()** ———用一個或多個其他對象來擴展一個對象，返回被擴展的對象。
**each()** ———— 以每一個匹配的元素作為上下文來執行一個函數。
**map()** ————將一組元素轉換成其他數組（不論是否是元素數組）
*****
1. extend()
JavaScript代碼
```
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);
//結果:
settings == { validate: true, limit: 5, name: "bar" }
```
2. each()
html和css代碼
```
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
```
JavaScript代碼
```
<script>
//寫法一
$("p").each(function (index,ele) {
//輸出函數的參數
console.log(arguments);
//console.log(index);
//console.log(ele);
//console.log($(ele));
//dom對象
// ele.innerText = index + "哈哈"
//jquery對象
$(ele).text("你好世界"+index);
});
//寫法二
var arr = ["你好",2,3];
$.each(arr,function (index,ele) { //index是數組的索引值,ele是每個元素
console.log(ele);
});
var json = {name:"王龍",age:15,marry:true};
$.each(json,function (key,val) { //key是對象的屬性,val是對象的屬性值
console.log(key);
})
</script>
```
3. map()
html和css代碼
```
<p> 我是內容 1</p>
<p> 我是內容 2</p>
<p> 我是內容 3</p>
<p> 我是內容 4</p>
<p> 我是內容 5</p>
```
JavaScript代碼
```
<script>
//把上面五個p里面的文字放在一個數組里面
//each遍歷
var arr = [];
$("p").each(function (index,ele) {
arr.push($(ele).text())
});
//console.log(arr);
//遍歷并且返回一個數組
var array = $("p").map(function (index,ele) {
return $(ele).text();
});
console.log(array);
</script>
```
# jQuery體驗
## jQuery框架的使用步驟
1. 下載jQuery框架在本地的電腦上（官網提供框架的下載鏈接，兩個版本可供選擇）
2. 創建項目，在項目的頁面中使用script引入jQuery框架
3. 使用jQuery框架來實現相關的功能
## jQuery框架的代碼風格：
1. 美元符號起始
  在jQuery框架中，不管是頁面元素的選擇、內置的功能函數，都使用美元符號來起始的，而這個美元符號,其實就是jQuery框架當中最重要且獨有的對象: jQuery對象。
2. 鏈式編程操作
  jQuery框架中為我們提供了鏈式編程操作，鏈式編程的特點中，幾乎每個jQuery方法執行完畢后都會把當前正在操作的對象作為返回值返回，如果我們需要對某個標簽執行多個操作，那么使用鏈式編程可以讓代碼更短,更簡潔
如： `$("#demoId").addClass("cur").siblings().removeClass("cur");`
## jQuery框架使用準備
### jQuery框架和JavaScript加載模式對比
```
//原生的JavaScript文檔加載,先寫的會覆蓋后寫的；
<script>
window.onload = function () {
console.log("window.onload——1")
};
window.onload = function () {
console.log("window.onload——2")
}
</script>
//打印結果: window.onload--2
//jQuery的文檔加載,不會相互覆蓋
<script src="jquery-3.2.1.js"></script>
<script>
$(document).ready(function () {
console.log("ready——1")
});
$(document).ready(function () {
console.log("ready——2")
})
;
//方式二，簡寫一
$(function () {
console.log("ready——3")
});
//方式三，簡寫二
$().ready(function () {
console.log("ready——4")
});
//打印結果：ready——1
// ready——2
// ready——3
// ready——4
</script>
```
### 兩種加載模式的區別：
1. 執行時機不同
window.onload方法需要等所有的資源（CSS\\JS\\圖片等）都加載完畢后再執行函數中的代碼。 jQuery框架的ready方法只等DOM文檔加載完畢后立即執行包裹代碼。
2. 執行次數不同
window.onload方法，只會執行一次，后面的會把前面的覆蓋，
jQuery框架的ready方法，有幾次執行幾次，不存在覆蓋的問題。
3. jQuery存在多種簡寫方式
完整的編寫方式：$(document).ready(function(){})
簡寫方式：`$().ready(function())
$(function())`
## jQuery框架沖突解決
```
<script>
//解決沖突方法一、
var jQ=$.noConflict(); // conflict 沖突， noConflict() 不沖突,運行這個函數將變量$的控制權讓渡給第一個實現它的那個庫,釋放 jQuery 對 $ 變量的控制。
//解決沖突方法二、
console.log(jQuery('div')); //通過jQuery()直接獲取
var $='今天天氣很好';
console.log($);
console.log(jQ);
</script>
```
# jQuery對象和DOM對象的相互轉換
DOM對象：每個HTML頁面都是一個 DOM對象( Document Object Model ，文本對象模型)，通過傳統的 JavaScript方法訪問頁面中的元素，就是訪問 DOM 對象。
jQuery對象：在 jQuery框架中，通過本身自帶的方法獲取頁面元素的對象，稱為 jQuery 對象 ;
html和css代碼
```
<body>
<div>1</div>
<div>2</div>
</bod
```
JavaScript代碼
```
<script>
window.onload = function () {
//通過原生js方法獲取到的odiv這個對象是原生dom對象
var odiv = document.getElementsByTagName("div")[0];
console.log(odiv);
odiv.style.width = 400 + "px";
odiv.style.height = 400 + "px";
odiv.style.backgroundColor = "skyblue";
//通過jQuery方法來獲取元素,是jQuery對象,不能直接使用原生js的屬性和方法
console.log( $("div") );
//$("div").css("width","400px").css("height","400px").css("background","pink")
// jQuery對象轉原生dom對象
//方法一
console.log( $("div")[0] );
//方法二
console.log( $("div").get(1) );
//怎么把原生dom對象轉化成jQuery
//直接使用$選擇這個對象
console.log( $(odiv) );
}
</script>
```
# jQuery特點總結
* jQuery省略了取數據模塊，可以直接通過$()選擇元素，并且支持 css里面所有選擇器
* jQuery允許對群體數據進行直接控制
* jQuery里面所有的事件都省略了on
* jQuery封裝了很多常用的方法，可以直接調用
html和css代碼
```
<body>
<button><span>按鈕1</span></button>
<button>按鈕2</button>
<button>按鈕3</button>
<button>按鈕4</button>
<button>按鈕5</button>
<button>按鈕6</button>
<button>按鈕7</button>
<button>按鈕8</button>
<button>按鈕9</button>
<button>按鈕10</button>
</body>
```
JavaScript
```
<script>
//原生 js 寫法
window.onload = function () {
//獲取btns
var btns = document.getElementsByTagName("button");
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
alert( this.innerText );
}
}
};
// jQuery 寫法
$(function () {
$("button").click(function () {
//console.log( $(this) )
//alert( this.innerText )
alert( $(this).text() );
});
});
</script>
```
# jQuery框架的CSS方法
**使用原生的方式來設置標簽的樣式**
```<body>
<div>我是div標簽</div>
<button id="btnID">按鈕</button>
<script>
window.onload = function () {
var oBtn = document.getElementById("btnID");
oBtn.onclick = function () {
var oDiv = document.getElementsByTagName("div")[0];
oDiv.style.height = "50px";
oDiv.style.width = "200px";
oDiv.style.background = "red";
}
</script>
</body>
```
**使用jQuery中的css方法來設置標簽的樣式**
```
<body>
<div>我是div標簽</div>
<button id="btnID">按鈕</button>
<script src="jquery-3.2.1.js"></script>
<script>
$(function () {
$("#btnID").click(function () {
$("div").css("height","50px").css("width","200px").css("background","red");
})
})
</script>
</body>
```
**CSS方法的語法：**
1. $("selector").css(name,value);
2. $("selector").css(name1,value).css(name2,value)...;
3. $("selector").css( { name1 : value , name2 : value})
```
<script>
$(function () {
$("#btnID").click(function () {
//01 CSS方法的第一種使用方式
$("div").css("height","50px");
$("div").css("width","200px");
$("div").css("background","red");
//02 CSS方法的第二種使用方式:鏈式編程
$("div").css("height","50px")
.css("width","200px").css("background","red");
//03 CSS方法的第三種使用方式:傳遞樣式鍵值對的對象作為參數
$("div").css({
"height":"100px",
"width":"200px",
"background":"red"
})
})
})
</script>
```
# jQuery操作html
1. $("selector").html(value); 修改html
2. $("selector").html(); 訪問html
3. $("selector").text(value); 修改文本內容
4. $("selector").text(); 訪問文本內容
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.4.1.js"></script>
<script>
$("button:eq(0)").click(function(){
//修改html
$("div").html("<h1>標題1<h1><p>段落</p>")
});
$("button:eq(1)").click(function(){
//訪問html
$("div").html();
});
$("button:eq(2)").click(function(){
//訪問內本內容
$("div").text();
});
</script>
</head>
<body>
<button>修改</button>
<button>訪問全部</button>
<button>訪問文字</button>
<div>
</div>
</body>
</html>
```
1
1
1
1
1
1
1
1
1
1
