前端之jquery函式庫

skysparrow發表於2018-06-08
前端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（寫得少，做得多）

1、http://jquery.com/ 官方網站
2、https://code.jquery.com/ 版本下載

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屬性判斷是否選擇成功。

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

對選擇集進行過濾

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

選擇集轉移

$(`#box`).prev(); //選擇id是box的元素前面緊挨的同輩元素
$(`#box`).prevAll(); //選擇id是box的元素之前所有的同輩元素
$(`#box`).next(); //選擇id是box的元素後面緊挨的同輩元素
$(`#box`).nextAll(); //選擇id是box的元素後面所有的同輩元素
$(`#box`).parent(); //選擇id是box的元素的父元素
$(`#box`).children(); //選擇id是box的元素的所有子元素
$(`#box`).siblings(); //選擇id是box的元素的同級元素
$(`#box`).find(`.myClass`); //選擇id是box的元素內的class等於myClass的元素

判斷是否選擇到了元素 

　　jquery有容錯機制，即使沒有找到元素，也不會出錯，可以用length屬性來判斷是否找到了元素,length等於0，就是沒選擇到元素，length大於0，就是選擇到了元素。

var $div1 = $(`#div1`);
var $div2 = $(`#div2`);
alert($div1.length); // 彈出1
alert($div2.length); // 彈出0
......
<div id="div1">這是一個div</div>

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樣式　

繫結click事件

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

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

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

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

})

獲取元素的索引值 

有時候需要獲得匹配元素相對於其同胞元素的索引位置，此時可以用index()方法獲取

var $li = $(`.list li`).eq(1);
alert($li.index()); // 彈出1
......
<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

jquery動畫

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

/*
    animate引數：
    引數一：要改變的樣式屬性值，寫成字典的形式
    引數二：動畫持續的時間，單位為毫秒，一般不寫單位
    引數三：動畫曲線，預設為‘swing’，緩衝運動，還可以設定為‘linear’，勻速運動
    引數四：動畫回撥函式，動畫完成後執行的匿名函式

*/

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

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屬性操作

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

// 取出html內容

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

// 設定html內容

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

2、prop() 取出或設定某個屬性的值

// 取出圖片的地址

var $src = $(`#img1`).prop(`src`);

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

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

jquery迴圈

　　對jquery選擇的物件集合分別進行操作，需要用到jquery迴圈操作，此時可以用物件上的each方法：

$(function(){
    $(`.list li`).each(function(){
        $(this).html( $(this).index() );
    })
})
......
<ul class="list">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

jquery事件

事件函式列表：

blur() 元素失去焦點
focus() 元素獲得焦點
click() 滑鼠單擊
mouseover() 滑鼠進入（進入子元素也觸發）
mouseout() 滑鼠離開（離開子元素也觸發）
mouseenter() 滑鼠進入（進入子元素不觸發）
mouseleave() 滑鼠離開（離開子元素不觸發）
hover() 同時為mouseenter和mouseleave事件指定處理函式
ready() DOM載入完成
submit() 使用者遞交表單

表單驗證

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 匹配非單詞邊界
. 匹配一個任意字元

var sTr01 = `123456asdf`;
var re01 = /d+/;
//匹配純數字字串
var re02 = /^d+$/;
alert(re01.test(sTr01)); //彈出true
alert(re02.test(sTr01)); //彈出false

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，忽略大小寫，預設大小寫敏感

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

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

常用正則規則

//使用者名稱驗證：(數字字母或下劃線6到20位)
var reUser = /^w{6,20}$/;

//郵箱驗證：        
var reMail = /^[a-z0-9][w.-]*@[a-z0-9-]+(.[a-z]{2,5}){1,2}$/i;

//密碼驗證：
var rePass = /^[w!@#$%^&*]{6,20}$/;

//手機號碼驗證：
var rePhone = /^1[34578]d{9}$/;　

事件冒泡

什麼是事件冒泡 

在一個物件上觸發某類事件（比如單擊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>

阻止預設行為 

阻止表單提交

$(`#form1`).submit(function(event){
    event.preventDefault();
})

合併阻止操作

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

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

// 合併寫法：
return false;　　

事件委託

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

一般繫結事件的寫法

$(function(){
    $ali = $(`#list li`);
    $ali.click(function() {
        $(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() {
        $(this).css({background:`red`});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

Dom操作

元素節點操作指的是改變html的標籤結構，它有兩種情況：
1、移動現有標籤的位置
2、將新建立的標籤插入到現有的標籤中

建立新標籤

var $div = $(`<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();

javascript物件

　　javascript中的物件，可以理解成是一個鍵值對的集合，鍵是呼叫每個值的名稱，值可以是基本變數，還可以是函式和物件。

建立javascript物件有兩種方法，一種是通過頂級Object類來例項化一個物件，然後在物件上面新增屬性和方法：

var person = new Object();

// 新增屬性：
person.name = `tom`;
person.age = `25`;

// 新增方法：
person.sayName = function(){
    alert(this.name);
}

// 呼叫屬性和方法：
alert(person.age);
person.sayName();

還可以通過物件直接量的方式建立物件：

var person2 = {
    name:`Rose`,
    age: 18,
    sayName:function(){
        alert(`My name is` + this.name);
    }
}

// 呼叫屬性和方法：
alert(person2.age);
person2.sayName();

json

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

json資料物件類似於JavaScript中的物件，但是它的鍵對應的值裡面是沒有函式方法的，值可以是普通變數，不支援undefined，值還可以是陣列或者json物件。

與JavaScript物件寫法不同的是，json物件的屬性名稱和字串值需要用雙引號引起來，用單引號或者不用引號會導致讀取資料錯誤。

json格式的資料：

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

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

["tom",18,"programmer"]

　　還可以是更復雜的資料機構：

{
    "name":"jack",
    "age":29,
    "hobby":["reading","travel","photography"]
    "school":{
        "name":"Merrimack College",
        "location":`North Andover, MA`
    }
}

ajax與jsonp

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

同步和非同步

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

區域性重新整理和無重新整理

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

資料介面

　　資料介面是後臺程式提供的，它是一個url地址，訪問這個地址，會對資料進行增、刪、改、查的操作，最終會返回json格式的資料或者操作資訊，格式也可以是text、xml等。

$.ajax使用方法

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

以前的寫法：

$.ajax({
    url: `/change_data`,
    type: `GET`,
    dataType: `json`,
    data:{`code`:300268}
    success:function(dat){
        alert(dat.name);
    },
    error:function(){
        alert(`伺服器超時，請重試！`);
    }
});

新的寫法(推薦)：

$.ajax({
    url: `/change_data`,
    type: `GET`,
    dataType: `json`,
    data:{`code`:300268}
})
.done(function(dat) {
    alert(dat.name);
})
.fail(function() {
    alert(`伺服器超時，請重試！`);
});

$.ajax的簡寫方式

　　$.ajax按照請求方式可以簡寫成$.get或者$.post方式

$.get("/change_data", {`code`:300268},
  function(dat){
    alert(dat.name);
});

$.post("/change_data", {`code`:300268},
  function(dat){
    alert(dat.name);
});

同源策略

　　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.

jsonp

　　ajax只能請求同一個域下的資料或資源，有時候需要跨域請求資料，就需要用到jsonp技術，jsonp可以跨域請求資料，它的原理主要是利用了<script>標籤可以跨域連結資源的特性。jsonp和ajax原理完全不一樣，不過jquery將它們封裝成同一個函式。

獲取360搜尋關鍵詞聯想資料

$(function(){
    $(`#txt01`).keyup(function(){
        var sVal = $(this).val();
        $.ajax({
            url:`https://sug.so.360.cn/suggest?`,
            type:`get`,
            dataType:`jsonp`,
            data: {word: sVal}
        })
        .done(function(data){
            var aData = data.s;
            $(`.list`).empty();
            for(var i=0;i<aData.length;i++)
            {
                var $li = $(`<li>`+ aData[i] +`</li>`);
                $li.appendTo($(`.list`));
            }
        })        
    })
})

//......

<input type="text" name="" id="txt01">
<ul class="list"></ul>

一般ajax資料介面和jsonp資料介面的區別

　　開發返回資料的介面，如果是一般的ajax介面，讓介面直接返回json格式的資料字串就可以了，這種介面的資料是不能跨域請求的，如果要跨域請求資料，需要開發jsonp的介面，開發jsonp的介面，需要獲取請求地址中的引數，也就是`callback`鍵對應的值，然後將這個值和json資料拼裝成一個函式呼叫的形式的字串返回，就完成了一個jsonp的介面，這個鍵值對是由$.ajax函式自動產生的。比如：`callback`鍵對應的值一般是這樣的：jQuery1124018787969015631711_1522330257607，所以：

  • 一般介面返回的資料形式：`{“iNum”:12,`sTr`:`abc`}`;
  • jsonp返回的資料形式：`jQuery1124018787969015631711_1522330257607({“iNum”:12,”sTr”:”abc”})`;

 

                                                                   ——-  知識無價，汗水有情，如需搬運請註明出處，謝謝！


相關文章