前端——jQuery

時間 2019-11-13

標籤前端 jquery 欄目 JQuery 简体版

原文原文鏈接

初識jQuery

什麼是jQuery？

jQuery就是JavaScript和Query，是輔助JavaScript開發的庫，應用普遍，造成了行業標準。它對DOM操做作了很好的封裝，咱們能夠用jQuery很是方便地來代替DOM操做。javascript

爲何要使用jQuery？

輕量級，最新版本的大小隻有85KB；功能強大的選擇器；出色的DOM封裝；兼容性好（能夠在不一樣瀏覽器使用）；可靠的事件處理機制；完善的Ajax支持；豐富的插件支持。
css

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

如何使用jQuery？

官網去jQuery官網下載最新的jQuery，放在項目文件夾內，在html文件中JS代碼上方加入 <script src="jquery-3.3.1.js"></script> 便可。java

jQuery對象與DOM對象的相互轉化

1. jQuery對象轉化成DOM對象

$(DOM對象) = jQuery對象

2.DOM對象轉化成jQuery對象

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

jQuery大全python

查找元素

經常使用選擇器

1. 根據 id 找標籤

$("#id")

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

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

3. 根據標籤類型尋找

$("a") // 找到全部a標籤

4. 組合查找

$("a,.c2,#i10")          並集選擇器,至關於  $("a") + $(".c2") + $("#i10") 。用逗號隔開
$(".c1.c2")              交集選擇器，找到同時知足兩個條件的元素，沒有空隔。  例：$("input.a1")找到應用a1的input元素
$(".S1").filter(".S2");  跟交集選擇器效果相同，先找到符合第一個條件的元素，再用過濾器找到第二個符合條件的元素

5. 層級選擇

$("#i10 a") 將id=i10的標籤下全部後代a標籤找出來，空格隔開
$("#i10>a") 找到全部子標籤，不找孫標籤
$("#i10+a") 找到#i10後面緊挨的同輩a標籤
$("#i10~a") 找到#i10後面全部的同輩a標籤                   不徹底等同於$("#i10").siblings("a")

6. 基本選擇器

:first  在選擇出來的若干個標籤中選擇第一個   例：$(".toolbar:first")  查找應用.toolbar中的第一個元素
:last  最後一個
:even  奇數（從0開始）
:odd   偶數（從0開始）
:eq()  括號裏寫索引值，從0開始
:gt()  索引大於
:lt()  索引小於
:header    選取全部的標題元素，包括<h1>~<h5>
:animated  選取正在執行動畫的全部元素
:focus     選取當前獲取焦點的元素
:contains('')  匹配包含指定文本的元素              例：$("div:contains('John')")   查找全部包含 "John" 的 div 元素
:empty         匹配不包含子元素或沒有文本的空元素    例：$("div:empty")選取不包含子元素的<div>空元素
:parent        選擇含有子元素或文本的元素          例：$("div:parent")選取擁有子元素的<div>元素
:has(selector) 選擇含有指定元素的元素。            例：$("div:has(p)")選取含有<p>元素的<div>元素
:hidden    選擇被隱藏的元素(display:none)
:visible     選擇不被隱藏的元素(display不等於none)

7. 根據屬性查找

自定義了bob屬性時，
$("[bob]")            找出全部具備bob屬性的標籤
$("[bob='123']")      找出bob屬性爲123的標籤

8. 表單

表單：
$(":input")          特殊！查找全部 input, textarea, select 和 button 元素
$(":text")      <=>   $("input[type='text']")       查找全部單行文本框
$(":password")  <=>   $("input[type='password']")   查找全部密碼框
$(":checkbox")  <=>   $("input[type='checkbox']")   查找全部複選框
 …… 等等

表單對象屬性：
:checked       匹配全部被選中的元素（包括單選、複選、select中的option），對於select元素來講，推薦使用:selected
:selected      匹配全部選中的option元素
:enabled       查找全部可用的元素
:disabled      查找全部不可用的元素

篩選器

在選擇器的基礎上再次篩選。jquery

$(this).next()           下一個
          nextAll()      後面的全部標籤
          nextUntil("")  向後直到某標籤
$(this).prev()           上一個
          prevAll()      前面全部的標籤
          prevUntil("")  向前直到某標籤
$(this).parent()         父元素
          parents()      一層一層向上找，獲取每一層的父元素，返回一個列表。括號內能夠加篩選條件（選擇器）
          parentsUntil() 獲取每一層父元素，直到（不包括）符合條件的元素。不傳參的結果與parents()相同
$(this).children()     全部子標籤(在children的括號內也能夠進一步篩選)如：children("[a='123']")
$(this).siblings()     全部兄弟標籤（不包括本身）


.first()      第一個
.last()       最後一個
.find("")     從全部元素的後代中根據條件篩選
.filter("")   返回全部符合條件的元素
.not("")      返回全部不符合條件的元素
.hasClass("") 判斷是否具備某樣式
.eq("")       與選擇器eq功能相同，只是寫法不一樣
.slice(start,end)  篩選出索引範圍內的元素。 start起始索引，end結束索引，顧頭不顧尾

示例：web

$('#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(函數名或匿名函數);                   jQuery
document.getElementById("").onclick = 函數名或匿名函數;   DOM

2. 樣式操做

// 類操做（力度大）
.addClass("樣式");      增長某樣式
.removeClass("樣式");   刪除某樣式
.hasClass("樣式");      判斷是否具備某樣式，返回true或false
.toggleClass("樣式")    屢次執行時，交錯地刪除或添加某樣式

// css樣式操做（力度小）
.css("color");          獲取color樣式的值
.css("display","none") 設置樣式
.css({})                設置大量樣式  
例：.css({"color":"white","background-color":"#98bf21","font-family":"Arial","font-size":"20px","padding":"5px"});

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，select獲取、設置值
.prop("checked",true) 針對checkedbox,redio設置值    .prop("value","2")  select設置值
.removeProp("")  刪除由.prop()設置的屬性集

若是要判斷標籤是否具備某屬性，不能直接判斷其屬性值是否等於undefined，錯誤示例：【 if ( obj.attr("value") == "undefined" ) 】。由於undefined是屬於undefined類型，而非字符串。正確的方法是：app

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

5. 索引

.index()     獲取此標籤在父標籤下的索引，常與eq一塊兒用  
.index("")   獲取符合條件的元素在集合中的索引
例：
1. $("#123").index()    獲取id爲123的元素在父標籤下的索引
2. $(".course").index("#1")  獲取id爲1的元素在應用.course樣式的元素集合中的索引

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

.append("<a>123</a>")  在內部建立標籤，添加到末尾
.prepend("<a>123</a>") 添加到內部最前面

.after("")    建立兄弟標籤，緊隨其後
.before("")   建立兄弟標籤，緊隨其前

.remove()  刪除標籤
.empty()   僅刪除內容，不刪除標籤

.clone()   克隆一份 // 若是隻克隆標籤而不安排位置，標籤不會顯示出來
.replaceWith()  將被選元素替換   例：$("p").replaceWith("<h2>你好</h2>") 將p標籤替換成<h2>標籤

7.位置操做

.scrollTop()  獲取/調整當前瀏覽的上下位置
.scrollLeft() 獲取/調整當前瀏覽的水平位置
window是DOM對象，表示整個瀏覽頁面窗口
$(window).scrollTop()     可視窗口頂端距離網頁頂部的距離
$(window).scrollTop(0)   返回頂部
  
.offset()          獲取標籤在html中的座標
.offset().top    距離頂部的座標
.offset().left    距離左邊的座標

.position()   獲取指定標籤相對於父標籤的座標(至關於在父標籤中relative,子標籤中absolute)
        
.height()            獲取標籤的純高度
.innerHeight()       純高度 + 內邊距
.outerHeight()       純高度 + 內邊距 + 邊框
.outerHeight(true)   純高度 + 內邊距 + 外邊距 + 邊框

※ 原生js，jQuery獲取文檔高度和窗口高度彙總

8.表單提交

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

// 在html中寫Onclick事件綁定函數。
html：<a onclick="return 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事件大全

什麼是事件？

事件是指被程序發現的行爲或發生的事情，並且它可能會被程序處理。JavaScript使咱們有能力建立動態頁面，事件能夠被JavaScript檢測到，使得可以用戶與頁面進行溝通。

常見的事件能夠分爲四類：鼠標事件、鍵盤事件、表單事件、文檔/窗口事件。

1.鼠標事件

事件名稱	事件描述
click	鼠標點擊（在同一元素上按下並釋放）
dbclick	鼠標雙擊
mousedown	鼠標按鍵被按下
mouseup	鼠標按鍵被鬆開
mouseover	鼠標移到某元素上
mouseout	鼠標離開某元素
mousemove	鼠標在某元素上移動
mouseenter	鼠標進入某元素
mouseleave	鼠標離開某元素

說明：

mouseover 和 mouseenter：

mouseover支持冒泡，不論鼠標移動到被選元素或其子元素上，都會觸發該事件；mouseenter不支持冒泡，只有鼠標進入被選元素上，纔會觸發該事件。

mouseout 和 mouseleave：

mouseout支持冒泡，不論鼠標離開被選元素或其子元素時，都會觸發該事件；mouseleave不支持冒泡，只有鼠標離開被選元素時，開會觸發該事件。

mouseover與mouseout一塊兒使用，mouseenter與mouseleave一塊兒使用。

2.鍵盤事件

鍵盤事件分爲：

keypress 按鈕被按下時，發生該事件（按下並釋放同一按鍵）
keydown 按鈕被按下時，發生該事件
keyup 按鈕被釋放時，發生該事件

經過鍵盤響應事件能夠進行操做：

$("").on("keypress",function(event){
    if (event.keyCode == 116) {     // keycode爲鍵盤映射碼
          ........// 具體的操做
    }
})

鍵盤映射大全：

3.表單事件

事件名稱	事件描述
submit	表單提交時發生
change	域的內容發生改變時發生
input	輸入框的內容發生變化時發生
focus	得到焦點時發生
blur	失去焦點時發生
focusin	元素或其子元素得到焦點時
focusout	元素或其子元素失去焦點時

說明：

change 和 input：

change適用於<input>,<textarea>和<select>，它發生須要兩個必要條件：1.值發生改變2.失去焦點。因此當輸入框內容改變的時候，不會當即觸發，須要將鼠標往其它地方點一下才會。

input適用於<input>和<textarea>，它只須要改編值就能夠被觸發。可是從js代碼中修改則不會被觸發。

focus/blur 和 focusin/focusout：

前者只是綁定事件的元素自己獲取/失去焦點時纔會觸發，不支持冒泡；然後者是元素自己或任意子元素得到/失去焦點都會觸發，支持冒泡。

4.文檔/窗口事件

事件名稱	事件描述
load	web頁面或指定元素加載完成時
resize	調整瀏覽器窗口大小
scroll	滑動滾動條（滾動頁面或指定元素時）
unload	離開頁面時

unload觸發狀況：

點擊某個離開頁面的連接
在地址欄中鍵入了新的 URL
使用前進或後退按鈕
關閉瀏覽器窗口
從新加載頁面

事件處理

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>

1、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);
});

2、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);
// });

3、on() 和 off()

第一種語法結構：

.on("type", "selector", {data}, function)
　　參數：type：必需。同上
　　　　　selector：可選。同上。
　　　　　data：可選。傳入參數。
　　　　　function：可選。執行函數。
     若是爲動態添加的元素綁定事件，必需要寫"selector"，並且，on前面的元素必需在頁面加載的時候就存在。
 
.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>

4、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);
    }

注意：如果在事件函數內有點擊事件，不要試圖往內層點擊事件綁定的函數裏傳參，會發生bug（若是調用屢次，傳入的參數會逐漸累積）。

※ 事件冒泡和默認行爲

事件冒泡：當事件發生後，這個事件就要開始傳播，由於事件源自己（可能）並無處理事件的能力，必須傳播到可以處理這個事件的代碼中（即綁定的處理函數）。引起問題：原本只想給某個元素觸發點擊事件，但卻觸發了其父元素上的點擊事件，所以必需要對時間的做用範圍進行限制。

默認行爲：某些元素有本身的默認行爲，好比點擊超連接會跳轉，點擊submit按鈕會提交表單，有時須要阻止這些行爲。

event.preventDefault();  // 阻止默認行爲    可改寫爲：  return false;
event.stopPropagation();  // 阻止事件冒泡   可改寫爲：  return false;

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(){ ... })();