jq

jQuery

jQuery 概述

jQuery 是原生 Javascript 開發出來的代碼庫，通常被稱為架構。

jQuery 設計的宗旨是 “write Less，Do More”，即倡導寫更少的代碼，做更多的事情。

jQuery 通常被用來優化HTML文檔操作、事件處理、動畫設計和Ajax互動。

中文名： 極快瑞 
外文名： jQuery 
核心理念： write less,do more 
釋出時間： 2006年1月 
釋出人： John Resig 
釋出地點： 美國紐約 
最新版本： jQuery 3.1.1 
第一個版本： jQuery 1.0（2006年1月）
           

注意：jQuery2.0 以上的版本是不支援IE6、IE7、IE8的。

jQuery 優勢

1. 體積小，使用靈巧(隻需引入一個js檔案)
2. 友善的選擇頁面元素(模仿CSS選擇器更精确、靈活)
3. 動态更改頁面樣式/頁面内容(操作DOM，動态添加、移除樣式)
4. 控制響應事件(動态添加響應事件)
5. 提供基本網頁特效(提供已封裝的網頁特效方法)
6. 快速實作通信(ajax)
7. 易擴充、插件豐富

jQuery 下載下傳

官網：http://jquery.com/

如何引入 jQuery 包

第一種方法：本地檔案引入

第二種方法：他站網絡引入

使用 jQuery

引入 jQuery 檔案後，才能使用 jQuery 代碼。

<script src="jquery.js"></script>
<script>
$(function(){
    alert("歡迎使用 jQuery");
});
</script>
           

1. $ 是 jQuery 的别名，實際就是指 jQuery 對象。
2. 上面代碼表示頁面中所有節點都準備好之後，就可以執行函數了。

$(function(){}) 與 window.οnlοad=function(){} 的差別

// jq 寫法
$(function () {
    console.log("ready1");
});
$(function() {
    console.log("ready2");
});
// js 寫法
window.onload = function () {
    console.log('load1');
};
window.onload = function () {
    console.log('load2');
}
           

上面的代碼運作後的結果為，ready1 ready2 load2，根據結果，得出結論：

1. ready 不會覆寫，而 load 會覆寫。
2. ready 在 load 之前執行。

$(function(){}) 的完整寫法

$(document).ready(function () {
    alert('第一個jQuery程式！');
});
           

jQuery 選擇器

選擇器的作用是選出元素節點，要注意的是結果為集合，就算隻選出來一個元素節點，其結果也是集合。

1. 基本選擇器
2. 層級選擇器
3. 僞類選擇器

基本選擇器

1. ID選擇器： $("#id")
2. 标簽選擇器：$(“element”)
3. 類選擇器：$(".className")
4. 通配選擇器：$("*") 比對指定上下文中所有元素
5. 組選擇器：$(“selector1,selector2,selectorN”) 特點：無數量限制，以逗号分隔 (逐個比對，結果全部傳回)

<div>
    <h4>論語</h4>
    <div class="div1">子在川上曰：</div>
    <p id="p1">“逝者如斯夫！</p>
    <p>不舍晝夜。”</p>
</div>
<script>
console.log( $("#p1") );
</script>
           

層級選擇器

1. 包含選擇器：$(“a b”)在給定的祖先元素下比對所有後代元素。（不受層級限制）
2. 子選擇器：$(“parent > child”) 在給定的父元素下比對所有子元素。
3. 相鄰選擇器：$(“prev + next”) 比對所有緊接在prev元素後的next元素。（緊随其後找1個元素）
4. 兄弟選擇器：$(“prev ~ siblings”) 比對prev元素之後的所有sibling元素。

<div class="main">
    <span>1<img src="img/1.jpg"/></span>
    2<img src="img/1.jpg"/>
</div>
3<img src="img/1.jpg">
4<img src="img/1.jpg">
<div>
    5<img src="img/1.jpg">
</div>
<script>
//$(".main img").css("border","5px solid red");
//$(".main > img").css("border","5px solid blue");
//$(".main + img").css("border","5px solid blue");
//$(".main ~ img").css("border","5px solid blue");
/*
css() 方法介紹
    css() 方法前面必須是jq對象，如果是元素節點的話，會報錯
設定style屬性
    如果修改一個style屬性時
        $("div").css( "color", "red" );
        $("div").css( {"color":"red"} );
    如果修改多個style屬性時
        $("div").css( {"color":"red", "background":"blue"} );
擷取style屬性
    如果擷取一個style屬性時
        $("div").css( "color" );
    如果擷取多個style屬性時
        $("div").css( ["color", "background"] );
*/
</script>
           

綜合應用

<h1>沁園春·雪</h1>
<h2>毛澤東</h2>
<div>
    <div>
        <div>
            北國風光，千裡冰封，萬裡雪飄。
            <div>望長城内外，惟餘莽莽；大河上下，頓失滔滔。</div>
            <p>山舞銀蛇，原馳蠟象，欲與天公試比高。</p>
            <p>須晴日，看紅裝素裹，分外妖娆。</p>
        </div>
    </div>
    <p id="mp">江山如此多嬌，引無數英雄競折腰。</p>
</div>
<p class="c1">惜秦皇漢武，略輸文采；唐宗宋祖，稍遜風騷。</p>
<p class="c1">一代天驕，成吉思汗，隻識彎弓射大雕。</p>
<p>俱往矣，數風流人物，還看今朝。</p>

<script>
// 讓id為mp的元素文字大小變成30px

// 讓class名為.c1的元素背景為#CCFF99

// 将所有的div和p，統一顯示縱向間距

// 将所有的div的邊框設定 2像素 實線 紅色

// 将div下的所有子div中文字變藍色blue

// 将div中包含的div背景顔色變成#FF99FF

// 将div的所有兄弟标簽p的字型顔色變成藍色

// 将緊跟着div的p标簽的邊框設為2像素 實線 #009900

</script>
           

僞類選擇器

特定位置選擇器

1. :first 比對找到的第1個元素
2. :last 比對找到的最後一個元素
3. :eq 比對一個給定索引值的元素

指定範圍選擇器

4. :even 比對所有索引值為偶數的元素

5. :odd 比對所有索引值為奇數的元素

6. :gt(index) 比對所有大于給定索引值的元素

7. :lt(index) 比對所有小于給定索引值的元素

<ul>
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
<script>
$("li:first").css("color", "orange");
</script>
           

排除選擇器

8. :not 去除所有與給定選擇器比對的元素

<p>1</p>
<p id="mp">2</p>
<p class="c1">3</p>
<script>
$("p:not(.c1,#mp)").css("color", "orange");
</script>
           

内容選擇器

1. :contains 比對包含給定文本的元素

<div>abcd</div>
<div>ABcd</div>
<div>xxyy</div>
<script>
console.log( $("div:contains('bc')") );
</script>
           

1. :empty 比對所有不包含子元素或者文本的空元素

<table>
    <tr><td>Value 1</td><td></td></tr>
    <tr><td>Value 2</td><td></td></tr>
</table>
<script>
console.log( $("td:empty") );
</script>
           

1. :has 比對含有選擇器所比對的元素的元素

<div><p>Hello</p></div>
<div>Hello again!</div>
<script>
console.log( $("div:has(p)") );
</script>
           

1. :parent 比對含有子元素或者文本的元素

<table>
    <tr><td>Value 1</td><td></td></tr>
    <tr><td>Value 2</td><td></td></tr>
</table>
<script>
console.log( $("td:parent") );
</script>
           

可見性選擇器

1. :hidden 比對所有不可見元素，或者type為hidden的元素

<table>
    <tr style="display:none"><td>Value 1</td></tr>
    <tr><td>Value 2</td></tr>
</table>
<script>
console.log( $("tr:hidden") );
</script>
           

1. :visible 比對所有的可見元素

<table>
    <tr style="display:none"><td>Value 1</td></tr>
    <tr><td>Value 2</td></tr>
</table>
<script>
console.log( $("tr:visible") );
</script>
           

屬性

1. [attribute] 比對包含給定屬性的元素

<div>
  <p>Hello!</p>
</div>
<div id="test2"></div>
<script>
console.log( $("div[id]") );
</script>
           

1. [attribute=value] 比對給定的屬性是某個特定值的元素

<input type="checkbox" name="a" value="1" />
<input type="checkbox" name="a" value="2" />
<input type="checkbox" name="b" value="3" />
<script>
$("input[name='a']").attr("checked", true);
</script>
           

1. [attribute!=value] 比對所有不含有指定的屬性，或者屬性不等于特定值的元素。

<input type="checkbox" name="a" value="1" />
<input type="checkbox" name="a" value="2" />
<input type="checkbox" name="b" value="3" />
<script>
$("input[name!='a']").attr("checked", true);
</script>
           

1. [attribute^=value] 比對給定的屬性是以某些值開始的元素

<input type="checkbox" name="abc" value="1" />
<input type="checkbox" name="adc" value="2" />
<input type="checkbox" name="b" value="3" />
<script>
$("input[name^='a']").attr("checked", true);
</script>
           

1. [attribute$=value] 比對給定的屬性是以某些值結尾的元素

<input type="checkbox" name="abc" value="1" />
<input type="checkbox" name="adc" value="2" />
<input type="checkbox" name="b" value="3" />
<script>
$("input[name$='c']").attr("checked", true);
</script>
           

1. [attribute*=value] 比對給定的屬性是以包含某些值的元素

<input type="checkbox" name="abc" value="1" />
<input type="checkbox" name="adc" value="2" />
<input type="checkbox" name="b" value="3" />
<script>
$("input[name*='d']").attr("checked", true);
</script>
           

jQuery 選擇器的優化

使用合适的選擇器表達式可以提高性能、增強語義并簡化邏輯。常用的選擇器中，ID選擇器速度最快，其次是類型選擇器。

1. 多用ID選擇器
2. 少直接使用class選擇器
3. 多用父子關系，少用嵌套關系
4. 緩存jQuery對象

過濾器

jQuery提供了2種選擇文檔元素的方式：選擇器和過濾器。

1. 類過慮器：根據元素的類屬性來進行過濾操作。

hasClass(className)：判斷目前jQuery對象中的某個元素是否包含指定類名，包含傳回true，不包含傳回false

2. 下标過濾器：精确選出指定下标元素。

eq(index)：擷取第N個元素。index是整數值，下标從0開始

3. 表達式過濾器。

filter()：篩選出與指定表達式比對的元素集合。

expr:選擇器表達式

4. 映射 map(callback)：将一組元素轉換成其他數組。

<div>1</div>
<div>2</div>
<script>
console.log($("div").map(function(){
    return this.innerHTML;
}));
</script>
           

5. 清洗 not(expr)：删除與指定表達式比對的元素。

<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<script>
$("p").not(":eq(2)").css("color", "red");
</script>
           

6. 截取 slice(start,end)：選取一個比對的子集。

//$("p").slice(0,1).css("color","red");
//$("p").slice(2,4).css("color","red");
//$("p").slice(-2).css("color","red");
//$("p").slice(0,-2).css("color","red");
//$("p").slice(-4,-2).css("color","red");
           

7. children():取得所有元素的所有子元素集合（子元素）。

<div>
    <li>0</li>
    <li id="li1">1</li>
    <li>2</li>
    <li>3</li>
</div>
<script>
$("div").children().css("color","red");
$("div").children(":not(#li1)").css("color","red");
</script>
           

8. find():搜尋所有與指定表達式比對的元素(所有後代元素中查找)。

9. 查找兄弟元素 siblings()查找目前元素的兄弟。

// 查找id=li1元素的兄弟節點（包含前後兄弟節點）
$("#li1").siblings().css("color","red")
//
$("#li1").siblings(".li3,#li0").css("color","red")
//
console.log( $("p:eq(0)").siblings("div:eq(1)").children() );
           

操作DOM

1. 什麼是DOM：document object model 文檔對象模型
2. 樹形結構
3. 什麼是節點（node）：DOM結構中最小機關，元素、文本、屬性。。。

建立節點

var $div = $("<div title='div盒子'>我是DOM</div>")
$("body").append($div);
           

1.插入

a.内部插入：（子集）

append（）：向元素内部增加内容（末尾）

var str = $("<a href='#'>123</a>");
$("div").append(str);
           

appendTo（）：将要增加的内容增加到元素中

var str = $("<a href='#'>123</a>");
str.appendTo($("div"));
           

$(“A”).append(“B”) 等效 $(“B”).appendTo(“A”)

prepend（）：向元素内部增加内容（前置）

prependTo（）：将要增加的内容增加到元素中

$(“A”).prepend(“B”) 等效 $(“B”).prependTo(“A”)

b.外部插入：（同級）

after（）：在元素後面插入内容

insertAfter：将内容插入元素後面

A . a f t e r ( A.after( A.after(B) 等效 B . i n s e r t A f t e r ( B.insertAfter( B.insertAfter(A);

before():在元素前面插入内容

insertBefore（）：将内容插入元素前面

A . b e f o r e ( A.before( A.before(B) 等效 B . i n s e r t B e f o r e ( B.insertBefore( B.insertBefore(A);

2.删除

a.删除

remove（）：删除比對元素

$("div").remove();
$("div").remove(":eq(0)");
           

b.清空

empty（）：清空子節點内容

3.克隆：建立指定節點的副本

clone（）

<b>b</b>
<p>p</p>
<script>		
$("b").clone().prependTo("p");  //将b拷貝出來放到p内部前面
//或
$("b").click(function(){
    // 在clone方法參數中輸入 false | true
    $(this).clone().insertAfter(this);
});
</script>
           

預設為假，假表示不複制；真true：表示複制事件

4.替換：

replaceWith（）：将指定元素替換成比對元素

<b>0</b>
<b>1</b>
<b>2</b>
<script>
// i标簽不存在，則直接把b下标1的元素替換掉
$("b:eq(1)").replaceWith("<i>x</i>");
// 下标0存在，和下标2替換，相當于2删掉，0移到2的位置
$("b:eq(2)").replaceWith($("b:eq(0)"))
</script>
           

replaceAll（）：用比對元素替換成指定元素

//"<i>x</i>".replaceAll("b"); 這種寫法會報錯，因為jq方法必須在jq對象下使用。
$("<i>x</i>").replaceAll("b");
           

a.replaceWith(b) 等效于 b.replaceAll(a)

動畫

JavaScript 語言本身不支援動畫設計，必須通過改變 CSS 來實作動畫效果。

1. 顯隐動畫

原理：

hide() 隐藏。通過改變元素的高度寬度和不透明度，直到這三個屬性值到0

show() 顯示。從上到下增加元素的高度，從左到右增加元素寬度，從0到1增加透明度，直至内容完全可見

參數：

show()

show(speed, callback)

speed: 字元串或數字，表示動畫将運作多久（slow=0.6秒/normal=0.4/fast=0.2） //機關是毫秒

callback: 動畫完成時執行的方法

顯示和隐藏是一對密不可分的動畫形式。

2. 顯隐切換

toggle():切換元素的可見狀态

原理：比對元素的寬度、高度以及不透明度，同時進行動畫，隐藏動畫後将display設定為none

參數：

toggle(speed)

toggle(speed, callback)

toggle(boolean)

speed: 字元串或數字，表示動畫将運作多久（slow=0.6/normal=0.4/fast=0.2）

callback: 動畫完成時執行的方法

boolean: true為顯示 false為隐藏

<style>
*{padding:0;margin:0;}
div{ width:300px; height:300px; background:skyblue;}
</style>
<input type="button" value="show" />
<input type="button" value="hide" />
<input type="button" value="toggle" />
<div></div>
<script src="../jquery-1.11.3.js"></script>
<script>
$(function(){
    $("input:eq(0)").click(function(){
    	$("div").show(3000, function(){alert()});
    });
    $("input:eq(1)").click(function(){
    	$("div").hide(3000);
    });
    $("input:eq(2)").click(function(){
    	$("div").toggle(3000);
    });
});
</script>
           

滑動

1. 顯隐滑動效果

slideDown():滑動顯示

slideUp():滑動隐藏

參數:

slideDown(speed, callback)

slideUp(speed, callback)

2. 顯隐切換滑動

slideToggle():顯隐滑動切換

參數:

slidecToggle(speed, callback)

<style>
*{padding:0;margin:0;}
div{ width:300px; height:300px; background:skyblue;}
</style>
<input type="button" value="slideDown" />
<input type="button" value="slideUp" />
<input type="button" value="slideToggle" />
<div></div>
<script>
$(function(){
    $("input:eq(0)").click(function(){
    	$("div").slideDown(1500, function(){alert()});
    });
    $("input:eq(1)").click(function(){
    	$("div").slideUp(1500);
    });
    $("input:eq(2)").click(function(){
    	$("div").slideToggle(1500);
    });
});
</script>
           

漸變：通過改變不透明度

1. 淡入淡出

fadeIn()

fadeOut()

參數：

fadeIn(speed, callback)

fadeOut(speed, callback)

2. 設定淡出透明效果

fadeTo()：以漸進的方式調整到指定透明度

參數：

fadeTo(speed, opacity, callback)

3.漸變切換:結合fadeIn和fadeOut

fadeToggle()

參數:

fadeOut(speed, callback)

<style>
*{padding:0;margin:0;}
div{ width:300px; height:300px; background:skyblue;}
</style>
<input type="button" value="fadeIn" />
<input type="button" value="fadeOut" />
<input type="button" value="fadeToggle" />
<input type="button" value="fadeTo" />
<div></div>
<script>
$(function(){
    $("input:eq(0)").click(function(){
    	$("div").fadeIn(1500, function(){alert()});
    });
    $("input:eq(1)").click(function(){
    	$("div").fadeOut(1500);
    });
    $("input:eq(2)").click(function(){
    	$("div").fadeToggle(1500);
    });
    $("input:eq(3)").click(function(){
    	$("div").fadeTo(1500, 0.5);
    });
});
</script>
           

自定義：

1. 自定義動畫：animate()

$("input:eq(0)").click(function(){
    $("div").animate({
    	width:400,
    	height:200,
    	borderLeftWidth:10,
    	borderBottomLeftRadius:250
    }, 1500, function(){alert('該動畫效果1500毫秒執行完畢')});
});
           

執行個體：樹形動畫

執行個體：頁籤

執行個體：圖檔放大效果

執行個體：樓梯

執行個體：手風琴

執行個體：下拉菜單

Event

Event 屬性：

type：擷取事件類型名稱

target：發生事件的節點

keyCode：隻針對于keypress事件，擷取鍵盤鍵數字 按下回車，13

pageX：光标對于頁面原點的水準坐标 body

pageY：光标對于頁面原點的垂直坐标

clientX：光标對于浏覽器視窗的水準坐标 浏覽器

clientY：光标對于浏覽器視窗的垂直坐标

screenX：光标對于電腦螢幕的水準坐标 電腦螢幕

screenY：光标對于電腦螢幕的垂直坐标

$(document).mousemove(function(event){
    console.log( event.type );
    console.log( event.target );
    console.log( event.keyCode );
    console.log( event.pageX , ",", event.pageY );
    console.log( event.clientX , ",", event.clientY );
    console.log( event.screenX , ",", event.screenY );
});
           

stopPropagation()：阻止冒泡

1. 從裡到外
2. 嵌套關系
3. 相同僚件
4. 其中的某一父類沒有相同僚件時，繼續向上查找

<div id="div1">div1
    <div id="div2">div2</div>
</div>
<script>
$("div").click(function(event){
    alert(this.id);
    // event.stopPropagation();
});
</script>
           

為比對元素綁定處理方法

bind() 綁定

<input type="button" value="按鈕" />
<script>
$("input").bind("click", function(){
    alert("按鈕已被點選");
});
</script>
           

one() 隻執行一次

<input type="button" value="按鈕" />
<script>
$("input").one("click", function(){
    alert("按鈕已被點選");
});
</script>
           

其他事件

blur()  
focus()     
mousedown()     
resize()    
change()    
keydown()   
mousemove()     
scroll()    
click()     
keypress()  
mouseout()  
select()    
dblclick()  
keyup()     
mouseover()     
submit()    
error()     
load()  
mouseup()    
unload()    
           

事件委托

delegate() 綁定

<div>
    <ul>
    	<li>a</li>
    	<li>b</li>
    	<li>c</li>
    </ul>
</div>
<script>
$("div").delegate("li", "click", function(){
    console.log(this);
});
</script>
           

on() 綁定

<div>
    <ul>
    	<li>a</li>
    	<li>b</li>
    	<li>c</li>
    </ul>
</div>
<script>
$("div").on("click", "li", function(){
    console.log(this);
});
</script>
           

觀察者模式

<input type="button" value="" />
<script>
// 在input元素上注冊了一個a事件
$("input").on("a", function(){alert("事件")});
// 執行input上的a事件
$("input").trigger("a");
// 移除input上的a事件
$("input").off("a");
</script>
           

AJAX

Ajax 全稱為：“Asynchronous JavaScript and XML”（異步 JavaScript 和 XML）

load(url, [data], [callback])

載入遠端 HTML 檔案代碼并插入至 DOM 中。

1. url: 待裝入 HTML 網頁網址。
2. data: 發送至伺服器的 key/value 資料。
3. callback: 載入成功時回調函數。

<div></div>
<script>
$("div").load("top.html");
</script>
           

$("div").load("top.php", {a: 1}, function(response){
    console.log(response);
});
           

注意：

1. 以覆寫的形式載入内容
2. 如果傳參，檔案必須是後端檔案
3. 如果在第二個參數中，以對象的形式傳遞參數，表示 post 發送
4. 如果不以對象的形式傳遞參數，表示 get 發送
5. 不支援跨域通路

jQuery.get(url, [data], [callback], [type])

通過遠端 HTTP GET 請求載入資訊。

1. url: 待載入頁面的URL位址
2. data: 待發送 Key/value 參數。
3. callback: 載入成功時回調函數。
4. type: 傳回内容格式，xml, html, script, json, text, _default。

$.get("test.php");

$.get("test.php", { a: "1" } );

$.get("test.php", function(data){
    alert(data);
});

// 下面代碼參數 a 也是由 get 傳遞的
$.get("test.php?b=1&c=2", { a: "1" }, function(data){
    alert(data);
});
           

jQuery.post(url, [data], [callback], [type])

通過遠端 HTTP POST 請求載入資訊。

1. url: 發送請求位址。
2. data: 待發送 Key/value 參數。
3. callback: 發送成功時回調函數。
4. type: 傳回内容格式，xml, html, script, json, text, _default。

$.post("test.php");

$.post("test.php", { a: "1" } );

$.post("test.php", function(data){
    alert(data);
});

// 下面代碼參數 i 是 get 傳遞，參數 a 是 post 傳遞
$.post("test.php?i=0", { a: "1" }, function(data){
    alert(data);
});
           

jQuery.getScript(url, [callback])

通過 HTTP GET 請求載入并執行一個 JavaScript 檔案。

該方法可以跨域

1. url: 待載入 JS 檔案位址。
2. callback: 成功載入後回調函數。

<style>
.block{
    width: 200px;
    height: 200px;
    background: gray;
}	
</style>
<button id="go">» Run</button>
<div class="block"></div>
<script>
var url = "http://cdn.bootcss.com/jquery-color/2.1.2/jquery.color.min.js";
jQuery.getScript(url, function(){
    $("#go").click(function(){
        $(".block").animate( { 
        	backgroundColor: 'pink' 
        }, 1000).animate( { 
        	backgroundColor: 'blue' 
        }, 1000);
    });
});
</script>
           

jQuery.getJSON(url, [data], [callback])

通過 HTTP GET 請求載入 JSON 資料。

1. url: 發送請求位址。
2. data: 待發送 Key/value 參數。
3. callback: 載入成功時回調函數。

/*
後端 test.php 檔案的輸出内容必須是 json
例如：echo '{"a":"1"}'
*/
$.getJSON("test.php", { a: "1" }, function(json){
    console.log(json.a);
});
           

jQuery.ajax(url,[settings])

通過 HTTP 請求加載遠端資料。

比較常用的屬性：

1. url: 發送請求位址。
2. type: 發送請求方式 GET|POST。
3. data: 待發送 Key/value 參數。
4. success: 載入成功時回調函數。
5. dataType: 傳回資料類型。

get

$.ajax({
    url:"1.php?b=123&c=456&d=abc",
    data:{"a":"xxx"},
    type:'GET',
    success:function(response, status, xhr){
        alert(response);
        console.log(xhr)
    },
    error:function(xhr, status){
        console.log(status)
    }
});
           

post

$.ajax({
    url:"1.php?b=123&c=456&d=abc",
    data:{"a":"xxx"},
    type:'POST',
    success:function(response, status, xhr){
        alert(response);
        console.log(xhr)
    },
    error:function(xhr, status){
        console.log(status)
    }
});
           

jsonp

/*
因為 jsonp 的原理是在頁面上建立一個 script 标簽，指定 src 屬性，
是以該檔案的内容是直接寫在 script 标簽中的，是以輸出的内容必須符合 js 規範，
如果通路的是 1.php ，該頁面的輸出内容是 xxxx
那麼 jsonp 執行後，建立的 script 标簽中是這樣顯示的
<script>
xxxx
</script>
上面代碼中 xxxx 是 1.php 的輸出内容，如果直接在 script 标簽中是會報錯的。
是以得在 1.php 中将資料包裝一下，比如輸出時改為
<%
echo "callback('xxxx')";
%>
這樣在前端，jsonp 執行後，建立的 script 标簽中是這樣顯示的
<script>
callback('xxxx')
</script>
是以還得在前端檔案中自定義 callback 函數，而且該函數又是在全局執行的，是以必須定義全局函數。
*/ 
//是全局函數，如果是局部函數則報錯
function callback(o){
    console.log(o);
}
$.ajax({
    url:"1.php?b=123&c=456&d=abc",
    data:{"a":"xxx"},
    dataType:"jsonp",
    jsonp:"callback",    // 請求中的參數名
    jsonpCallback:"callback"    // 請求中的參數值
});
/*
jsonp 和 jsonpCallback 的内容是可以更改的，比如：
jsonp:"abc", jsonpCallback:"fn123"
語義就變成了，發起的請求中，參數為 ?abc=fn123
是以，後端需要改寫為 $_GET["abc"] 去接收 fn123，fn123是回調函數名稱
*/
/*
對 jsonp 來說，無所謂 success error，是以不用寫，寫了也不會有好執行。
*/
           

通路的頁面，輸出的内容，要用callback()包裹起來，因為輸出的内容是放在script标簽中的，是以表示執行callback函數。

ajaxSetup 設定全局 AJAX 預設選項

指多次執行 ajax 時，相同的屬性可以設定在 ajaxSetup 中。

$.ajaxSetup({
    url:"1.php",
    type:"GET"
});
// 第1個ajax中，具有ajaxSetup所設定的所有屬性
$.ajax({
    data:{"a":1},
    success:function(str){
        alert(str);
    }
});
// 第2個ajax中，也具有ajaxSetup所設定的所有屬性
$.ajax({
    data:{"a":2},
    success:function(str){
        alert(str);
    }
});
// 目前頁面中，每一個 ajax ，都具有ajaxSetup所設定的所有屬性
           

serialize() 序列化表單内容為字元串。

将表單内的各項的所選值取出，序列化成字元串。（url參數中的字元串）

<input id="btn" type="button" value="顯示" />
<form>
    <select name="a">
        <option>1</option>
        <option>2</option>
    </select><br>
    <select name="b" multiple="multiple">
        <option selected="selected">1</option>
        <option>2</option>
        <option selected="selected">3</option>
    </select><br/>
    <input type="checkbox" name="c" value="1"/> 1
    <input type="checkbox" name="c" value="2" checked="checked"/> 2<br>
    <input type="radio" name="d" value="1" checked="checked"/> 1
    <input type="radio" name="d" value="2"/> 2
</form>
<script>
$("#btn").click(function(){
    console.log( $("form").serialize() );
});
</script>
           

對表單來說，其内部各項必須設定 name 屬性，如果設定 id 屬性是找不到值的。

serializeArray() 序列化表單内容為數組對象。

<input id="btn" type="button" value="顯示" />
<form>
    <select name="a">
        <option>1</option>
        <option>2</option>
    </select><br>
    <select name="b" multiple="multiple">
        <option selected="selected">1</option>
        <option>2</option>
        <option selected="selected">3</option>
    </select><br/>
    <input type="checkbox" name="c" value="1"/> 1
    <input type="checkbox" name="c" value="2" checked="checked"/> 2<br>
    <input type="radio" name="d" value="1" checked="checked"/> 1
    <input type="radio" name="d" value="2"/> 2
</form>
<script>
$("#btn").click(function(){
    // 擷取 select 标簽，擷取 type="radio" 标簽
    var arr = $("select, :radio").serializeArray();
    console.log(arr);
    console.log("--------");
    // 用 jq 的 each 方法，對 arr 循環，arr 中每一個元素，都執行一次函數
    $.each( arr, function(index, obj){
        console.log(index);
        console.log(obj);	// {name:, value:}
        console.log("--------");
    });
});
</script>
           

jQuery.param( obj )

将表單元素數組或者對象序列化。

var params = { width:1680, height:1050 };
var str = jQuery.param(params); // width=1680&height=1050
           

var myObject = {
    a: {
        one: 1, 
        two: 2, 
        three: 3
    }, 
    b: [1,2,3]
};
var recursiveEncoded = $.param(myObject);
var recursiveDecoded = decodeURIComponent($.param(myObject));   // 解碼

alert(recursiveEncoded);
alert(recursiveDecoded);
//a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B%5D=3
//a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3

/*
前端：
    通過 Ajax 請求 test.php?a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3
後端：
    echo "php:".$_GET["a"]["one"];
    echo "php:".$_GET["b"][1];    
*/
           

deferred 延期

deferred 對象就是 jQuery 的回調函數解決方案

$.get( url ).done(function(str){
    // 成功時...
}).fail(function(err){
    // 失敗時...
});
           

when 都成功時再執行函數

$.when( 
    $.get("test1.html"), 
    $.get("test2.html")
).done(function(str1, str2){
    // 成功時...
}).fail(function(err){
    // 失敗時...
});
           

jQuery 插件

自定義一些 jQuery 的方法。

$.extend({
    fn1:function(){
    	console.log( this );	// jQuery
    }
})
$.fn1();

$.fn.extend({
    fn2:function(){
    	console.log( this );	// Object[div]
    }
})
$("div").fn2();
           

$.fn1 = function(){
    console.log( this );	// jQuery
}
$.fn1();

$.fn.fn2 = function(){
    console.log( this );	// Object[div]
}
$("div").fn2();
           

extend可以将多個參數，合并成一個對象。

var obj = $.extend({a:1},{a:2,b:2},{b:3,c:3});
console.log( obj );  // {a:2, b:3, c:3}
           

var obj = $.extend(1, true, "abc", [5,6], {b:3,c:3});
console.log( obj );  // {0:5, 1:6, 2:"c", b:3, c:3}
// 設定"abc"時 {0:"a", 1:"b", 2:"c"}，設定[5, 6]時，相當于{0:5, 1:6}
           

字元串，數組，對象都支援，後面的參數與前面的參數如果key相同，會把前面的覆寫掉。

自定義插件

msg.js

（全文完）