前端——jQuery

標籤：座標   匿名   動態添加   put   迴圈   one   項目   這一   使用   

初識jQuery什麼是jQuery？

jQuery就是JavaScript和Query，是輔助JavaScript開發的庫，應用廣泛，形成了行業標準。它對DOM操作做了很好的封裝，我們可以用jQuery非常方便地來代替DOM操作。

為什麼要使用jQuery？

輕量級，最新版本的大小隻有85KB；功能強大的選取器；出色的DOM封裝；相容性好（可以在不同瀏覽器使用）；可靠的事件處理機制；完善的Ajax支援；豐富的外掛程式支援。

jQuery的理念是：寫得少,做得多(write less,do more)。

如何使用jQuery？

官網去jQuery官網下載最新的jQuery，放在專案檔夾內，在html檔案中JS代碼上方加入 <script src="jquery-3.3.1.js"></script> 即可。

jQuery對象與DOM對象的相互轉化1. jQuery對象轉化成DOM對象

•  $(DOM對象) = jQuery對象

2.DOM對象轉化成jQuery對象

•  jQuery對象[0] = DOM對象
•  jQuery對象.get(0) = DOM對象

jQuery大全：http://jquery.cuishifeng.cn/

尋找元素常用選取器1. 根據 id 找標籤

$("#id") 

2. 根據 class 使用樣式找標籤

<div class="c1"></div>$(".c1")

3. 根據標籤類型尋找

$("a") // 找到所有a標籤

4. 組合尋找

（用逗號隔開）

<div id=‘i10‘ class=‘c1‘><a>f</a><a>f</a></div><div class=‘c1‘><a>f</a></div><div class=‘c1‘><div class=‘c2‘> </div></div>$("a,.c2,#i10")  相當於  $("a") + $(".c2") + $("#i10")

5. 層級選擇

（用空格隔開）

$("#i10 a") 將id=i10的標籤下所有後代a標籤找出來$("#i10>a") 只找子標籤，不找孫標籤$("#i10+a") 找到#i10後面的所有a標籤（兄弟+兄弟的後代，不包括自己的後代）$("#i10~a") 找到所有與#i10同層的a兄弟標籤

6. 基本選取器

:first 在選擇出來的若干個標籤中選擇第一個:last  最後一個:even  奇數:odd   偶數:eq()  括弧裡寫索引值，從0開始:gt()  索引大於:lt()  索引小於

7. 根據屬性尋找

自訂了bob屬性時，$("[bob]")            找出所有具有bob屬性的標籤$("[bob=‘123‘]")      找出bob屬性為123的標籤

8. 表單

$("input[type=‘text‘]")$(":text")兩者完全等價，後者是一個簡寫

篩選器

在選取器的基礎上再次篩選。

$(this).next()          下一個          nextAll()       後面的所有標籤          nextUntil("") 向後直到某標籤$(this).prev()          上一個          prevAll()       前面所有的標籤          prevUntil("") 向前直到某標籤$(this).parent()      父標籤$(this).children()     所有子標籤(在children的括弧內也可以進一步篩選)如：children("[a=‘123‘]")$(this).siblings()      所有兄弟標籤（不包括自己）

first()  第一個last()   最後一個find("")  找到具有某樣式的標籤hasClass("") 判斷是否具有某樣式.eq("")與選取器eq功能相同，只是寫法不同

樣本：

$(‘#tb:checkbox‘).each(function(k){  // .each() 是jQuery使用的迴圈// k當前索引// this代指當前迴圈的每一個元素，為DOM對象var v = $(this).prop("checked") ? false : true;$(this).prop("checked",v);})jQuery方法內建迴圈： $(‘#tb:checkbox‘).操作

操作元素

jQuery支援鏈式編程，可以將很多操作寫入一行

1. 綁定事件

jQuery的綁定事件操作與DOM非常相似

$("input[type=‘123‘]").click(函數名或匿名函數);                   jQuerydocument.getElementById("").onclick = 函數名或匿名函數;   DOM

2. 樣式操作

.addClass("樣式");      增加某樣式(力度大).removeClass("樣式");   刪除某樣式.hasClass("樣式");      判斷是否具有某樣式，返回true或false.toggleClass("樣式")    多次執行時，交錯地刪除或添加某樣式

.css("color");         擷取color樣式的值
.css("display","none") 設定樣式（力度小）

3. 文本操作

// 在DOM中，能夠以innerText擷取文本的操作在jQuery中都用 text()方法.text()          擷取常值內容.text("內容")    設定常值內容.html()       擷取標籤內容.html("<a>內容</a>")  或 .html("內容")    設定常值內容，效果與上面相同// 部分標籤，如<input>,<select>,<textarea>標籤 等原本是value的在這裡都是val().val()           擷取文本.val("內容")  設定文本

4. 屬性操作

// 可以用做自訂屬性
.attr("value")     擷取屬性的值（傳入屬性名稱）.attr("value","1") 設定值（傳兩個參數）,可以新增、修改屬性.removeAttr("")    刪除屬性// 專門用於checkbox，radio擷取、設定值.prop("checked",true)

如果要判斷標籤是否具有某屬性，不能直接判斷其屬性值是否等於undefined，【 if(obj.attr("value") == "undefined" ) 】。因為undefined是屬於undefined類型，而非字串。正確的方法是：

if( typeof(對象.attr("屬性")) == "undefined" )

5. 索引

.index() 擷取此標籤在父標籤下的索引，常與eq一起用  

6. 標籤操作（建立插入刪除）

.append("<a>123</a>")  在內部建立標籤，添加到末尾.prepend("<a>123</a>") 添加到內部最前面.after("")    建立兄弟標籤，緊隨其後.before("")   建立兄弟標籤，緊隨其前.remove()  刪除標籤.empty()   僅刪除內容，不刪除標籤.clone()   複製一份 // 如果只複製標籤而不安排位置，標籤不會顯示出來

7.位置操作

.scrollTop()  擷取/調整當前瀏覽的上下位置.scrollLeft() 擷取/調整當前瀏覽的水平位置window是DOM對象，表示整個瀏覽頁面視窗$(window).scrollTop()     擷取當前瀏覽相對於整個視窗的位置$(window).scrollTop(0)   返回頂部  .offset()          擷取指定標籤在html中的座標.offset().top    距離頂部的座標.offset().left    距離左邊的座標.position()   擷取指定標籤相對於父標籤的座標(相當於在父標籤中relative,子標籤中absolute)        .height()                 擷取標籤的純高度.innerHeight()         純高度 + 內邊距.outerHeight()         純高度 + 內邊距 + 邊框.outerHeight(true)   純高度 + 內邊距 + 外邊距 + 邊框

8.表單提交

a標籤、submit按鈕，本身具有提交/跳轉功能，內建了點擊事件。如果我們給此類標籤再寫一個點擊事件，則會優先執行自己寫的事件，然後再執行提交提交/跳轉功能。如果想要屏蔽原有的功能，根據點擊方式的不同，方法也不同。

// 在html中寫Onclick事件綁定函數。html：<a onclick="A();" href="http://www.baidu.com">點擊啊</a>JS：   function A(){alert(‘123‘);return false;};// 在js代碼中綁定點擊事件函數$("a").click(function(){    alert(‘123‘);    return false;});兩種方式效果相同，且針對 a標籤 和 submit 都一樣。

9. 其他動作和方法

• 標籤的隱藏和顯示

　　　　　　hide()和show()                   在設定速度的情況下，從隱藏到完全可見的過程中會逐漸地改變高度、寬度、內外邊距和透明度

　　　　　　fadeOut()和fadeIn()           控制透明度直至完全消失/顯示

　　　　　　sildeUp()和sildeDown()     上升消失/下降顯示

　　　　以上三對方法都可以直接作用於jQuery對象，實現的本質是改變display樣式，不同之處在於隱藏/顯示的過程中呈現的視覺效果不同。

　　　　hide/show（speed,callback）   參數：speed表示變化時間："fast","normal","slow"或直接寫時間（毫秒）

　　　　　　　　　　　　　　　　　　　　　　callback表示回呼函數

　　　　調用方法時可以不傳入參數，也可以傳入兩個，但如果傳入一個只能是speed。

事件處理

jQuery事件處理主要有四種方法：bind()，delegate()，live()，on()。解除綁定事件分別對應unbind()，undelegate()，die()，off()

bind()支援所有jQuery版本，live()支援jQuery1.9-，delegate()支援1.4.2+，on()支援jQuery1.7+。由於1.9往後的版本不再支援live()，這裡不再講此方法。

bind()和其中的click()方法只能對原本有的標籤綁定事件，而不能對動態添加的標籤綁定。on()，delegate()，liev()都可以。

bind()、live()或.delegate()，查看源碼就會發現，它們實際上調用的都是.on()方法，現在官方推薦on方法，所以大家以後盡量習慣on方法。

頁面1：

    <input id="t1" type="text" />    <input id="a1" type="button" value="添加" />    <ul id="u1">        <li id="s1">1</li>        <li>2</li>    </ul>　　<script src="jquery-3.3.1.js"></script><script>    $(‘#a1‘).click(function () {        var v = $(‘#t1‘).val();        var temp = "<li>" + v + "</li>";        $(‘#u1‘).append(temp);    });</script>

頁面2：

    <input id="btn1" type="button" value="點擊1" />    <input id="btn2" type="button" value="點擊2" />    <a id="a1" href="#">CodePlayer</a>

一、bind() 和 unbind()

.bind("type", {data}, function) 　　參數： type：必需。綁定事件的類型。可以綁定多個，用空格隔開。　　　　　 data：可選。傳入參數，字典的形式。　　　　　 function：必需。執行函數　　我們常用的.click() .mouse()等方法，是bind()的簡寫。.unbind("type", function)  刪除由bind()方法添加的綁定事件　　參數：type：可選。取消綁定的類型，可以是多個。　　　　  function：可選。取消綁定的函數　　當沒有參數時，刪除此標籤所有由bind()綁定的事件程式。

頁面1樣本：

$("ul").bind("click",function(){     var v = $(this).text();     alert(v);});

二、delegate() 和 undelegate()

$("#s1").delegate("selector", "type", {data}, function)　　參數：selector：必需。是一個選取器，可選擇被點擊元素的一個或多個子項目。在這裡，並不是為s1綁定事件，而是為篩選後的selector綁定。　　　　    type：必需。綁定事件的類型。可以綁定多個，用空格隔開。　　　　    data：可選。傳入參數，字典的形式。　　　　　 function：必需。執行函數。.undelegate("selector", "event", function)  刪除由delegate()方法綁定的事件　　參數：selector：可選。同上。　　　　    event：可選。事件，一個或多個　　　　    function：可選。解除指定的函數　　如果沒有參數，刪除此標籤所有由delegate()綁定的事件程式。　　在解除事件函數綁定時，如果使用選取器，必需和綁定時的選取器相同，否則會解除失敗。

頁面1樣本：

        $(‘ul‘).delegate(‘li‘,‘click‘,A);        function A() {            var v = $(this).text();            alert(v);        }        $(‘ul‘).undelegate("li","click",A); // 解除綁定        $(‘ul‘).children().eq(0).undelegate(); // 解除綁定失敗        $(‘ul‘).undelegate("#s1","click",A);   // 解除綁定失敗        // $(‘ul‘).delegate(‘#s1‘,‘click‘,function () {        //     var v = $(this).text();        //     alert(v);        // });

三、on() 和 off()

第一種文法結構：

.on("type", "selector", {data}, function)　　參數：type：必需。同上　　　　　selector：可選。同上。　　　　　data：傳入參數。同上。　　　　　function：執行函數。同上。.off("type", "selector", function)　　參數：type：必需。同上。　　　　　selector：可選。同上。　　　　　function：可選。指定取消綁定的函數。　　如果沒有參數，刪除此標籤所有由on()綁定的事件程式。　　在解除事件函數綁定時，如果使用選取器，必需和綁定時的選取器相同，否則會解除失敗。

第二種文法結構：

.on( {object:function(e){ ... }}，“selector”，{data} )　　參數：object：必需。事件對象。　　　　　function：必需。執行函數。　　　　　selector：可選。選取器。　　　　　e：可選。形參　　　　　data：可選。

頁面1樣本：

// 第一種文法結構$(‘ul‘).on(‘click‘,‘li‘,function () {    var v = $(this).text();    alert(v);});// 第二種文法結構$("ul").on({    mouseenter: function() {        $(this).css("color","red");    },    mouseleave: function() {        $(this).css("color","black");    },    click: function(e) {        alert(e.data.a);    }}, "li",{a:"你好"});

 頁面2樣本：

    <script>        function btnClick1(){          alert( this.value + "-1" );        }        function btnClick2(){          alert( this.value + "-2" );        }        var $body = $("body");        // 給按鈕1綁定點擊        $body.on("click", "#btn1", btnClick1 );        // 給按鈕2綁定點擊        $body.on("click", "#btn2", btnClick2 );        // 移除body元素為所有button元素的click事件綁定的事件處理函數btnClick2        // 點擊按鈕，btnClick1照樣執行        $body.off("click", ":button", btnClick2); // 發現並不起作用        // 點擊按鈕1，不會執行任何事件處理函數        // $body.off("click", "#btn1");                // 注意： $body.off("click", ":button"); 無法移除btn1的點擊事件，off()函數指定的選取器必須與on()函數傳入的選取器一致。    </script>

 四、one()

如果想要綁定一個事件，只想讓它運行一次，不用使用解除綁定函數，用one()一步到位。

.one(event,data,function)參數：event：必需。事件        data：可選。參數        function：必需。執行函數。

 

※ 如何在事件發生時往執行函數內傳參呢？

利用事件綁定函數中參數data傳入。以on為例。

.on("click",{a:"3",b:"4"},func2);  // 傳入參數以字典形式    function func2(c){        console.log(c.data["a"]);        console.log(c.data["b"]);        console.log(c.data.a);         console.log(c.data.b);    } 

jquery擴充1.如何理解 $(function(){  ...  }) ?

它等效於 $(document).ready(function(){})。

一般地寫好的JavaScript代碼，在html代碼渲染完成後（完全載入完畢），才執行js代碼，包括綁定的事件。如果有較大的圖片片，視頻等，會導致js代碼遲遲不能執行，影響使用者體驗。

如果在JavaScript代碼塊內包一層 $(function(){ ... }) ，將所有代碼寫在這裡面，可以解決這一問題。它的意思是，當DOM頁面文檔架構布局載入完畢後，自動執行裡面的代碼。

2.jQuery擴充

擴充指的是將擴充內容寫到別的檔案(.js)，在主檔案中匯入即可直接使用。

// 類方法$.extend({    "nihao":function(){        return "sb";    }});調用：$.nihao();//alert($.nihao());// 對象方法$.fn.extend({    "hello":function(){        return "db";    }});調用：$("選取器").hello();//alert(v2);

當引入多個js檔案時，可能會出現以下問題：

• 出現相同的副檔名
• 出現相同的全域變數

解決辦法：一個檔案嵌套一個自執行函數，將內部的全域變數變成局部變數。

(function(){ ... })();

 

前端——jQuery