鋒利的jQuery第2版學習筆記4、5章

来源:http://www.cnblogs.com/TwinklingZ/archive/2016/04/01/5346475.html
-Advertisement-
Play Games

第4章，jQuery中的事件和動畫 註意：使用的jQuery版本為1.7.1 jQuery中的事件 JavaScript中通常使用window.onload方法，jQuery中使用$(document).ready()方法。 1、執行時機 window.onload方法在網頁所有元素都載入完畢之後才 ...


第4章，jQuery中的事件和動畫

註意：使用的jQuery版本為1.7.1

jQuery中的事件

JavaScript中通常使用window.onload方法，jQuery中使用$(document).ready()方法。 1、執行時機 window.onload方法在網頁所有元素都載入完畢之後才執行，$(document).ready()方法在DOM完全就緒就可以被調用 由於$(document).ready()方法內註冊事件，只要DOM就緒就會被執行，因此有可能此時元素的關聯文件還未下載完，例如圖片的寬高可能無效。為解決此問題，使用jQuery另一個方法-----load()方法。load()方法會在元素的onload事件綁定一個處理函數。 
$(window).load(function(){
     //編寫代碼
});

等價於：

window.onload = function(){
     //編寫代碼
};
2、多次使用 windows.onload()方法不能保存多個函數引用，而$(document).ready()可以 3、簡寫形式 
$(document).ready(function(){
     //編寫代碼
});

簡寫：

$(function(){
     //編寫代碼
});

$(document)也可以簡寫為$()，當$()不帶參數時，預設參數就是document，因此還可以簡寫：

$().ready(function(){
     // coding
});
3種方式都是一樣的功能

事件綁定

使用bind()方法來對匹配元素進行特定事件綁定，調用格式： 
bind(type [,datd] ,fn);
第一個參數是事件類型，包括：blur、focus、load、resize、scroll等等，當然也可以是自定義名稱 第二個參數是可選參數，作為event.data屬性值傳遞給事件對象的額外數據對象 第三個參數則是用來綁定的處理函數 使用： 
$("#panel h5.head").bind("click",function(){
     // coding
});

合成事件

jQuery有兩個合成事件---hover()、toggle()，類似ready()，hover()和toggle()都是jQuery自定義方法 1、hover()方法 hover(enter,leave) 用於模擬游標懸停事件，當游標移動到元素上，觸髮指定的第一個函數，移出元素，觸髮指定的第二個函數 2、toggle()方法 toggle(fn1,fn2,fn3.....)，在jQuery1.9被移除 用於模擬滑鼠連續點擊事件，第1次點擊觸發第一個函數，第2次點擊觸發第二個函數，第3次點擊觸發第三個，依次類推，重覆調用

事件冒泡

停止事件冒泡 使用event.stopPropagation()可以停止事件冒泡 阻止預設行為 網頁中的元素有自己的預設行為，例如點擊超鏈接會跳轉、單擊提交按鈕，表單會提交，有時需阻止事件預設行為 jQuery中提供了preventDefault()方法來阻止預設行為 event.preventDefault() 註：若想對事件對象停止冒泡和預設行為，可以在事件處理函數中返回false，這是對在事件對象上同時調用stopPropagation和preventDefault的一種簡寫方式

事件對象屬性

1、event.type，獲取事件的類型 2、event.preventDefault()，阻止預設行為 3、event.stopPropagation()，阻止事件冒泡 4、event.target，獲取觸發事件的元素 5、event.relatedTarget，在標準DOM中，mouseout和mouseout所發生的元素可以通過event.target來訪問，相關元素可以通過event.relatedTarget訪問 6、event.pageX和event.pageY，用於獲取游標相對於頁面的x坐標和y坐標，若頁面有滾動條，還要加上滾動條的寬高 7、event.which，在滑鼠事件中獲取滑鼠的左（1）、中（2）、右鍵（3），在鍵盤事件中獲取鍵盤的按鍵 8、event.metaKey，鍵盤事件中獲取<ctrl>按鍵 更多屬性訪問：http://docs.jquery.com/Events/jQuery.Event

移除事件

1、移除按鈕元素上以前註冊的事件 使用unbind()方法，語法結構： 
unbind([type],[data]);
第一個參數是事件類型，第二個參數是要移除的函數 （1）若沒有參數，刪除所有綁定事件 （2）若提供了事件類型作為參數，則只刪除該類型的綁定事件 （3）若都傳遞，則只有這個特定的事件處理函數會被刪除 註：對於只需要觸發一次，之後就解綁的情況，jQuery提供了one()方法，可以為元素綁定處理函數，觸發一次之後，立即刪除 one()方法的結構與bind()方法類似，使用方法也與bind()方法類似，語法結構： 
one(type [,data] ,fn);

模擬操作

1、常用模擬

使用trigger()方法完成模擬操作： 
$("#btn").trigger("click");     // 觸發id為btn的click事件
// 也可以簡化：
$("#btn").click();

2、觸發自定義事件

trigger()方法不僅可觸發瀏覽器支持的具有相同名稱的事件，也可以觸發自定義名稱的事件 例： 
$('#btn').bind("myClick",function(){
    $('#test').append("<p>我的自定義事件</p>");
});
$('#btn').trigger("myClick");

3、傳遞數據

$('#btn').bind("myClick",function(event,message1,message2){
    $('#test').append("<p>"+message1+message2+"</p>");
});
$('#btn').trigger("myClick",["我的自定義","事件"]);

4、執行預設操作

trigger()方法觸發事件後，還會執行瀏覽器預設操作 
$('input').trigger("focus");
不僅會觸發綁定在input上的事件，也會使input元素獲得焦點 使用triggerHandler()方法可以只觸發事件，而不執行瀏覽器預設操作 
$('input').triggerHandler("focus");
只會觸發綁定事件，不會是input元素獲得焦點

其他用法

1、綁定多個事件類型

$(function(){
     $("div").bind("mouseout mouseover",function(){
          //do something 
     });
};

2、添加事件命名空間，便於管理

$(function(){
    $('div').bind("click.plugin",function(){
        $('body').append("<p>click事件</p>");
    });
    $('div').bind("mouseover.plugin",function(){
        $('body').append("<p>mouseover事件</p>");
    });
    $('div').bind("dbclick",function(){
        $('body').append("<p>dbclick事件</p>");
    });
    $('button').click(function(){
        $('div').unbind(".plugin");
    });
});
在所綁定的事件後面添加命名空間，刪除時只需要指定命名空間即可，單擊<button>後，plugin的命名空間被刪除，而不再plugin空間中的dbclick事件依然存在

3、相同事件名稱，不同命名空間執行方法

$(function(){
    $('div').bind("click",function(){
        $('body').append("<p>click事件</p>");
    });
    $('div').bind("click.plugin",function(){
        $('body').append("<p>click.plugin事件</p>");
    });
    $('button').click(function(){
        $('div').trigger("click!"); //註意感嘆號
    });
});
單擊<div>元素後，會同時觸發click事件和click.plugin事件，若只單擊<button>則只觸發click事件，不觸發click.plugin事件，註意trigger("click!")後面的感嘆號的作用是匹配所有不包含命名空間中的click方法 若兩者都要觸發，改為如下代碼： 
$("div").trigger("click");

jQuery中的動畫

1、show()方法和hide()方法 （1）show()方法和hide()方法 調用hide()方法會將該元素的display樣式改為“none” 元素隱藏後可以使用show()方法將元素的display樣式設置為先前的顯示狀態 （2）show()方法和hide()方法讓元素動起來 希望調用show()方法時元素慢慢地顯示出來，可以為show()方法指定一個速度參數，例如，速度關鍵字“slow” 
$(“element”).show("slow");
元素會在600ms內慢慢顯示，還有normal（400ms），fast（200ms），還可以指定一個數字（單位是毫秒） 
$(function(){
    $("#panel h5.head").toggle(function(){
        $(this).next().show("slow");
    },function(){
        $(this).next().hide(1000);
    });
});
2、fadeIn()方法和fadeOut()方法 fadeIn(),fadeOut()只改變元素的不透明度，fadeOut()會在指定的時間內降低元素的不透明度，直至元素完全消失（display:none），fadeIn()相反。 
$(function(){
    $("#panel h5.head").toggle(function(){
        $(this).next().fadeOut();
    },function(){
        $(this).next().fadeIn();
    });
});
也可以使用關鍵字和指定時間參數，單位毫秒 3、slideUp()方法和slideDown()方法 這兩個方法只會改變元素的高度，若一個元素的display為none，slideDown()會將這個元素自上而下延伸顯示，slideUp()正好相反 
$(function(){
    $("#panel h5.head").toggle(function(){
        $(this).next().slideDown();
    },function(){
        $(this).next().slideUp();
    });
});
一樣可以使用關鍵字和指定時間參數，單位毫秒

自定義動畫方法animate()

animate(params, speed, callback);
（1）params：一個包含樣式屬性及值的映射，例：{property:"value",property:"value1",....} （2）speed：速度參數，可選 （3）callback：動畫完成時執行的函數，可選 1、自定義簡單動畫 
<div id="panels"></div>
#panels{
    position: relative;
    width: 100px;
    height: 100px;
    border: 1px solid #0050d0;
    background: #96e555;
    cursor: pointer;
}
$(function(){
    $("#panels").click(function(){
        $(this).animate({left:"500px"},3000);
    });
});
三秒之內，div右移500px，只會移動一次 2、累加、累減動畫 
$(function(){
    $("#panels").click(function(){
        $(this).animate({left:"+=500px"},3000);
    });
});
3、多重動畫 （1）同時執行多個動畫 
$(function(){
    $("#panels").click(function(){
        $(this).animate({left:"500px",width:"200px",height:"200px"},3000);
    });
});
這是同時執行的動畫 （2）按順序執行多個動畫 把多個動畫拆開即可 
$(function(){
    $("#panels").click(function(){
        $(this).animate({left:"500px"},3000);
        $(this).animate({width:"200px"},3000);
        $(this).animate({height:"200px"},3000);
    });
});

鏈式寫法：

$(function(){
    $("#panels").click(function(){
        $(this).animate({left:"500px"},3000)
                .animate({width:"200px"},3000)
                .animate({height:"200px"},3000);
    });
});

4、綜合動畫

$(function(){
    $("#panels").css("opacity","0.5");//設置不透明度
    $("#panels").click(function(){
        $(this).animate({left:"400px",height:"200px",opacity:"1"},3000)
                .animate({top:"200px",width:"200px"},3000)
                .fadeOut("slow");
    });
});
5、動畫回調函數 若想在最後完成時改變CSS樣式，而不是淡出，則需要使用回調函數，而不是將css()方法寫在fadeOut()方法的位置，因為css()方法並不會加入動畫隊列 
$(function(){
    $("#panels").css("opacity","0.5");//設置不透明度
    $("#panels").click(function(){
        $(this).animate({left:"400px",height:"200px",opacity:"1"},3000)
                .animate({top:"200px",width:"200px"},3000,function(){
                    $(this).css("border","5px solid blue");
                });
    });
});

註：callback回調函數適合jQuery的所有動畫效果

停止動畫和判斷是否處於動畫狀態

1、停止元素的動畫 使用stop()方法 
stop([clearQueue],[gotoEnd]);
參數均為可選參數，為boolean值 clearQueue表示是否清空動畫隊列，gotoEnd表示直接將正在執行的動畫跳轉到末狀態 如果直接使用stop()方法，則會立即停止正在執行的動畫，若還有動畫等待執行，則以當前狀態繼續執行下一個動畫 2、判斷元素是否處在動畫狀態 
if(!$("element").is(":animate")){
    //do something
}
3、延遲動畫 使用delay()方法可以對動畫進行延遲操作 
$(function(){
    $("#panels").css("opacity","0.5");//設置不透明度
    $("#panels").click(function(){
        $(this).animate({left:"400px",height:"200px",opacity:"1"},3000)
                .delay(1000)     // 延遲的是下一個動畫
                .animate({top:"200px",width:"200px"},3000);
    });
});

其他動畫方法

1、toggle(speed,[callback])方法 2、slideToggle(speed,[easing],[callback]); 3、fadeTo(speed,opacity,[callback]); 4、fadeToggle(speed,[easing],[callback]); 1、toggle() 可切換元素的可見狀態 
$("#panel h5.head").click(function(){
    $(this).next().toggle();
});

等價於：

$(function(){
    $("#panel h5.head").toggle(function(){
        $(this).next().show("slow");
    },function(){
        $(this).next().hide(1000);
    });
});
2、slideToggle()方法 通過高度變化切換匹配元素可見性 3、fadeTo()方法 把元素的不透明度以漸進方式調整到指定值，只調整元素的不透明度， 4、fadeToggle()方法 通過元素不透明度變化來切換元素的可見性，只調整元素的不透明度

第5章，jQuery對錶單、表格的操作及更多應用

本章大多是使用前面介紹的方法的應用，沒啥筆記
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 基於nodejs的DNS查詢工具
    開始這個實例之前，我們簡單談一下Node.js吧，Node.js是一個由JavaScript書寫而成的強大Web開發框架，它讓開發強壯的、伸縮性良好的伺服器端Web應用變得更加簡單、容易。這種技術誕生於09年末，在一個JavaScript大會上宣佈，當時這項在伺服器端運行JavaScript技術讓所 ...
  • 再談React.js實現原生js拖拽效果
    前幾天寫的那個拖拽，自己留下的疑問。。。這次在熱心博友的提示下又修正了一些小小的bug，也加了拖拽的邊緣檢測部分。。。就再聊聊拖拽吧 一、不要直接操作dom元素 react中使用了虛擬dom的概念，目地就是要儘量避免直接操作dom元素，所以我們在對dom元素進行操作的時候需要註意，我之前為了獲取fo ...
  • react-組件生命周期
    本文同步至微信公眾號http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=402267570&idx=1&sn=4b0dc27842c32d902bad2dc4eea75f9a#rd 感興趣的可以掃碼關註哈 生命周期（Life Cycle）這個詞， ...
  • web前端學習之路
    test 隨著自己對於web前端知識瞭解的越多，越來越發現自己真的好菜 一臉茫然階段 兩年前大學接觸網頁設計，那時對於網頁設計一竅不通，只是看了一本自己大學編的一本入門教材，我甚至不知道那些網頁設計的代碼是乾什麼用的，大學的老師自己講的很投入，然而我並不懂。最後考試他就划了重點。我們只要記一些簡單的 ...
  • setTimeout那些事兒
    一直以來，大家都在說Javascript是單線程，瀏覽器無論在什麼時候，都且只有一個線程在運行JavaScript程式。 但是，不知道大家有疑問沒——就是我們在編程過程中的setTimeout(類似的還有setInterval、Ajax)，不是非同步執行的嗎？！！ 例如： 運行代碼，打開chrome調 ...
  • Atitit.獲得向上向下左的右的鄰居的方法 軟鍵盤的設計..
    Atitit.獲得向上向下左的右的鄰居的方法 軟鍵盤的設計.. Left right可以直接使用next prev.. Up down可以使用pix 判斷...獲得next element的position...比較top 不過,要是跨block的化...僅僅所有的可以使用positon方案了... ...
  • 也來談一談js的淺複製和深複製
    1.淺複製VS深複製 本文中的複製也可以稱為拷貝，在本文中認為複製和拷貝是相同的意思。另外，本文只討論js中複雜數據類型的複製問題（Object,Array等），不討論基本數據類型（null,undefined,string,number和boolean），這些類型的值本身就存儲在棧記憶體中(stri ...
  • 淺談JSON.parse()、JSON.stringify()和eval()的作用
    相信大家對於JSON應該不陌生，度娘對這個名詞的解釋大致如下： “JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。它基於ECMAScript的一個子集。因為採用獨立於語言的文本格式，也使用了類似於C語言家族的習慣，擁有了這些特性使JSON成為理想的數據交 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類