對於jQuery的初步印象

時間 2019-12-14

原文原文鏈接

主要是闡述一些對jQuery的初步印象！javascript

What? 什麼是jQuery?

-- 引用自百度百科css

「jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype以後又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計宗旨是「write Less, Do More」，即倡導寫更少的代碼，作更多的事情。它封裝JavaScript經常使用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操做、事件處理、動畫設計和Ajax交互。html

jQuery的核心特性能夠總結爲：具備獨特的鏈式語法和短小清晰的多功能接口；具備高效靈活的css選擇器，而且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。jQuery兼容各類主流瀏覽器，如IE 6.0+、FF 1.5+、 Safari 2.0+、 Opera 9.0+等。"java

更多詳細介紹請點擊
百度百科-jQuery連接jquery

Why? 爲何要用jQuery?

原生的DOM APIajax

難用
存在各類兼容性問題
功能太少，不能與時俱進

jQuery設計模式

輕量級
簡潔優雅，減小代碼量，寫得少，作得多，鏈式調用
兼容性好，
API友好，符合人類直覺
功能強大，與時俱進

youmightnotneedjquery 數組

這個網站可視化的展現了jQuery的優點瀏覽器

When? 何時用jQuery?

DOM操做較多（事件監聽）
簡單的AJAX
須要兼容多款瀏覽器

何時不用jQuery?app

頁面交互極爲簡單
頁面對流量有苛刻的要求
團隊已經有了jQuery的替代品

能用jQuery作什麼？

Selectors, 方便快捷地選擇DOM元素

使用原生JavaScript的方式來遍歷DOM以及查找DOM的某個部分編寫不少冗餘的代碼。jQuery的核心就是經過CSS選擇符查詢DOM文檔取得元素的引用，從而拋開了getElementById、getElementsByTagName，getElementsByClassName等等。

$('div.content')
//找到全部應用.content clss樣式的div中全部的p標籤
//簡潔優雅

//固然javaScript的Selectors API也很強大，也支持經過CSS選擇符查詢DOM文檔得到元素的引用。可是也要考慮到瀏覽器的兼容，這也就是jQuery的優點。
//document.querySelecor('div.content')

Traversing, DOM遍歷
提供各類強大的過濾器對結果進行篩選，縮小選擇結果。

遍歷封裝的相關方法 .eq(), .first(), .last(), .find(), .has(), .next(), .parent(), .parents()。
Manipulation， DOM元素的操做
建立複製增長刪除元素封裝的相關方法：例如 $('htmlElemtn'),.add(), .remove()，.empty(), .clone()。

樣式封裝的相關方法: .addClass(), removeClass(), toggleClass(), hasClass()等等。

屬性封裝的相關方法: .attr(), removeAttr()等等。

位置封裝的相關方法: .before(), .after(), insertBefore(), insertAfter(), .append(), .appendTo(), prepend(), prependTo()等等。

元素取值賦值封裝的相關方法：.text(), html()。
Utilities，實用程序(工具方法)
例如： jQuery.each(), jQuery.isArray(), jQuery.trim()等等
Events, 事件操做
事件封裝的相關方法: .on(), .off(), .load(), .bind(), .blur()等等
Effects, 特殊效果
特殊效果封裝的相關方法： .animate(), .fadeIn(), .fadeOut(), .slideUp(), .slideDown(), .slideToggle()等等
AJAX
Ajax封裝的相關方法： jQuery.get(), jQuery.post(), .ajaxStart(), .ajaxSend(), .ajaxSuccss(), .load(), jQuery.getJSON(), jQuery.getScript() 等等

jQuery官方文檔

Difference?

jQuery對象和DOM原生對象有什麼區別？如何轉化？

jQuery選擇器獲得jQuery對象和原生JavaScript中的選擇符獲得的DOM對象是不一樣類型的，不等價。

jQuery沒法使用原生DOM對象的任何方法，同理Dom對象也不能使用jQuery裏的方法。

<div class="content">
        <p>1</p>
        <p>2</p>
        <p>3</p>
</div>

<script>
    var $aDiv = $('div').find('p');
    var aDiv = document.querySelectorAll('div p');
    var bDiv = document.getElementsByTagName('p'); 

    console.log($aDiv); // prevObject: jQuery.fn.init(3) 

    console.log(aDiv);  // _proto_: NodeList(3) 

    console.log(bDiv); //  _proto_: HTMLCollection(3)

    //三者獲得的對象都是不一樣的 
    //$aDiv === aDiv false 
    //$aDiv === bDiv false 
    //aDiv === bDiv false 

    //經過[index]中括號語法能夠在二者之間進行轉化。 
    //$aDiv[0] === aDiv[0]  true 
    //$aDiv[0] === bDiv[0]  true
    //aDiv[0] === bDiv[0]   true

</script>

從以上代碼能夠看出

$aDiv = $('div').find('p') 是jQuery特有的對象 prevObject: jQuery.fn.init(3)。

aDiv = document.querySelectorAll('div p')的原型是NodeList。

bDiv = document.getElementsByTagName('p')的原型是HTMLCollection。

三者之間都不等價。

jQuery中有一個包裝集概念，包裝集就是用僞數組實現的。

var $objArr = {
        0: '<p>1</p>',
        1: '<p>2</p>',
        2: '<p>3</p>',
        length: 3
    }

    for(var i = 0; i < $objArr.length; i++) {
        console.log($objArr[i])
    }
    // <p>1</p> , <p>2</p>, <p>3</p>

以上代碼以對象字面量的形式定義了一個對象$objArr,經過這個對象模擬數組，即僞數組對象。JavaScript中獲取一個對象的屬性值，可使用obj.propery 或者 obj['property']，對象中的property屬性以數字開頭的時候，用中括號obj['propery']獲取值的時候能夠不加引號，即obj[property]。在上面的例子中就是，$objArr[1]，$objArr[2]， $objArr[3]。

是否是很熟悉？

jQuery對象轉化爲原生DOM對象的其中一種方式就是：$jQueryObj[index]。

因此

//經過[index]中括號語法能夠在二者之間進行轉化。 
    //$aDiv[0] === aDiv[0]  true 
    //$aDiv[0] === bDiv[0]  true
    //aDiv[0] === bDiv[0]   true

有了上面的瞭解，原生DOM對象轉jQuery對象理解起來就簡單多了，$(原生DOM對象)的方法，將原生DOM對象轉化爲jQuery對象。 $是一個方法，調用該方法，將原生DOM對象做爲參數傳入，$方法內部對原生DOM對象作進一步的加工，使其成爲一個包裝集，即僞數組對象。

jQuery如何綁定事件？

jQuery有不少綁定事件的方法。

.bind( eventType [, eventData ], handler ), bind(捆綁) 爲每一個匹配元素的特定事件綁定事件處理函數。As of jQuery 3.0, .bind() has been deprecated. jQuery官方文檔指出3.0版本中該方法已棄用。
.unbind( eventType [, handler ] )，unbind(解開)，bind(捆綁)的反向操做，從每個匹配的元素中刪除綁定的事件。As of jQuery 3.0, .unbind() has been deprecated. jQuery官方文檔指出3.0版本中該方法已棄用。
.delegate( selector, eventType, handler ), delegate(委派) 爲指定的元素（屬於被選元素的子元素）添加一個或多個事件處理程序，並規定當這些事件發生時運行的函數。使用 delegate() 方法的事件處理程序適用於當前或將來的元素（好比由腳本建立的新元素）。jQuery官方文檔指出3.0版本中該方法已棄用。
.live( events, handler )， jQuery 給全部匹配的元素附加一個事件處理函數，即便這個元素是之後再添加進來的也有效。這個方法是基本是的 .bind() 方法的一個變體。使用 .bind() 時，選擇器匹配的元素會附加一個事件處理函數，而之後再添加的元素則不會有。jQuery官方文檔指出1.7版本中該方法已棄用。
.on( events [, selector ] [, data ], handler )，在選定的元素上綁定一個或者多個事件處理函數（Attach an event handler function for one or more events to the selected elements.）
.off( events [, selector ] [, handler ] )，在選擇元素上移除一個或多個事件的事件處理函數。

推薦使用on 或off綁定或者移除事件處理函數，能夠對元素動態綁定，運行速度快，效率高。

$('div').on('click', 'p', (event) => {
    console.lg($(this));
})

jQuery的一些經常使用API

jQuery展現/隱藏元素

show([speed,[easing],[fn]]) 顯示隱藏的匹配元素。
這個就是 'show( speed, [callback] )' 無動畫的版本。若是選擇的元素是可見的，這個方法將不會改變任何東西。不管這個元素是經過hide()方法隱藏的仍是在CSS裏設置了display:none;，這個方法都將有效。

speed: 三種預約速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)

easing: (Optional) 用來指定切換效果，默認是"swing"，可用參數"linear"

fn:在動畫完成時執行的函數，每一個元素執行一次。
hide([speed,[easing],[fn]])
隱藏顯示的元素。
這個就是 'hide( speed, [callback] )' 的無動畫版。若是選擇的元素是隱藏的，這個方法將不會改變任何東西。

speed:三種預約速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)

easing:(Optional) 用來指定切換效果，默認是"swing"，可用參數"linear"

fn:在動畫完成時執行的函數，每一個元素執行一次。

<div class="content">
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </div>
    <script>
    var $divP = $('.content').find('p');
    $divP.hide(5000, 'linear', () => {
        alert('Hiden Done!');
    });

    $divP.show(5000, 'linear', () => {
        alert('Show Done!!');
    });

    </script>

jQuery的動畫

animate(params,[speed],[easing],[fn])，用於建立自定義動畫的函數。

這個函數的關鍵在於指定動畫形式及結果樣式屬性對象。這個對象中每一個屬性都表示一個能夠變化的樣式屬性，如height、top、opacity。注意：全部指定的屬性必須用駝峯命名的形式，如：marginLeft 代替 margin-left。

而每一個屬性的值表示這個樣式屬性到多少動畫結束，若是是一個數值，樣式屬性就會從當前的值漸變到指定的值。若是使用的是「hide"、「show」、「toggle」這樣字符竄值，則會爲屬性調用默認的動畫形式。

params:一組包含做爲動畫屬性和終值的樣式屬性和及其值的集合

speed:三種預約速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)

easing:要使用的擦除效果的名稱(須要插件支持).默認jQuery提供"linear" 和 "swing".

fn:在動畫完成時執行的函數，每一個元素執行一次。

.delay()設置一個定時器，以延遲執行隊列中後續的項目。

.clearQueue()從隊列中刪除全部尚未運行過的項目。

.stop()在匹配的元素上中止當前正在運行的動畫。

.finish()針對匹配的元素中止當前正在運行的動畫，刪除全部隊列中的動畫，並結束全部動畫

<button id="go">Run</button>
    <div id="block">Hello!</div>

    <script>
    $('#go').on('click', (event) => {
        $('#block').animate( {
            width: "90%",
            height: "100%",
            fontSize: "10em",
            borderWidth: 10
        }, 5000 )
    });
    </script>

jQuery設置和獲取元素內部HTML內容，設置和獲取元素內部文本。

.html([val|fn]), 在一個 HTML 文檔中, 咱們可使用 .html() 方法來獲取任意一個元素的內容。
無參數，返回第一個匹配元素內容。

參數 val，設置全部匹配元素的內容。

參數回調函數fn，設置全部匹配元素的內容。

<p>hello</p>
    <p>how are you?</p>


    <script>

        console.log($('p').html()); //hello

        $('p').html('Hello<b>World</b>!');
        //HelloWorld!

        $('p').html((n) => {
            console.log('這個p元素的index是:' + n);
        });
        //這個p元素的index是:0, 這個p元素的index是:1

    </script>

text([val|fn])，取得全部匹配元素的內容。
結果是由全部匹配元素包含的文本內容組合起來的文本。

無參數，返回元素的文本內容。

參數val，設置全部匹配元素的文本內容。

回調函數fn，使用函數來設置全部匹配元素的文本內容。

<p>hello </p>
    <p>how are you?</p>

    <script>
        console.log($('p').text()); //hello how are you?
        
        $('p').text('Hello World!!');// <p>Hello World!!</p> , <p>Hello World!!</p>

        $('p').text((n) => {
            console.log('the index of this p element is ' + n);
        }); //the index of this p element is 0, the index of this p element is 1
    
    </script>

jQuery 設置和獲取表單用戶輸入或者選擇的內容，以及設置和獲取元素屬性。

val([val|fn|arr])，得到匹配元素的當前值。
在jQuery1.2中，能夠返回任意元素的值。包括select。若是多選，將返回一個數組，其包含所選的值。

無參數，獲取文本框中的值。
參數val，設定文本框的值。
回調參數fn, 設定文本框的值。
參數array, 設定一個select和一個多選的select的值。

<div>
        輸入框 <input type="text" value ="hello" placeholder="hello">
    </div>

    <script type="text/javascript">
        console.log($('div > input').val());//hello

        $('div > input').val('hello world');

        console.log($('div > input').val());//hello world
        
        $('div > input').val(() => {
            return 'how are you?'
        }) //how are you?
        
    </script>

<p></p>
    <select id="single">
        <option>Single</option>
        <option>Single2</option>
    </select>

    <select id="multiple" multiple="multiple">
        <option selected="selected">Multiple</option>
        <option>Multiple2</option>
        <option selected="selected">Multiple3</option>
    </select>

    <script>
    
    function displayVals() {
        var singleValues = $('#single').val(); // Single
        var multipleValues = $('#multiple').val() || []; // ["Multiple","Multiple3"]
        $('p').html('<b>Single:</b> ' + singleValues + ' <b>Multiple:</b> ' + multipleValues.join(','));

    }
    displayVals(); //<p><b>Single:</b> Single <b>Multiple:</b> Multiple,Multiple3</p>
    
    </script>

attr(name|properties|key,value|fn), 設置或返回被選元素的屬性值。
參數name：返回元素的屬性值。

參數properties：可爲元素設置多個屬性及屬性值。

參數key，value：爲元素設置屬性和值。

參數key，回調函數：爲元素屬性設置屬性和值。

<img src="./01.png" alt="Sunny">

    <script>
        var $img = $('img');
        console.log($img.attr('src')); // ./01.png
        
        var setImage = $img.attr({
            src: './test.jpg', alt: 'test Image'
        }) // <img src="./test.jpg" alt="test Image">


        var setImageSrc = $img.attr('src', './test1.jpg');
        //<img src="./test1.jpg" alt="test Image">
        
        $img.attr('title', () => {
            return 'this is a photo!'
        }); //<img src="./test1.jpg" alt="test Image" title="this is a photo!">

    </script>