目的：學習JQuery函式庫的基本使用方法和應用場景。

jquery介紹

jQuery是目前使用最廣泛的javascript函式庫。據統計，全世界排名前100萬的網站，有46%使用jQuery，遠遠超過其他庫。微軟公司甚至把jQuery作為他們的官方庫。

jQuery的版本分為1.x系列和2.x、3.x系列，1.x系列相容低版本的瀏覽器，2.x、3.x系列放棄支援低版本瀏覽器，目前使用最多的是1.x系列的。

jquery是一個函式庫，一個js檔案，頁面用script標籤引入這個js檔案就可以使用。

<script type="text/javascript" src="js/jquery-1.12.2.js"></script>
 

jquery的口號和願望 Write Less, Do More（寫得少，做得多）

jquery載入

將獲取元素的語句寫到頁面頭部，會因為元素還沒有載入而出錯，jquery提供了ready方法解決這個問題，它的速度比原生的 window.onload 更快。

<script type="text/javascript">

$(document).ready(function(){

     ......

});

</script>

可以簡寫為：

<script type="text/javascript">

$(function(){

     ......

});

</script>
 

jquery選擇器

jquery用法思想一  選擇某個網頁元素，然後對它進行某種操作

jquery選擇器  jquery選擇器可以快速地選擇元素，選擇規則和css樣式相同，使用length屬性判斷是否選擇成功。

$(document) //選擇整個文件物件
$('li') //選擇所有的li元素
$('#myId') //選擇id為myId的網頁元素
$('.myClass') // 選擇class為myClass的元素
$('input[name=first]') // 選擇name屬性等於first的input元素
$('#ul1 li span') //選擇id為為ul1元素下的所有li下的span元素
 

對選擇集進行修飾過濾(類似CSS偽類)

$('#ul1 li:first') //選擇id為ul1元素下的第一個li
$('#ul1 li:odd') //選擇id為ul1元素下的li的奇數行
$('#ul1 li:eq(2)') //選擇id為ul1元素下的第3個li
$('#ul1 li:gt(2)') // 選擇id為ul1元素下的前三個之後的li
$('#myForm :input') // 選擇表單中的input元素
$('div:visible') //選擇可見的div元素

對選擇集進行函式過濾

$('div').has('p'); // 選擇包含p元素的div元素
$('div').not('.myClass'); //選擇class不等於myClass的div元素
$('div').filter('.myClass'); //選擇class等於myClass的div元素
$('div').first(); //選擇第1個div元素
$('div').eq(5); //選擇第6個div元素

選擇集轉移

$('div').prev('p'); //選擇div元素前面的第一個p元素
$('div').next('p'); //選擇div元素後面的第一個p元素
$('div').closest('form'); //選擇離div最近的那個form父元素
$('div').parent(); //選擇div的父元素
$('div').children(); //選擇div的所有子元素
$('div').siblings(); //選擇div的同級元素
$('div').find('.myClass'); //選擇div內的class等於myClass的元素

jquery樣式操作

jquery用法思想二  同一個函式完成取值和賦值

操作行間樣式

// 獲取div的樣式
$("div").css("width");
$("div").css("color");


//設定div的樣式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});

特別注意  選擇器獲取的多個元素，獲取資訊獲取的是第一個，比如：$("div").css("width")，獲取的是第一個div的width。

操作樣式類名

$("#div1").addClass("divClass2") //為id為div1的物件追加樣式divClass2
$("#div1").removeClass("divClass")  //移除id為div1的物件的class名為divClass的樣式
$("#div1").removeClass("divClass divClass2") //移除多個樣式
$("#div1").toggleClass("anotherClass") //重複切換anotherClass樣式

jquery屬性操作

1、html() 取出或設定html內容

// 取出html內容

var $htm = $('#div1').html();

// 設定html內容

$('#div1').html('<span>新增文字</span>');

2、text() 取出或設定text內容

// 取出文字內容

var $htm = $('#div1').text();

// 設定文字內容

$('#div1').text('<span>新增文字</span>');

3、attr() 取出或設定某個屬性的值

// 取出圖片的地址

var $src = $('#img1').attr('src');

// 設定圖片的地址和alt屬性

$('#img1').attr({ src: "test.jpg", alt: "Test Image" });

繫結click事件

給元素繫結click事件，可以用如下方法：

$('#btn1').click(function(){

    // 內部的this指的是原生物件

    // 使用jquery物件用 $(this)

})

jquery特殊效果

fadeIn() 淡入

    $btn.click(function(){

        $('#div1').fadeIn(1000,'swing',function(){
            alert('done!');
        });

    });

fadeOut() 淡出
fadeToggle() 切換淡入淡出
hide() 隱藏元素
show() 顯示元素
toggle() 依次展示或隱藏某個元素
slideDown() 向下展開
slideUp() 向上捲起
slideToggle() 依次展開或捲起某個元素

jquery鏈式呼叫

jquery物件的方法會在執行完後返回這個jquery物件，所有jquery物件的方法可以連起來寫：

$('#div1') // id為div1的元素
.children('ul') //該元素下面的ul子元素
.slideDown('fast') //高度從零變到實際高度來顯示ul元素
.parent()  //跳到ul的父元素，也就是id為div1的元素
.siblings()  //跳到div1元素平級的所有兄弟元素
.children('ul') //這些兄弟元素中的ul子元素
.slideUp('fast');  //高度實際高度變換到零來隱藏ul元素

jquery動畫

通過animate方法可以設定元素某屬性值上的動畫，可以設定一個或多個屬性值，動畫執行完成後會執行一個函式。

$('#div1').animate({
    width:300,
    height:300
},1000,swing,function(){
    alert('done!');
});

引數可以寫成數字表達式：

$('#div1').animate({
    width:'+=100',
    height:300
},1000,swing,function(){
    alert('done!');
});

尺寸相關、滾動事件

1、獲取和設定元素的尺寸

width()、height()    獲取元素width和height  
innerWidth()、innerHeight()  包括padding的width和height  
outerWidth()、outerHeight()  包括padding和border的width和height  
outerWidth(true)、outerHeight(true)   包括padding和border以及margin的width和height

2、獲取元素相對頁面的絕對位置

offse()

3、獲取可視區高度

$(window).height();

4、獲取頁面高度

$(document).height();

5、獲取頁面滾動距離

$(document).scrollTop();  
$(document).scrollLeft();

6、頁面滾動事件

$(window).scroll(function(){  
    ......  
})

例項

1、層級選單

2、選項卡

3、置頂選單

4、滾動到頂部

6、手風琴效果

5、無縫滾動

jquery事件

事件函式列表：

blur() 元素失去焦點
focus() 元素獲得焦點
change() 表單元素的值發生變化
click() 滑鼠單擊
dblclick() 滑鼠雙擊
mouseover() 滑鼠進入（進入子元素也觸發）
mouseout() 滑鼠離開（離開子元素也觸發）
mouseenter() 滑鼠進入（進入子元素不觸發）
mouseleave() 滑鼠離開（離開子元素不觸發）
hover() 同時為mouseenter和mouseleave事件指定處理函式
mouseup() 鬆開滑鼠
mousedown() 按下滑鼠
mousemove() 滑鼠在元素內部移動
keydown() 按下鍵盤
keypress() 按下鍵盤
keyup() 鬆開鍵盤
load() 元素載入完畢
ready() DOM載入完成
resize() 瀏覽器視窗的大小發生改變
scroll() 滾動條的位置發生變化
select() 使用者選中文字框中的內容
submit() 使用者遞交表單
toggle() 根據滑鼠點選的次數，依次執行多個函式
unload() 使用者離開頁面

繫結事件的其他方式

$(function(){
    $('#div1').bind('mouseover click', function(event) {
        alert($(this).html());
    });
});

取消繫結事件

$(function(){
    $('#div1').bind('mouseover click', function(event) {
        alert($(this).html());

        // $(this).unbind();
        $(this).unbind('mouseover');

    });
});

主動觸發與自定義事件

主動觸發  可使用jquery物件上的trigger方法來觸發物件上繫結的事件。

自定義事件  除了系統事件外，可以通過bind方法自定義事件，然後用tiggle方法觸發這些事件。

//給element繫結hello事件
element.bind("hello",function(){
    alert("hello world!");
});

//觸發hello事件
element.trigger("hello");

事件冒泡

什麼是事件冒泡  在一個物件上觸發某類事件（比如單擊onclick事件），如果此物件定義了此事件的處理程式，那麼此事件就會呼叫這個處理程式，如果沒有定義此事件處理程式或者事件返回true，那麼這個事件會向這個物件的父級物件傳播，從裡到外，直至它被處理（父級物件所有同類事件都將被啟用），或者它到達了物件層次的最頂層，即document物件（有些瀏覽器是window）。

事件冒泡的作用  事件冒泡允許多個操作被集中處理（把事件處理器新增到一個父級元素上，避免把事件處理器新增到多個子級元素上），它還可以讓你在物件層的不同級別捕獲事件。

阻止事件冒泡  事件冒泡機制有時候是不需要的，需要阻止掉，通過 event.stopPropagation() 來阻止

$(function(){
    var $box1 = $('.father');
    var $box2 = $('.son');
    var $box3 = $('.grandson');
    $box1.click(function() {
        alert('father');
    });
    $box2.click(function() {
        alert('son');
    });
    $box3.click(function(event) {
        alert('grandson');
        event.stopPropagation();

    });
    $(document).click(function(event) {
        alert('grandfather');
    });
})

......

<div class="father">
    <div class="son">
        <div class="grandson"></div>
    </div>
</div>

阻止預設行為  阻止右鍵選單

$(document).contextmenu(function(event) {
    event.preventDefault();
});

合併阻止操作  實際開發中，一般把阻止冒泡和阻止預設行為合併起來寫，合併寫法可以用

// event.stopPropagation();
// event.preventDefault();

// 合併寫法：
return false;

頁面彈框例項

事件委託

事件委託就是利用冒泡的原理，把事件加到父級上，通過判斷事件來源的子集，執行相應的操作，事件委託首先可以極大減少事件繫結次數，提高效能；其次可以讓新加入的子元素也可以擁有相同的操作。

一般繫結事件的寫法

$(function(){
    $ali = $('#list li');
    $ali.click(function(event) {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

事件委託的寫法

$(function(){
    $list = $('#list');
    $list.delegate('li', 'click', function(event) {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

取消事件委託

// ev.delegateTarge 委託物件
$(ev.delegateTarge).undelegate();

// 上面的例子可使用 $list.undelegate();

jquery元素節點操作

建立節點

var $div = $('<div>');
var $div2 = $('<div>這是一個div元素</div>');

插入節點  1、append()和appendTo()：在現存元素的內部，從後面插入元素

var $span = $('<span>這是一個span元素</span>');
$('#div1').append($span);
......
<div id="div1"></div>

2、prepend()和prependTo()：在現存元素的內部，從前面插入元素

3、after()和insertAfter()：在現存元素的外部，從後面插入元素

4、before()和insertBefore()：在現存元素的外部，從前面插入元素

刪除節點

$('#div1').remove();

todolist(計劃列表)例項

滾輪事件與函式節流

jquery.mousewheel外掛使用  jquery中沒有滑鼠滾輪事件，原生js中的滑鼠滾輪事件不相容，可以使用jquery的滾輪事件外掛jquery.mousewheel.js。

函式節流  javascript中有些事件的觸發頻率非常高，比如onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面說的滑鼠滾輪事件，在短事件內多處觸發執行繫結的函式，可以巧妙地使用定時器來減少觸發的次數，實現函式節流。

整屏滾動例項

例項

1、無縫滾動

2、幻燈片

3、彈框

4、todolist

5、整屏滾動

json

json是 JavaScript Object Notation 的首字母縮寫，單詞的意思是javascript物件表示法，這裡說的json指的是類似於javascript物件的一種資料格式，目前這種資料格式比較流行，逐漸替換掉了傳統的xml資料格式。

javascript物件字面量：

var tom = {
    name:'tom',
    age:18
}

json格式的資料：

{
    "name":'tom',
    "age":18
}

與json物件不同的是，json資料格式的屬性名稱需要用雙引號引起來，用單引號或者不用引號會導致讀取資料錯誤。

json的另外一個數據格式是陣列，和javascript中的陣列字面量相同。

['tom',18,'programmer']

ajax與jsonp

ajax技術的目的是讓javascript傳送http請求，與後臺通訊，獲取資料和資訊。ajax技術的原理是例項化xmlhttp物件，使用此物件與後臺通訊。ajax通訊的過程不會影響後續javascript的執行，從而實現非同步。

同步和非同步  現實生活中，同步指的是同時做幾件事情，非同步指的是做完一件事後再做另外一件事，程式中的同步和非同步是把現實生活中的概念對調，也就是程式中的非同步指的是現實生活中的同步，程式中的同步指的是現實生活中的非同步。

區域性重新整理和無重新整理  ajax可以實現區域性重新整理，也叫做無重新整理，無重新整理指的是整個頁面不重新整理，只是區域性重新整理，ajax可以自己傳送http請求，不用通過瀏覽器的位址列，所以頁面整體不會重新整理，ajax獲取到後臺資料，更新頁面顯示資料的部分，就做到了頁面區域性重新整理。

同源策略  ajax請求的頁面或資源只能是同一個域下面的資源，不能是其他域的資源，這是在設計ajax時基於安全的考慮。特徵報錯提示：

XMLHttpRequest cannot load https://www.baidu.com/. No  
'Access-Control-Allow-Origin' header is present on the requested resource.  
Origin 'null' is therefore not allowed access.

$.ajax使用方法  常用引數： 1、url 請求地址 2、type 請求方式，預設是'GET'，常用的還有'POST' 3、dataType 設定返回的資料格式，常用的是'json'格式，也可以設定為'html' 4、data 設定傳送給伺服器的資料 5、success 設定請求成功後的回撥函式 6、error 設定請求失敗後的回撥函式 7、async 設定是否非同步，預設值是'true'，表示非同步

以前的寫法：

$.ajax({
    url: 'js/user.json',
    type: 'GET',
    dataType: 'json',
    data:{'aa':1}
    success:function(data){
        ......
    },
    error:function(){
        alert('伺服器超時，請重試！');
    }
});

新的寫法(推薦)：

$.ajax({
    url: 'js/user.json',
    type: 'GET',
    dataType: 'json',
    data:{'aa':1}
})
.done(function(data) {
    ......
})
.fail(function() {
    alert('伺服器超時，請重試！');
});

jsonp  ajax只能請求同一個域下的資料或資源，有時候需要跨域請求資料，就需要用到jsonp技術，jsonp可以跨域請求資料，它的原理主要是利用了script標籤可以跨域連結資源的特性。

jsonp的原理如下：

<script type="text/javascript">
    function aa(dat){
        alert(dat.name);
    }
</script>
<script type="text/javascript" src="....../js/data.js"></script>

頁面上定義一個函式，引用一個外部js檔案，外部js檔案的地址可以是不同域的地址，外部js檔案的內容如下：

aa({"name":"tom","age":18});

外部js檔案呼叫頁面上定義的函式，通過引數把資料傳進去。

正則表示式

1、什麼是正則表示式：  能讓計算機讀懂的字串匹配規則。

2、正則表示式的寫法： var re=new RegExp('規則', '可選引數'); var re=/規則/引數;

3、規則中的字元  1）普通字元匹配： 如：/a/ 匹配字元 ‘a’，/a,b/ 匹配字元 ‘a,b’

2）轉義字元匹配： \d 匹配一個數字，即0-9 \D 匹配一個非數字，即除了0-9 \w 匹配一個單詞字元（字母、數字、下劃線） \W 匹配任何非單詞字元。等價於[^A-Za-z0-9_] \s 匹配一個空白符 \S 匹配一個非空白符 \b 匹配單詞邊界 \B 匹配非單詞邊界 . 匹配一個任意字元，除了換行符‘\n’和回車符‘\r’ \1 重複子項

4、量詞：對左邊的匹配字元定義個數  ? 出現零次或一次（最多出現一次） + 出現一次或多次（至少出現一次） * 出現零次或多次（任意次） {n} 出現n次 {n,m} 出現n到m次 {n,} 至少出現n次

5、任意一個或者範圍  [abc123] : 匹配‘abc123’中的任意一個字元 [a-z0-9] : 匹配a到z或者0到9中的任意一個字元

6、限制開頭結尾  ^ 以緊挨的元素開頭 $ 以緊挨的元素結尾

7、修飾引數： g： global，全文搜尋，預設搜尋到第一個結果接停止 i： ingore case，忽略大小寫，預設大小寫敏感 m： multiple lines，多行搜尋（更改^ 和$的含義，使它們分別在任意一行對待行首和行尾匹配，而不僅僅在整個字串的開頭和結尾匹配）

8、常用函式  1、test 用法：正則.test(字串) 匹配成功，就返回真，否則就返回假

2、search 用法：字串.search(正則) 匹配成功，返回位置，否則返回-1

3、match 用法： 字串.match(正則)；匹配成功，就返回匹配成功的陣列，否則就返回null

4、replace 用法：字串.replace(正則，新的字串) 匹配成功的字元去替換新的字元

正則預設規則  匹配成功就結束，不會繼續匹配，區分大小寫

本地儲存

本地儲存分為cookie，以及新增的localStorage和sessionStorage

1、cookie 儲存在本地，容量最大4k，在同源的http請求時攜帶傳遞，損耗頻寬，可設定訪問路徑，只有此路徑及此路徑的子路徑才能訪問此cookie，在設定的過期時間之前有效。

jquery 設定cookie
$.cookie('mycookie','123',{expires:7,path:'/'});
jquery 獲取cookie
$.cookie('mycookie');

2、localStorage 儲存在本地，容量為5M或者更大，不會在請求時候攜帶傳遞，在所有同源視窗中共享，資料一直有效，除非人為刪除，可作為長期資料。

//設定：
localStorage.setItem("dat", "456");
localStorage.dat = '456';

//獲取：
localStorage.getItem("dat");
localStorage.dat

//刪除
localStorage.removeItem("dat");

3、sessionStorage 儲存在本地，容量為5M或者更大，不會在請求時候攜帶傳遞，在同源的當前視窗關閉前有效。

localStorage 和 sessionStorage 合稱為Web Storage , Web Storage支援事件通知機制，可以將資料更新的通知監聽者，Web Storage的api介面使用更方便。

iPhone的無痕瀏覽不支援Web Storage，只能用cookie。

jqueryUI

jQuery UI是以 jQuery 為基礎的程式碼庫。包含底層使用者互動、動畫、特效和可更換主題的可視控制元件。我們可以直接用它來構建具有很好互動性的web應用程式。

常用jqueryUI外掛：

Draggable  1、設定數值的滑動條 2、自定義滾動條

例項

1、ajax資料載入

2、表單驗證

3、滑動條

4、自定義滾動條