技術標籤：1秒消失 alert jquery

就像jQuery的標語一樣,write less, do more,jQuery做到使開發者寫的程式碼更加簡潔,卻能實現更多複雜的效果.學習jQuery是非常有必要的,至今他仍是業界最通用的技術,且他將為我們今後學習更加高階的庫打下基礎.

本文參考了阮一峰大大的部落格:

文章主要講解了一下幾點:

1. jQuery 如何獲取元素
2. jQuery 的鏈式操作是怎樣的
3. jQuery 如何建立元素
4. jQuery 如何移動元素
5. jQuery 如何修改元素的屬性

一、獲取元素

jQuery的設計思想和主要方法就是選擇網頁中的元素,並可以對其進行一系列可連續的操作.相較於JavaScript而言,不需要反覆重複選取元素的操作.

將一個選擇表示式放進建構函式jQuery() [簡寫為$()] 中,即可得到被選中的元素.

$(document) //標籤選擇器
$('#id') //id選擇器
$('div.class') //class選擇器
$('input[name=first]') //屬性選擇器

或jQuery的表示式

$('div:first') //選擇網頁中第一個div元素
$('tr:odd') //選擇表格中的奇數行
$('#form:input') //選擇表單中的input
$('div:visible') //選擇網頁中可見的div
$('div:gt(2)') //選擇所有的div除了前三個
$('div:animate') //選擇處於動畫狀態的div
 

同時還可以在選擇完的元素的基礎上使用jQuery的api再次進行篩選,在結果集中再次進行選擇.這也是jQuery的設計思想之二.

$('div').has('p') //選擇包含p的div
$('div').not('.myClass') //選擇class不等於myClass的div
$('div').filter('.myClass') //選擇類名為myClass的div
$('div').first() //選擇第一個div
$('div').eq(5) //選擇第6個div
$('div').next('p') //選擇div後面的第一個p
$('div').parent() //選擇div的父元素
$('div').closest('form') //離div最近的form父元素
$('div').children() //選擇div的所有子元素
$('div').siblings() //選擇div所有的兄弟元素
 

二、鏈式操作

jQuery的設計思想之三就是鏈式操作,我們可以在選中網頁中的元素之後對其進行一系列操作,並且所有的操作是可以連結在一起的,以鏈條的形式寫出來,比如:

$('div').find('h3').eq(2).html('hello') //選擇div中的第3個h3元素並將h3標籤的內容改為hello

拆解開來即為:

$('div') //找到div元素

　　　.find('h3') //選擇其中的h3元素

　　　.eq(2) //選擇第3個h3元素

　　　.html('Hello'); //將它的內容改為Hello

鏈式操作是怎樣實現的呢?

其實jQuery(選擇器)用於獲取對應的元素,但是他卻不返回這些元素,相反,他返回一個物件,稱為jQuery構造出來的物件,這個物件可以操作對應的元素.

window.$ = window.jQuery = function (selectorOrArrayOrTemplate) {
    let elements;
    if (typeof selectorOrArrayOrTemplate === "string") {
        if (selectorOrArrayOrTemplate[0] === '<') {
            //建立<></>標籤
            elements = [createElement(selectorOrArrayOrTemplate)]
        } else {
            elements = document.querySelectorAll(selectorOrArrayOrTemplate)
        }
    } else if (selectorOrArrayOrTemplate instanceof Array) {
        elements = selectorOrArrayOrTemplate
    }

    function createElement(string) {
        //建立<></>標籤
        const container = document.createElement("template")
        container.innerHTML = string.trim()
        return container.content.firstChild;
    }
    //建立api物件,api物件的__proto__為jQuery.prototype
    //api可以操作elements
    const api = Object.create(jQuery.prototype)
    Object.assign(api,{
        elements:elements,
        
    })
    return api //使之成為鏈式操作
}

//可操作elements的方法都定義在jQuery.prototype上
jQuery.fn = jQuery.prototype = {
    constructor: jQuery,
    get(){},
    append(){},
    find(){},
    parent(){},
    ...
}

三、建立元素

使用js建立元素:

var nodeP = document.createElement('p');
nodeP.innerText = "hello";

使用jQuery建立元素:

$('<p>hello</p>')

對比可見,是不是使用jQuery建立簡單很多. 給元素新增屬性也十分簡單:

$('<li class="new">new list item</li>');

jQuery還有集中操作元素的重要方法:

• 複製元素: .clone()
• 刪除元素: .remove() 不保留被刪除元素的事件
• .detach() 保留被刪除元素的事件,有利於重新插入文件時使用
• 清空元素內容: .empty()

四、移動元素

jQuery設計思想之四,提供兩組方法,操作元素在網頁中的位置移動.一組方法時直接移動該元素,零一組方法時移動其他元素,使得目標元素達到我們想要的位置.

例如: 我們選中一個div元素,需要把它移動到p元素之後

//方法一
$('div').insertAfter($('p'));

//方法二
$('p').after($('div'));

他們的區別是方法一返回的元素是div, 而方法二返回的元素是p,我們根據自己的需要來決定使用哪一種方法.

這種模式的操作方法有四對:

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

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

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

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

五、修改元素的屬性

jQuery的設計思想之五,使用同一個函式來完成取值(getter)和賦值(setter),到底是取值還是賦值通過傳入函式的引數來決定.

$('h1').html();  //html()沒有引數,取出h1的值
$('h1').html('hello') //html()有引數hello,對h1進行賦值

常見的取值和賦值函式有:

.html() 取出或設定html內容

.text() 取出或設定text內容

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

.width() 取出或設定某個元素的寬度

.height() 取出或設定某個元素的高度

.val() 取出某個表單元素的值

需要注意的是，如果結果集包含多個元素，那麼賦值的時候，將對其中所有的元素賦值；取值的時候，則是隻取出第一個元素的值（.text()例外，它取出第一個元素的所有元素的text內容）。

除此之外:

jQuery設計思想之六：除了對選中的元素進行操作以外，還提供一些與元素無關的工具方法。不必選中元素，就可以直接使用這些方法。

常用的工具方法有以下幾種：

$.trim() 去除字串兩端的空格。 $.each() 遍歷一個數組或物件。 $.inArray() 返回一個值在陣列中的索引位置。如果該值不在陣列中，則返回-1。 $.grep() 返回陣列中符合某種標準的元素。 $.extend() 將多個物件，合併到第一個物件。 $.makeArray() 將物件轉化為陣列。 $.type() 判斷物件的類別（函式物件、日期物件、陣列物件、正則物件等等）。 $.isArray() 判斷某個引數是否為陣列。 $.isEmptyObject() 判斷某個物件是否為空（不含有任何屬性）。 $.isFunction() 判斷某個引數是否為函式。 $.isPlainObject() 判斷某個引數是否為用"{}"或"new Object"建立的物件。 $.support() 判斷瀏覽器是否支援某個特性。

jQuery設計思想之七，事件操作,就是把事件直接繫結在網頁元素之上。

　　$('p').click(function(){
　　　　alert('Hello');
　　});

目前，jQuery主要支援以下事件：

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

使用.bind()可以更靈活地控制事件，比如為多個事件繫結同一個函式：

$('input').bind(
　　　　'click change', //同時繫結click和change事件
　　　　function() {
　　　　　　alert('Hello');
　　　　}
　　);

只想讓事件執行一次，這時可以使用.one()方法。

$("p").one("click", function() {
　　　　alert("Hello"); //只執行一次，以後的點選不會執行
　　});