AJAX

AJAX的全稱是Asynchronous JavaScript and XML,就是異步響應(yīng)網(wǎng)絡(luò)的請求,從字面意思上看，AJAX是異步執(zhí)行的,AJAX需要借助于XMLHttpRequest對象
發(fā)送AJAX請求時熄守，域名必須和當前頁面完全一致秒赤，即

1任连、協(xié)議相同（http和https不同）
2、端口相同

AJAX請求外域有下面幾種方法:
1洒闸、使用Flash插件發(fā)送HTTP請求，這種方法可以繞過瀏覽器的安全限制，但必須安裝Flash
2栈雳、在同源域名下架設(shè)一個代理服務(wù)器來轉(zhuǎn)發(fā)，JavaScript負責把請求進行轉(zhuǎn)發(fā)到代理服務(wù)器：

'/proxy?url=http://www.sina.com.cn'

3缔莲、使用JSONP哥纫，但是這個方式只能用GET請求

HTML

<p id="test-jsonp"></p>
<button type="button" onclick="getPrice()">刷新</button>

JavaScript

function refreshPrice(data) {
    var p = document.getElementById('test-jsonp');
    p.innerHTML = '當前價格：' +
        data['0000001'].name +': ' + 
        data['0000001'].price + '；' +
        data['1399001'].name + ': ' +
        data['1399001'].price;
}

function getPrice() {
    var
        js = document.createElement('script'),
        head = document.getElementsByTagName('head')[0];
    js.src = 'http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice';
    head.appendChild(js);
}

4痴奏、CORS：最新的瀏覽器全面支持HTML5蛀骇，在引用外語資源時，除了JavaScript和CSS外读拆，都要驗證CORS,它的過程是這樣的擅憔，當JavaScript向外域發(fā)出請求，瀏覽器收到響應(yīng)后檐晕，首先檢查Access-Control-Allow-Origin是否包含本域暑诸，如果包含，則請求成功棉姐，反之屠列，請求失敗，就是說伞矩，決定權(quán)在服務(wù)器端

Promise

Promise是一種對程序的異步處理結(jié)果進行處理的對象笛洛，由瀏覽器直接支持
Promise的作用是這樣的，它把執(zhí)行代碼和對代碼執(zhí)行結(jié)果處理進行了分離乃坤，看下面一個例子

HTML

<ul id="test-promise-log"></ul>
<script type="text/javascript">PromiseTest1();</script>

JavaScript

//初始化log
function initLogging(){
    var logging = document.getElementById('test-promise-log');
    while(logging.children.length > 1){
        logging.removeChild(logging.children[logging.children.length - 1]);
    }
}

//添加log
function log(s){
    var logging = document.getElementById('test-promise-log');
    var p = document.createElement('p');
    p.innerHTML = s;
    logging.appendChild(p);
}

//執(zhí)行Promise的測試
function PromiseTest1(){
    initLogging();//首先進行初始化操作
    new Promise(function(resolve,reject){
        log('start new Promise...');
        var timeOut = Math.random() * 2;
        log('set timeout to:' + timeOut + ' seconds.');
        setTimeout(function(){
        if(timeOut < 1){
            log('call resolve()...');
            resolve('200 OK');
        }else{
            log('call reject()...');
            reject('timeout in ' + timeOut + ' seconds.');
        }
    },timeOut * 1000);
    }).then(function(r){
        log('Done:' + r);
    }).catch(function(reason){
        log('Failed:' + reason);
    });
}

上面的代碼是一個異步執(zhí)行的方式苛让，結(jié)構(gòu)大概是這樣

new Promise(
    function(resolve,reject){
    if(條件滿足){
      resolve('result');
    }else{
      reject('reson');
    }
}).then(function).catch(function);

假如條件滿足，執(zhí)行resolve湿诊，被then捕獲狱杰，假如條件不滿足，執(zhí)行reject厅须，被catch捕獲

Promise的常用形式如下面所示仿畸，它的執(zhí)行是這樣的，先執(zhí)行job1，假如執(zhí)行的結(jié)果滿足條件错沽，則執(zhí)行job2簿晓，依次下去直到最后一個任務(wù)，假如在執(zhí)行的過程中千埃，有一個不滿足憔儿，則被捕獲

job1.then(job2).then(job3).catch(handleError);

看下面一個例子

HTML(同上)

JavaScript

//執(zhí)行乘法
function multiply(input){
    return new Promise(function(resolve,reject){
        log('calculating ' + input + ' x ' + input + '...');
        setTimeout(resolve,500,input * input);
    });
}

//執(zhí)行加法
function add(input){
    return new Promise(function(resolve,reject){
        log('calculating ' + input + ' + ' + input + '...');
        if(input < 10000)
            setTimeout(resolve,500,input + input);
        else
            setTimeout(reject,500,input);
    });
}

function PromiseTest2(){
    var p = new Promise(function(resolve,reject){
        log('start new Promise...');
        resolve(123);
    });

    p.then(multiply)
     .then(add)
     .then(multiply)
     .then(add)
     .then(function(result){
        log('Got value:' + result);
     }).catch(function(r){
        log('Number is too big:' + r);
     });
}

Promise.all([p1,p2]).then();//這個方法是讓數(shù)組中的兩個Promise對象都進行返回之后，然后再執(zhí)行then中的方法,代碼如下

function PromiseTest3(){
    var p1 = new Promise(function(resolve,reject){
        setTimeout(resolve,Math.random() * 100,'P1');
    });

    var p2 = new Promise(function(resolve,reject){
        setTimeout(resolve,Math.random() * 100,'P2');
    });

    Promise.all([p1,p2]).then(function(results){
        alert(results);
    });
}

Promise.race([p1...pn]).then();//這個則是對數(shù)組中的Promise對象進行執(zhí)行放可，then的執(zhí)行條件是其中最先執(zhí)行完的一個Promise對象,代碼同上谒臼，把all改為race即可

Canvas

是HTML5新增的組件，像是一塊幕布耀里，可以使用JavaScript在其中繪制各種圖表蜈缤、動畫等
1、首先我們需要創(chuàng)建一個canvas節(jié)點
2备韧、我們使用獲取getElemeById的方式來獲取這個畫布
3劫樟、使用canvas.getContext('2d');//來獲取這個畫布的句柄，接著就能操作這個畫布了
如下

繪制一個圖形

HTML

<canvas id="test-canvas-1" width="300" height="200">
</canvas>
<script type="text/javascript">CanvasTest1();</script>

JavaScript

//畫一個笑臉
function CanvaPaintSmileFace(){
    var canvas = document.getElementById('test-canvas');
    var ctx = canvas.getContext('2d');
    ctx.clearRect(0,0,200,200);
    ctx.fillStyle = '#dddddd';
    ctx.fillRect(10,10,130,130);

    var path = new Path2D();
    path.arc(75,75,50,0,Math.PI*2,true);
    path.moveTo(110,75);
    path.arc(75,75,35,0,Math.PI,false);
    path.moveTo(65,65);
    path.arc(60,65,5,0,Math.PI*2,true);
    path.moveTo(95,65);
    path.arc(90,65,5,0,Math.PI*2,true);
    ctx.strokeStyle = '#0000ff';
    ctx.stroke(path);
}

繪制一個文本

HTML(同上)

JavaScript

//文本繪制
function CanvasTest2(){
    var canvas = document.getElementById('test-canvas-1'),
        ctx = canvas.getContext('2d');

    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.shadowOffsetX = 2;
    ctx.shadowOffsetY = 2;
    ctx.shadowBlur = 2;
    ctx.shadowColor = '#666666';
    ctx.font = '24px Arial';
    ctx.fillStyle = '#333333';
    ctx.fillText('Something Just Happens',20,40);
}

JQuery

作用

1织堂、消除瀏覽器差異，不需要寫冗長的代碼來針對不同的瀏覽器進行優(yōu)化
2奶陈、簡潔的操作DOM的方法
3易阳、輕松實現(xiàn)動畫、修改CSS等各種操作
jQuery的使用只要在head下面添加下面這句就可以了

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

$符號

$是jQuery的別名,本質(zhì)上是一個函數(shù)

選擇器

$('#dom-id');//按照id進行查找,返回的是一個數(shù)組吃粒，而不是undefined或者null潦俺，所以不用進行判斷

var div = $('#domid');
var divDom = div.get(0);//假設(shè)存在，獲取第一個DOM元素
var another = $(divDom);//將DOM包裝為jQuery對象

$('tag-name');//按照tag進行查找徐勃，返回的是一個數(shù)組

var ps = $('p');
ps.length;

$('.class-name');//按照class進行查找

var a = $('.red.green');

$('[name=email]');//按照屬性進行查找
$('[name^=icon]');//找出所有以icon開頭的屬性
$('[name$=with]');//找出所有以with結(jié)尾的屬性
$('[class^=icon-]');//找出所有以icon-開頭的class屬性
$('p.red,div.green');//找出所有tag為p且class為red和tag為div和class為green的屬性
$('input[name=email]');//找出所有input中name為email的屬性
看一個實例

HTML

<!--選擇器-->
<div id="test-jquery">
    <p id="para-1" class="color-red">JavaScript</p>
    <p id="para-2" class="color-green">Haskell</p>
    <p class="color-red color-green">Erlang</p>
    <p name="name" class="color-black">Python</p>
    <form class="test-form" target="_blank" action="#0" onsubmit="return false;">
        <legend>注冊新用戶</legend>
        <fieldset>
            <p><label>名字: <input name="name"></label></p>
            <p><label>郵件: <input name="email"></label></p>
            <p><label>口令: <input name="password" type="password"></label></p>
            <p><button type="submit">注冊</button></p>
        </fieldset>
    </form>
</div>
<input type="text" id="get-val">
<button type="button" onclick="jQueryHandle()">點擊</button>

JavaScript

//jQuery的選擇器
function jQueryHandle(){
    var type = -1;
    var num = $('#get-val');
    type = Number(num.val());//默認將字符串轉(zhuǎn)化為數(shù)字
    var selected = null;
    switch(type){
        case 1://僅選擇JavaScript
            selected = $('#para-1');
            break;
        case 2://僅選擇Erlang
            selected = $('.color-red.color-green');
            break;
        case 3://選擇JavaScript和Erlang
            selected = $('.color-red');
            break;
        case 4://選擇所有編程語言
            selected = $('[class^=color-]');
            break;
        case 5://選擇名字
            selected = $('input[name=name]');
            break;
        case 6://選擇郵件和名字
            selected = $('input[name=email],input[name=name]');
            break;
        default:
            return alert('無效操作');
    }
    if(!(selected instanceof jQuery)){
        return alert('不是有效的jQuery對象')
    }
    $('#test-jquery').find('*').css('background-color','');
    selected.css('background-color', '#ff0051');
}

層級選擇器

層級之間可以用空格隔開事示，如下

$('ul.lang li.lang-javascript');//選擇class為lang下的class為lang-javascript的所有屬性，不同層級之間可以用逗號隔開

子選擇器

子選擇器類似于層級選擇器僻肖，但是限定了層級關(guān)系必須是父子關(guān)系

$('ul.lang>li.lang-javascript');//選出了ul中class為lang中的子class為lang-javascript的屬性

過濾器

過濾器一般不單獨使用肖爵，而是附加在選擇器上，如下

$('ul.lang li');//選擇class為lang下的所有l(wèi)i
$('ul.lang li:first-child');//選擇class為lang下的第一個li
$('ul.lang li:last-child');//選擇class為lang下的最后一個li
$('ul.lang li:nth-child(even)');//選擇class為lang下的所有奇數(shù)li
$('ul.lang li:nth-child(2)');//選擇class為lang下的第2個li

表單相關(guān)

:input;//可以選擇<input>,<textarea>,<select>和<button>
:file;//可以選擇<input type="file">
:checkbox;//可以選擇復(fù)選框
:radio;//可以選擇單選框
:focus;//可以選擇當前輸入焦點的元素
:checked;//選擇當前勾上的單選框和復(fù)選框
:enabled;//選擇正常輸入的input
:disabled;//和:enabled正好相反

看下面一個例子

HTML

<div class="test-selector">
    <ul class="test-lang">
        <li class="lang-javascript">JavaScript</li>
        <li class="lang-python">Python</li>
        <li class="lang-lua">Lua</li>
    </ul>
    <ol class="test-lang">
        <li class="lang-swift">Swift</li>
        <li class="lang-java">Java</li>
        <li class="lang-c">C</li>
    </ol>
</div>
<input type="text" id="get-val1">
<button type="button" onclick="jQueryHandle2()">點擊</button>

JavaScript

//jQuery的層級選擇器
function jQueryHandle2(){
    var type = -1;
    var num = $('#get-val1');
    type = Number(num.val());
    var selected = null; 
    switch(type){
        case 1://所有語言
            selected = $('div.test-selector li[class^=lang]');
            break;
        case 2://所有動態(tài)語言
            selected = $('ul.test-lang li');
            break;
        case 3://所有靜態(tài)語言
            selected = $('ol.test-lang li');
            break;
        case 4://JavaScript
            selected = $('ul.test-lang li:first-child');
            break;
        case 5://Lua
            selected = $('ul.test-lang li:last-child');
            break;
        case 6://C
            selected = $('ol.test-lang li:nth-child(2)');
            break;
        default:
            return alert('無效操作');
    }

    if(!(selected instanceof jQuery)){
        return alert('不是有效的jQuery對象')
    }
    $('#test-jquery').find('*').css('background-color','');
    selected.css('background-color', '#ff0051').css('color', '#ffff00');;
    return true;
}

查找和過濾

find();//可以根據(jù)當前節(jié)點查找子節(jié)點
parent();//根據(jù)根據(jù)當前節(jié)點查找父節(jié)點
next();//查找當前的節(jié)點的下一個節(jié)點
prev();//查找當前節(jié)點的前一個節(jié)點

filter();//過濾出參數(shù)中的節(jié)點
map();//把節(jié)點中的每一個元素轉(zhuǎn)化為其它對象

看一下這個實例,這是將表單轉(zhuǎn)化為json

HTML

<!--查找和過濾-->
<form id="test-form" action="#0" onsubmit="return FindAndFilter();">
    <p><label>Name:<input name="name" value="Jack"></label></p>
    <p><label>Email:<input name="email" value="m13168793059@163.com"></label></p>
    <p><label>Password:<input name="password" value="xiwang"></label></p>
    <p>Gender:<label><input type="radio" name="gender" value="m" checked>Male</label>
              <label><input type="radio" name="gender" value="f">Female</label>
    </p>
    <p><label>City:<select name="city">
        <option value="BJ">Beijing</option>
        <option value="SH">Shanghai</option>
        <option value="CD">Chengdu</option>
        <option value="XM">Xiamen</option>
    </select></label></p>
    <p><button type="submit">Submit</button></p>
</form>

JavaScript

//查找和過濾
function FindAndFilter(){
    var json = null;
    var obj = {};
    //對每個節(jié)點進行特殊處理
    $('input').map(function(){
        var key = this.name;
        var value = this.value
        if(this.name === 'gender')
        {
            if(this.checked)
                obj[`${key}`] = value;
        }
        else
            obj[`${key}`] = value;
    });

    obj['city'] = $('option:selected').text();
    json = JSON.stringify(obj);
    if(typeof(json) === 'string')
        console.log(json);
    else
        alert('json變量不是string');
    return false;
}

操作DOM

jQuery主要是來操作對應(yīng)的DOM節(jié)點
修改Text和HTML

text();//獲取節(jié)點的文本,無參數(shù)是獲取文本臀脏，有參數(shù)是設(shè)置文本
html();//獲取節(jié)點的原始HTML文本,無參數(shù)是獲取文本劝堪，有參數(shù)是設(shè)置文本

修改CSS

使用節(jié)點的css函數(shù)就能對節(jié)點的css屬性進行修改

$('#test-css li.dy>span').css('background-color','#ffd351').css('color','red');//修改該節(jié)點的背景顏色和字體顏色,這是一種鏈式調(diào)用的方式
hasClass('屬性');//判斷class是否有參數(shù)中屬性
addClass('屬性');//
removeClass('屬性');//

看下面一個例子

HTML

<style>
.highlight {
    color: #dd1144;
    background-color: #ffd351;
}
</style>

<div id="test-highlight-css">
    <ul>
        <li class="py"><span>Python</span></li>
        <li class="js"><span>JavaScript</span></li>
        <li class="sw"><span>Swift</span></li>
        <li class="hk"><span>Haskell</span></li>
    </ul>
</div>

JavaScript

//高亮字符串
function hightlightString(){
    var div = $('#test-css');
    // div.find('.js').css('background-color','#00ffff').css('color','#ffff00');
    div.find('.js').addClass('highlight');
}

顯示和隱藏DOM

1、可以設(shè)置節(jié)點的CSS的display屬性為none揉稚，不過恢復(fù)的時候需要記住原先節(jié)點的屬性是block還是inline
2秒啦、也可以使用hide()函數(shù)來隱藏，show()方法來顯示

獲取DOM的信息

attr();//用來獲取節(jié)點的屬性搀玖，或者設(shè)置節(jié)點的屬性(設(shè)置屬性時參數(shù)的個數(shù)為2個)
removeAttr();//移除節(jié)點的屬性
prop();//也是獲取節(jié)點的屬性余境，但是在處理的時候有所不同

<input id="test-radio" type="radio" name="test" checked="checked" value="1">
var radio = $('#test-radio');
radio.attr('checked');//checked
radio.prop('checked');//true
radio.is(':checked');//true最好的做法

操作表單

jQuery使用val()方法來獲取和設(shè)置表單元素的屬性，如下

/*
    <input id="test-input" name="email" value="">
    <select id="test-select" name="city">
        <option value="BJ" selected>Beijing</option>
        <option value="SH">Shanghai</option>
        <option value="SZ">Shenzhen</option>
    </select>
    <textarea id="test-textarea">Hello</textarea>
*/
var
    input = $('#test-input'),
    select = $('#test-select'),
    textarea = $('#test-textarea');

input.val(); // 'test'
input.val('abc@example.com'); // 文本框的內(nèi)容已變?yōu)閍bc@example.com

select.val(); // 'BJ'
select.val('SH'); // 選擇框已變?yōu)镾hanghai

textarea.val(); // 'Hello'
textarea.val('Hi'); // 文本區(qū)域已更新為'Hi'

修改DOM結(jié)構(gòu)

html();//jQuery中的暴力方法，直接對節(jié)點進行設(shè)置
append();//為節(jié)點新增一個子節(jié)點,可以添加DOM對象芳来，jQuery對象暴氏，函數(shù)對象
prepend();//把DOM元素放在最前面
after();//把節(jié)點插入到指定位置之后
before();//把節(jié)點插入到指定位置之前

刪除節(jié)點

remove();//直接刪除節(jié)點
下面的一個例子是對節(jié)點進行添加再排序

HTML

 <div id="test-div">
    <ul>
        <li><span>JavaScript</span></li>
        <li><span>Python</span></li>
        <li><span>Swift</span></li>
    </ul>
 </div>
 <script type="text/javascript">SortNode();</script>

JavaScript

//排序節(jié)點
function SortNode(){
    var init = ['Pascal','Lua','Ruby'];
    var lis = $('#test-div>ul');
    lis.find('li').map(function(){
        init.push(this.innerText);
        this.remove();
    });
    output(init);
    init.sort();
    for(var i = 0;i < init.length;i++){
        var li = document.createElement('li');
        li.innerHTML = '</span>' + init[i] + '</span>';
        lis.append(li);
    }
}

事件

我們把DOM節(jié)點和JavaScript的處理函數(shù)進行綁定，那么當我們對節(jié)點點擊或者鍵盤輸入時绣张，我們就會觸發(fā)JavaScript中對應(yīng)的函數(shù)

<a id="test-link" href="#0">click me</a>
var a = $('#test-link');
a.on('click',function(){
    alert('Hello!');
});

其中on方法用來對事件的綁定

on();//綁定事件答渔，可以指定事件的類型
click();//直接綁定單擊事件
dblclick();//雙擊事件
mouseenter();//鼠標進入事件
mouseleave();//鼠標離開事件
mousemove();//鼠標移動事件
hover();//鼠標不管進入還是退出都觸發(fā)事件

keydown();//鍵盤按下事件
keyup();//鍵盤松開事件
keypress();//鍵盤按一次后觸發(fā)

focus();//DOM獲取焦點時觸發(fā)
blur();//DOM失去焦點時觸發(fā)
change();//當input、select侥涵、textarea的內(nèi)容修改時觸發(fā)
submit();//form提交時觸發(fā)
ready();//頁面被載入并且DOM樹完成初始化后觸發(fā),ready函數(shù)的關(guān)鍵就在于將節(jié)點的事件綁定到初始化的時候

ready事件的寫法

$(function(){
    $('#testFom').submit(function(){
        alert('submit!');
    });
});

事件參數(shù)
所有的時間都會傳入Event對象作為參數(shù)沼撕，我們可以對這些對象進行操作

$(function(){
    $('#testMouseMoveDiv').mousemove(function(c){
        $('#testMouseMoveSpan').text('pageX = ' + e.pageX + ',pageY = ' + e.pageY);
    });
});

取消綁定
使用off('click',function)可以解除節(jié)點事件的綁定,如下

function hello(){
    alert('Hello!');
}

a.click(hello);

//10s之后解除綁定
setTimeout(function(){
    a.off('click',hello);
},10000);

事件的觸發(fā)條件
change函數(shù)可以監(jiān)控事件的觸發(fā)

var input = $('#test-input');
input.change(function(){
    console.log('changed...');
});

input.val('change it!');//這個做法無法觸發(fā)該事件
input.change();//假如我們調(diào)用了JavaScript修改了值，如上面一行芜飘，那么我們在這里可以調(diào)用無參的change方法來進行調(diào)用

瀏覽器的安全限制
敏感操作將被瀏覽器攔截务豺，看下面的例子

var btn1 = $('#testbtn1');
var btn2 = $('#testbtn2');

function popupTestWindow(){
    window.open('/');
}

btn1.click(function(){
    popupTestWindow();
});

btn2.click(function(){
    //由于是延遲彈出，將被攔截
    setTimeout(popupTestWindow,100);
});

看下面一個例子

HTML

<form id="test-form" action="test">
    <legend>請選擇想要學(xué)習(xí)的編程語言：</legend>
    <fieldset>
        <p><label class="selectAll"><input type="checkbox"> <span class="selectAll">全選</span><span class="deselectAll">全不選</span></label> <a href="#0" class="invertSelect">反選</a></p>
        <p><label><input type="checkbox" name="lang" value="javascript"> JavaScript</label></p>
        <p><label><input type="checkbox" name="lang" value="python"> Python</label></p>
        <p><label><input type="checkbox" name="lang" value="ruby"> Ruby</label></p>
        <p><label><input type="checkbox" name="lang" value="haskell"> Haskell</label></p>
        <p><label><input type="checkbox" name="lang" value="scheme"> Scheme</label></p>
        <p><button type="submit">Submit</button></p>
    </fieldset>
</form>
<script type="text/javascript">LanguageHandle();</script>

JavaScript

//實現(xiàn)事件處理的函數(shù)
function LanguageHandle(){
    var 
        form = $('#test-form'),
        langs = form.find('[name=lang]'),
        selectAll = form.find('label.selectAll :checkbox'),
        selectAllLabel = form.find('label.selectAll span.selectAll'),
        deselectAllLabel = form.find('label.selectAll span.deselectAll'),
        invertSelect = form.find('a.invertSelect');
    //重置狀態(tài)
    form.find('*').show().off();
    form.find(':checkbox').prop('checked', false).off();
    deselectAllLabel.hide();
    //攔截form提交事件
    form.off().submit(function(e){
        e.preventDefault();
        alert(form.serialize());
    });

    //對每一個語言都設(shè)置選項
    langs.click(function(event){
        var i = 0;
        var out = 0;
        for(i = 0;i < langs.length;i++){
            var check = langs.get(i).checked;
            if(check === false){
                out++;
            }
        }

        if(out === 0){
            selectAll.prop('checked',true);
            selectAllLabel.text('全不選');
        }else{
            selectAll.prop('checked',false);
            selectAllLabel.text('全選');
        }
    });

    //設(shè)置全選和全不選
    selectAll.click(function(event) {
        var i = 0;
        var isselected = selectAll.is(':checked');
        for(i = 0;i < langs.length;i++){
            langs.get(i).checked = isselected;
        }
        if(isselected === true)
            selectAllLabel.text('全不選');
        else
            selectAllLabel.text('全選');
    }); 

    //設(shè)置反選
    invertSelect.click(function(event) {
        var i = 0;
        var out = 0;
        for(i = 0;i < langs.length;i++){
            var check = langs.get(i).checked;
            langs.get(i).checked = !check;
            if(check)
                out++;
        }
        output(out);
        if(out === 0)
        {
            selectAll.prop('checked',true);
            selectAllLabel.text('全不選');
        }else{
            selectAll.prop('checked',false);
            selectAllLabel.text('全選');
        }
    });
}

動畫
show/hide
直接以無參的調(diào)用會顯示或隱藏DOM元素嗦明，添加參數(shù)進去笼沥，就變成了動畫

var div = $('#test-show-hide');
div.hide(3000);//在3秒鐘內(nèi)漸變
div.show('slow');//在0.6秒后慢慢顯示
div.toggle('slow');//根據(jù)當前狀況顯示或隱藏

slideUp/slideDown/slideToggle
在垂直方向逐漸展開或收縮

fadeIn/fadeOut/fadeToggle
以淡入或淡出的方式顯示

animate
可以實現(xiàn)任意的動畫效果，使用的方式如下

var div = $('#test-animate');
div.animate({
    //CSS樣式
},3000,function(){
    //動畫完成后的操作
});
//上面的作用是在3s內(nèi)達到樣式表所描述的狀態(tài)娶牌，完成之后調(diào)用function

ajax
jQuery在全局對象綁定了ajax(),所以可以處理AJAX請求奔浅。ajax(url,settings)是接收AJAx請求的方法，setting的設(shè)置有下面幾個

async:是否異步執(zhí)行诗良，默認為true汹桦，不要設(shè)置為false
method：發(fā)送的方法，缺省為GET,也可指定為POST,PUT
contentType:發(fā)送POST請求的格式
date:發(fā)送的數(shù)據(jù)鉴裹，可以是字符串舞骆、數(shù)組或Object
headers:發(fā)送的額外的HTTP頭
dataType：接收的數(shù)據(jù)格式，可以指定為html,xml,json,text
具體的使用
var ajaxh = $.ajax('/api/categories',{
    dataType:'json'
});

get
這個方法是針對ajax的GET方法的径荔，寫法如下

var jqxhr = $.get('/path/to/resource',{
    name:'Bob Lee',
    check:1
});

post
和get類似督禽，但是第二個參數(shù)被序列化為application/x-www-form-urlencode

var jqxhr = $.post('/path/to/resource',{
    name:'Bob Lee',
    check:1
});

getJSON
通過get來獲取json

var jqxhr = $.getJSON('/path/to/resource', {
    name: 'Bob Lee',
    check: 1
}).done(function (data) {
    // data已經(jīng)被解析為JSON對象了
});

拓展
編寫jQuery插件

錯誤處理
try...catch...finally,使用的方法和Java一樣，不再贅述
錯誤捕獲有3種方式

try...catch...finally;//捕獲且最終處理
try...catch;//捕獲
try...finally;//沒有捕獲总处，都會處理

throw new Error('錯誤信息')：異常的拋出

錯誤傳播
假如一個程序內(nèi)部發(fā)生了錯誤狈惫，但是它自身沒有捕獲，錯誤就會被拋到外層函數(shù)辨泳，直到被JavaScript引擎捕獲虱岂，程序終止

異步錯誤處理
異步執(zhí)行只是設(shè)置了一個響應(yīng)或者延遲之后再進行操作，因此菠红，我們不能在回調(diào)函數(shù)外捕獲第岖，而是只能在毀掉函數(shù)內(nèi)捕獲，如下

try {
    $btn.click(function () {
    try{
        var
            x = parseFloat($('#x').val()),
            y = parseFloat($('#y').val()),
            r;
        if (isNaN(x) || isNaN(y)) {
            throw new Error('輸入有誤');
        }
        r = x + y;
        alert('計算結(jié)果：' + r);
    
    }catch(e){
      alert('輸入錯誤1!');
    }
    });
} catch (e) {
    alert('輸入有誤2试溯！');
}

如上蔑滓，我們只能捕獲錯誤1，因為回調(diào)函數(shù)執(zhí)行完就退出了，我們捕獲的只是響應(yīng)

underscore
當我們使用Array時键袱，我們有map和filter方法來進行數(shù)組的操作燎窘，但是對象沒有這些好用的方法，另外低版本的瀏覽器也沒有這些方法蹄咖，我們可以使用undercore來進行這樣的操作褐健，這個操作可以讓object也可以進行這樣的操作