一、入門

1、jquery 就是一個js的框架；

2、好處就是能讓我們的js程式碼寫的更少；

3、基本使用：引入script，後面使用即可；

4、關於版本選擇：1.* 版本的相容性比較好，大公司用的多；

5、關於壓縮版和為壓縮版：開發用未壓縮的便於看原始碼學習，生產環境用壓縮版可以提高速度；

 

二、jQuery函式

1、入口函式

（1）入口函式：開發中一般用第三種

//1
$(document).ready(function () {
	alert("hello3")
});

//2
jQuery(document).ready(function () {
	alert("hello4")
})

//3
$(
	function () {
		alert("hello1");
	}
);

//4
jQuery(
	function () {
		alert("hello2");
	}
);

（2）載入模式

• jquery 的 ready 只會等待 dom 元素載入完畢，不等圖片載入完；原生js 的 onload 會等 dom 和圖片一起都載入完；
• 存在多個入口函式的話，jQuery 的不會覆蓋，而原生的會發生覆蓋；

（3）衝突解決

• 第一種使用jQuery 代替 $；
• 第二種使用自定義的符號進行替代；

var $ = 123;
var jq = jQuery.noConflict();
jq(function (ev) {
	alert("haha");
})

2、核心函式

（1）核心函式

• $（）就代表呼叫jQuery 的核心函式；
• 核心函式的引數可以是：
• 1、函式：就是入口函式；
• 2、字串選擇器：包選擇器選擇到的元素包裝為一個 jQuery 物件；
• 3、字串程式碼塊：將程式碼塊代表的元素包裝為一個 jQuery 物件；
• 4、dom元素：將原生的 dom 元素包裝為一個 jQuery 物件；

（2）jQuery物件

• jQuery 物件的本質是一個偽陣列；
• 偽陣列就是有 index 和 length 的類似於陣列的物件

var arr = {0:'2',1:'haha',2:'kk',length:3}

3、工具方法

（1）js 的靜態方法和例項方法

• 靜態方法：
• 直接加給類的就是靜態方法，可以通過了類名呼叫；
• 例項方法：
• 新增給 prototype 的方法就是例項方法，通過例項呼叫；

function MyClass() {}
MyClass.staticTest = function () {
	alert("static method");
};
MyClass.prototype.insTest = function () {
	alert("instance method");
};
MyClass.staticTest();
var mycalss = new MyClass();
mycalss.insTest();

（2）遍歷相關的方法

• each方法：
• 原生的 forEach 方法只能遍歷陣列，不能遍歷偽陣列；而 jquery 的 each 方法都可以；
• map方法：
• 原生的 map 方法只能遍歷陣列，不能遍歷偽陣列；而 jquery 的 map 方法都可以；

var arrlike = {0:'2',1:'haha',2:'kk',length:3};
var arr = [9,8,3,2,1];

arr.forEach(function (value,index) {
	console.log(index,value);
});
$.each(arr,function (index, value) {
	console.log(index,value)
});
$.each(arrlike,function (index, value) {
	console.log(index,value)
});

arr.map(function (value,index,array) {
	console.log(index,value,array);
});
$.map(arr,function (value, index) {
	console.log(index,value);
});
$.map(arrlike,function (value, index) {
	console.log(index,value);
});


//each返回遍歷的陣列，map返回空的陣列
var arr = [9,8,3,2,1];
var each1 = $.each(arr,function (index, value) {});
var map1 = $.map(arr,function (value, index) {});
console.log(each1);
console.log(map1);

（3）其他常用的工具方法

• trim方法：去掉字串的空格，返回沒有空格的結果；
• isWindow方法：判斷是否為 window 物件；
• isArray方法：判斷是不是真陣列的方法，偽陣列是返回 false；
• isFunction方法：判斷是不是函式；jQuery框架的本質就是一個匿名函式；
• holdReady方法：暫時阻止 document 的 ready 方法的執行；

$.holdReady(true);
$(
	function (ev) {
		console.log('ready');
	}
);
var but = document.getElementsByTagName('button')[0];
but.onclick = function (ev) {
	console.log('click');
	$.holdReady(false);
}

（4）WS的簡化操作：新增常用的快捷鍵（settings-livetemplate-html/xml）記得最後要應用

 

三、jQuery的屬性操作

1、內容選擇器

（1）其他的選擇器基本和 css 的選擇器是一致的

（2）內容選擇器

• div：empty：找到沒有文字和子元素的div
• div：parent：找到有文字或者子元素的div
• div：contains（text）：找到包含指定文字的div
• div：has（selector）：找到包含指定子元素的div

2、屬性和屬性節點

（1）屬性和屬性節點

• 屬性：物件身上儲存的變數
• 屬性節點：html標籤中新增的屬性就是屬性節點
• 二者區別：
• 1、任何物件都有屬性，dom物件才有屬性節點；
• 2、瀏覽器開發工具的source的watch中選擇得到的dom元素展開都是屬性，其中 attributes 屬性中儲存的才是屬性節點；
• 屬性的操作：
• 1、設定：obj.attr = value      obj["attr"] = value
• 2、獲取：obj.attr    obj["attr"]
• 屬性節點的操作：
• 1、設定：span.setAttribute('name','haha')
• 2、獲取：span.getAttribute('name')

（2）attr 和 removeAttr 方法

• attr：設定或者獲取屬性節點的值，傳參一個就是獲取，傳參二個就是設定；獲取只能獲取到第一個匹配元素的屬性，設定的話可以設定全部匹配的，沒有的話就新增；
• removeAttr ：移除屬性節點的值；刪除所有

（3）prop 和 removeProp 方法

• prop ：特點和 attr 基本一致；
• removeProp ：也是一樣的；
• 注意：
• 1、prop 既能操作屬性節點，也能操作屬性；
• 2、官方推薦操作屬性節點的時候：像 checked、selected 和 disabled 這樣屬性值為 true 或者 false 的就用prop；其他的都用attr；

3、類操作和文字值操作

（1）類操作

• addClass：新增多個，多個之間用空格隔開；
• removeClass：刪除多個也是這樣的；
• toggleClass：切換的概念就是有就刪除，沒有就加上；

（2）文字值操作

• html（）：等同於原生的 innerHTML；
• text（）：等同於原生的 innerText；
• val（）：等同於原生的 value；這三個都是既可以設定也可以獲取；

4、樣式和尺寸位置的操作

（1）樣式

• 可以逐個設定，也可以鏈式設定，還可以批量設定；
• 開發中一般批量設定用的多：

$('span').css({
	display:'inline-block',
	width:'100px',
	height:'100px',
	background:'red'
})

$('span').css('height','200px');
console.log($('span').css('height'))；

（2）尺寸

$('span').width("500px");
console.log($('span').width());

（3）位置

• offset（）：獲取元素相對文件的偏移；有 left 和 top；能獲取也可以設定；

var offset = $('.zi').offset();
var left = offset.left;
var top = offset.top;
console.log(left,top);
$('.zi').offset({
	top:300,
	left:400
});

• position（）：獲取元素相對定位元素的偏移；有 left 和 top；只能獲取；

var top = $('.zi').position().top;
var left = $('.zi').position().left;
console.log(top,left);

• scrollTop（）：獲取網頁滾動的偏移位；能設能取；取和設都要考慮相容性；
• 1、區域性滾動的寫法

$('.content').scrollTop(100);
console.log($('.content').scrollTop());

• 2、網頁滾動的相容寫法

$('body,html').scrollTop(300);
console.log($('body,html').scrollTop());

 

四、jQuery事件相關

1、事件的繫結和解綁

（1）繫結

$('button').click(function () {
	console.log('haha1')
});
$('button').on('click',function () {
	console.log('haha2')
})

• 第一種方法的效率高，但是有的事件 jQuery 沒有實現；第二種方法效率低，但是所有的事件都可以用；
• 同一個物件繫結多個事件不會被覆蓋 ；

（2）解綁

$('button').off();          
$('button').off('click');            
$('button').off('click',test2);

• 不傳任何引數就是移除所有的事件；
• 傳一個引數就是移除指定型別的事件；
• 傳兩個引數就是移除指定型別指定回撥函式的事件； 

2、事件冒泡和預設行為

（1）冒泡

• 冒泡就是子父元素擁有相同的事件，子元素的事件觸發會自動觸發父元素的相同型別的事件；
• 通常需要阻止事件的冒泡：return false；event.stopPropagation（）；

（2）預設行為

• 預設行為就是比如 a 標籤點選之後會跳轉，但是我們人為並沒有給它新增點選的事件；
• 有時候需要阻止事件的預設行為：return false；preventDefault（）；

3、事件自動觸發和自定義事件

（1）自動觸發

• trigger：會觸發冒泡和預設行為；
• triggerHandler：不會觸發冒泡和預設行為；
• a 標籤的特殊情況：a 標籤用這個兩個都不會觸發預設行為；想要觸發預設行為的話可以把其中的文字用 span 包裹，再對 span 元素進行操作；

（2）自定義事件

• 必須用 on 繫結；
• 必須用 trigger 觸發；

4、事件名稱空間和事件委託

（1）名稱空間

• 名稱空間的作用就是用來區別相同型別的事件的（如 click.zs）；
• 名稱空間有效的兩個條件：
• 1、必須用 on 繫結；
• 2、必須用 trigger 觸發；
• 說明：
• 1、用 trigger 觸發子元素帶名稱空間的事件，父元素帶相同名稱空間的同類事件會被觸發，沒有名稱空間的同類事件不會被觸發；
• 2、用 trigger 觸發子元素不帶名稱空間的事件，父元素同類事件都會被觸發；

（2）事件委託（delegate）

• 含義：就是把事情給別人做，然後將結果反饋回來；
• 必備知識：通過核心函式獲取到的元素不止一個的時候繫結事件的話會給每個元素都繫結；
• 應用場景：入口函式載入的時候不存在的元素，我們用核心函式獲取到的相同的元素陣列中是不含這個一開始不存在的元素的，所以新增事件的時候自然也就新增不上，這時候就要用到事件委託；
• 示例如下：

$('ul').delegate('li','click',function () {
	var index = $(this).index();
	alert("hello="+index);
});
$('button').click(function () {
	var $li = $('<li>i am insert li</li>');
	$('ul').append($li);
});

• 說明：
• 1、這裡就是讓 ul 幫 li 監聽 click 事件；
• 2、能監聽是因為 ul 早就存在不是後來新增的；
• 3、其中的 this 是來自事件的始發者，就是 li；

5、移入移出事件和練習

（1）移入移出

• mouseover、mouseout：會有冒泡；
• mouseenter、mouseleave：不會有冒泡，用的多；
• hover：出入都是他，可以裡面指定兩個回撥函式，一個代表移入，一個代表移出；也可以只有一個回撥，出入都是這個函式；

（2）練習

• 電影排行榜：
• tab 選項卡：jQuery 物件的 index（）方法；jQuery 物件的 eq（）方法返回 jq 物件；jQuery 物件的 get（）方法；

 

五、jQuery動畫效果

1、顯示隱藏

（1）show（time，fn）、hide、toggle

（2）引數：time 是設定動畫的時間；fn是回撥函式，會在動畫完成後執行；

（3）練習：對聯廣告

• 獲取網頁滾動的偏移位：

  $('body,html').scrollTop();

• 設定網頁滾動的偏移位：

  $('body,html').scrollTop(300);

2、展開收起

（1）slideDown、slideUp、slideToggle

（2）說明：

• 方法的引數和顯示隱藏的一致；
• jQuery使用動畫前建議先呼叫 stop 方法；
• children(selector)：返回直接子元素，不會返回文字節點，可以在裡面加選擇器對子元素進行過濾；

3、淡入淡出

（1）fadeIn、fadeOut、fadeToggle、fadeTo（time，tar，fn）

（2）說明：

• 本質就是調 opacity；
• 引數前三個和其他都是一樣的，fadeTo多了一個 tar，就是要調到的目標透明度；

4、自定義動畫

（1）語法：animate（json，time，speed，fn）

$span.animate({top:-50},function () {
	$span.css('top','50px');
}).animate({top:0});

（2）說明：

• 引數第一個是要新增動畫的屬性，後面的依次是動畫時長、速度和回撥； 
• 疊加動畫：json裡類似這樣寫{width:'+=10'}；
• 切換動畫：json裡類似這樣寫{width:'toggle'}；
• json 裡支援多屬性的同時修改；

5、stop 和 delay

（1）delay：就是延遲動畫的執行，裡面傳一個時間引數；

（2）stop：停止動畫，有四種情況

• 停止當前執行後續：不傳參或者傳入的引數都是 false；
• 停止所有動畫：stop（true）、stop（true，false）；
• 完成當前執行後續：stop（false，true）；
• 完成當前停止後續：stop（true，true）；

 

六、jQuery節點操作

1、節點操作

（1）新增：

• 內部插入：
• 1、append：指定元素內部最後插入；
• 2、prepend：指定元素內部最前面插入；
• 外部插入：
• 1、before：指定元素外部前面；
• 2、after：指定元素外部後面；

（2）刪除：

• remove（detach）：刪除指定元素；
• empty：刪除指定元素的內容和子元素；

（3）替換：replaceWith

（4）複製：

• 淺複製：clone（false）；只複製元素；
• 深複製：clone（true）；既複製元素又複製元素的事件；

（5）微博案例：

*2、遊戲開發

*3、網頁開發

*4、jQuery原理

 

七、jQuery實現AJAX

1、php基本語法

（0）php檔案：<?php   code   ?>

（1）兩種註釋：和 js 一樣；

（2）變數定義：$count = 10；

（3）列印內容：echo count；

（4）集合定義和使用

• 陣列：$arr = array(1,3,5)        print_r($arr)         $arr[1]
• 字典（物件）：$dict = array("name"=>"stan","age"=>"35")

（6）控制語句：

• if、switch、for、while 基本都是和 js 一樣的；
• 迴圈中陣列長度的獲取：count（$arr）；

（*）wampserver安裝

2、get 和 post 請求（略）

3、Ajax基本封裝

• 在 js 部分的封裝前提下，還需注意以下幾點：
• ie 快取問題；
• 引數的傳遞問題；
• 成功的程式碼不只 200；
• 新增超時的引數，利用定時器實現；
• 中文引數的處理：用encodeURIComponent（）方法編碼；
• 引數全部轉化為物件的屬性；

4、jQuery 的 Ajax 封裝

5、前後端資料的互動

（1）xml：操作 xml 和 操作 html 差不多；

（2）json：

• 基本概念

• 標準和非標準 json 串：var obj= eval("("+jsonstr+")")  都可以用這個方法轉換為物件；

（3）cookie

• 特點：一個cookie 儲存一條資料；cookie 有大小和數量的限制；
• 三個重要的引數：
• 1、expires：設定過期時間，預設的生命週期是一次會話；設定的時間為過去的時間的話 cookie 會立即刪除；
• 2、path：設定作用範圍的，預設是同瀏覽器同路徑，下級目錄可以訪問，上級不能；
• 3、domain：設定 cookie 的有效域名的，瀏覽器在訪問設定的域名的時候會攜帶 cookie；
• cookie 的封裝（新增獲取刪除和 jQuery 外掛封裝）

document.cookie = 'name=stan;expires=;path=/;domain=127.0.0.1';
console.log(document.cookie);

（4）hash

• 作用：和 cookie 一樣可以儲存一些資料，cookie 不能跨瀏覽器，而 hash 可以；
• 使用：

location.hash = 3;
console.log(location.hash);
console.log(location.hash.substring(1));