python 之 前端開發（ jQuery事件、動畫效果、.each()、 .data()）

来源:https://www.cnblogs.com/mylu/archive/2019/08/21/11391497.html
-Advertisement-
Play Games

綁定事件： 解綁事件： 點擊事件：click 滑鼠：mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave 對於input框：focus、blur、input input能夠實時檢測 textarea，input:te ...


11.58 事件
11.581 事件綁定方法與解綁

綁定事件：

// 綁定方式一：
$('.box1').click(function () {
    alert('綁定方式一')
});
​
// 綁定方式二：
$('.box1').on("click",function () {
    alert('綁定方式一')
});
​
// 綁定方式三：
$('.box1').bind('click',{'a':'b'} function (e) {
    alert('綁定方式二');
    console.log(e.data);
});
​
$('.box1').bind('mouseover mouseout', function () { // 綁定多個事件做同一件事
    console.log('綁定多個事件做同一件事')
});
$('.box1').bind({
    'mouseup': function () {
        console.log('mouseover');
    },
    'mousedown': function () {
        console.log('mouseout');
    }
});

解綁事件：

// 移除事件，unbind沒有參數則代表移除所有事件
setTimeout(function () {
    $('.box1').unbind('mouseover');
}, 3000);
​
setTimeout(function () {
    $('.box1').unbind();
}, 10000)
​
.off("click",function(){
    xxxxx
})
11.582 綁定事件示例

點擊事件：click

// click與dblclick只應該存在一個，大多數都是單擊事件
$('.box1').click(function (event) 
    // console.log(event.type);                 // event.type事件的類型為：click
    console.log(event.target);                  // event.target指的是點擊的那個元素
})
$('.box1').dblclick(function (event) {
    console.log(event.target);                  // event.target指的是點擊的那個元素
})

滑鼠：mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave

$('.box1').mousedown(function (event) {
        console.log('按照滑鼠左鍵不鬆手');
    });
$('.box1').mouseup(function (event) {
    console.log('按照滑鼠左鍵鬆手');
});
​
$('.box1').mousemove(function (event) {
    console.log('移動滑鼠', event.pageX, event.pageY);
});
$('.box1').mouseover(function (event) {
    console.log('元素以及該元素的子元素在滑鼠移入時都會觸發,當前的div是：', event.target.innerText);
});
​
$('.box1').mouseout(function (event) {
    console.log('元素以及該元素的子元素在滑鼠離開時都會觸發，當前的div是：', event.target.innerText);
});
$('.box1').mouseenter(function (event) {
    console.log('元素以在滑鼠移入時都會觸發(與子元素無關),當前的div是：', event.target.innerText);
});
$('.box1').mouseleave(function (event) {
    console.log('元素以在滑鼠移入時都會觸發(與子元素無關)，當前的div是：', event.target.innerText);
});

對於input框：focus、blur、input

input能夠實時檢測 textarea，input:text，input:password，input:search這幾個元素的內容變化，但IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代，使用jQuery庫的話直接使用on同時綁定這兩個事件即可

$('#inp').on("focus", function () {
    console.log('滑鼠聚焦');
});
$('#inp').on("blur", function () {
    console.log('滑鼠失去焦點');
});
// 當input框的值發生變化時，實時觸發
$("#inp").on("input", function () {
    console.log($(this).val());
})
$("#i1").on("input propertychange", function () {
    alert($(this).val());
  })

按鍵：keydown、keyup

$('#inp').keydown(function (e) {
    console.log(e.keyCode);
});
$(window).on("keydown", function (e) {      // 獲取用戶按下那個按鍵
    console.log(e.keyCode);
    if (e.keyCode === 16){
        flag = true;
    }
});
​
$('#inp').keyup(function (event) {          // 綁定一個按鍵抬起的事件
    console.log('鍵盤按鍵彈起');
});
$(window).on("keyup", function (e) {
    console.log(e.keyCode);
    if (e.keyCode === 16){
        flag = false;
    }
});

change:

//表單事件change
$('#inp').change(function () {
    console.log(this.value);            //失去焦點時就會得到值
});
$('input[name=sex]').change(function (event) {
    console.log(this.value);
});
$('#select').change(function () {
    console.log(this.value);
});

選中checkbox框：select

//表單事件select,CheckBox框被選中時觸發
$('#inp1').select(function () {
    console.log(this.value);
});
$('#inp2').select(function () {
    console.log(this.value);
});

提交事件：submit

//表單事件submit
$('#form').submit(function (event) {
console.log($('input[name=user]').val());
console.log($('input[name=pwd]').val());
event.preventDefault();
});

hover:不能使用on綁定hover事件

//hover事件
$(".father").hover(                         // 滑鼠移到.father上時讓.son添加一個.show 
    function () {
        $(this).find(".son").addClass("show");
    },
    function () {                            // 滑鼠移出.father上時讓.son移除一個.show 
        $(this).find(".son").removeClass("show");
    })
11.583 事件冒泡應用之事件委托

添加的事件不能用於動態增加事件,例如之前我們在做表格的增刪改時，每新增一行內容都需要重新綁定事件，基於事件委托就可以解決該問題

事件委托是通過事件冒泡的原理，利用父標簽去捕獲子標簽的事件

$('ul').on('mouseover','li',function (e) {
    $(e.target).css('background-color','#ddd').siblings().css('background-color','white');
    // e.stopPropagation();
    return false;
})
​
$("table").on("click", ".delete", function () {
  // 刪除按鈕綁定的事件
})
11.584 頁面載入完成執行
$(document).ready(function(){
    在這裡寫你的JS代碼...
})
​
簡寫:
$(function(){
    你在這裡寫你的代碼
})

與window.onload()函數的區別：window.onload()函數有覆蓋現象，必須等待著圖片資源載入完成之後才能調用，且只能使用一次；jQuery的這個入口函數沒有函數覆蓋現象，文檔載入完成之後就可以調用（建議使用此函數），可以使用多次

11.59 動畫效果
1、show() 顯示隱藏的匹配元素 語法：show(speed,callback) 
參數：
speed：三種預定速度之一的字元串('slow','normal','fast')或表示動畫時長的毫秒值（如：1000毫秒==1秒）
callback:在動畫完成時執行的函數，每個元素執行一次
2、hide
hide(speed,callback)跟show使用方法類似，表示隱藏顯示的元素。可以通過show（）和hide（）方法，來動態控制元素的顯示隱藏
3、toggle
如果元素是可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的。
​
1、slideDown  通過高度變化（向下增大）來到動態地顯示所有匹配的元素，在顯示完成後觸發一個回調函數用法和參數跟上面類似
2、slideUp   通過高度變化（向上減小）來動態地隱藏所有匹配的元素，在隱藏完成後可選地觸發一個回調函數。用法和參數跟上面類似
3、slideToggle 通過高度變化來切換所有匹配元素的可見性，併在切換完成後可選地觸發一個回調函數跟toggle用法類似
​
1、fadeIn/fadeOut  通過不透明度的變化來實現所有匹配元素的淡入/淡出效果，併在動畫完成後可選地觸發一個回調函數。這個動畫只調整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發生變化
2、fadeTo  把所有匹配元素的不透明度以漸進方式調整到指定的不透明度，併在動畫完成後可選地觸發一個回調函數。這個動畫只調整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發生變化。
3、fadeToggle 通過不透明度的變化來開關所有匹配元素的淡入和淡出效果，併在動畫完成後可選地觸發一個回調函數,這個動畫只調整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發生變化。實現淡入淡出的效果就是使用此方

animate、stop、delay

1、animate   概念：用於創建自定義動畫的函數  語法：animate(params,[speed],[fn])
參數：
params:一組包含作為動畫屬性和終值的樣式屬性和及其值的集合
speed:三種預定速度之一的字元串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
fn:在動畫完成時執行的函數，每個元素執行一次。
​
2、stop  概念：停止所有在指定元素上正在運行的動畫  語法：stop([clearQueue],[jumpToEnd])
參數：
clearQueue:如果設置成true，則清空隊列。可以立即結束動畫。
gotoEnd:讓當前正在執行的動畫立即完成，並且重設show和hide的原始樣式，調用回調函數等
​
3、delay 概念：用來做延遲的操作  語法：delay(1000)，一秒之後做後面的操作
11.510 .each()
// 為每一個li標簽添加class="c1"
$("li").each(function(){
  $(this).addClass("c1");
});
​
//使用內置$.each()進行迭代
var arry=[11,22,33,44];
$.each(arry,function(k,v){
    console.log(k,v);
});

註意: jQuery的方法返回一個jQuery對象，遍歷jQuery集合中的元素 - 被稱為隱式迭代的過程。當這種情況發生時，它通常不需要顯式地迴圈的 .each()方法

也就是說，上面的例子沒有必要使用each()方法，直接像下麵這樣寫就可以了：

$("li").addClass("c1");  // 對所有標簽做統一操作

終止each迴圈

return false；
11.511 .data()

.data(key, value): 在匹配的元素上存儲任意相關數據/保存一些狀態。

$("div").data("k",100);     //給所有div標簽都保存一個名為k，值為100

.data(key):返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值

$("div").data("k");         //返回第一個div標簽中保存的"k"的值 100

.removeData(key):移除存放在元素上的數據，不加key參數表示移除所有保存的數據

$("div").removeData("k");    //移除元素上存放k對應的數據

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 面試完還唄、拼多多、螞蟻金服、趣頭條、京東到家之後，我知道了這些
    最近一個朋友，在謀求架構師崗位的工作，經歷了魔都的一批互聯網公司的洗禮，讓他把面試經歷整理了一下，給大家一些經驗吧，希望各位後面去這些公司面試的時候，能有些心理準備。 還唄 地點：2號線金科路地鐵站（長泰廣場A座） 環境：環境還不錯，裝修偏簡約風，工位是互聯網公司那種排排坐。 投遞方式：拉勾網 面試 ...
  • Java 代理
    代理（proxy）分為2種： 靜態代理 動態代理 動態代理常用的有jdk動態代理、cglib代理。 靜態代理 1、新建User介面 2、新建實現類UserImpl 3、新建代理類UserProxy，也實現User介面，對目標對象（的方法）進行增強 4、使用代理。新建測試類Test 靜態代理的特點 代 ...
  • 常用高效 Java 工具類總結
    一、前言 在Java中，工具類定義了一組公共方法，這篇文章將介紹Java中使用最頻繁及最通用的Java工具類。以下工具類、方法按使用流行度排名，參考數據來源於Github上隨機選取的5萬個開源項目源碼。 二、org.apache.commons.io.IOUtils closeQuietly：關閉一 ...
  • SpringBoot：實現定時任務
    一、定時任務實現的幾種方式： Timer 這是java自帶的java.util.Timer類，這個類允許你調度一個java.util.TimerTask任務。使用這種方式可以讓你的程式按照某一個頻度執行，但不能在指定時間運行。一般用的較少。 ScheduledExecutorService 也jdk ...
  • pymssql預設關閉自動模式開啟事務行為淺析
    使用Python採集SQL Server資料庫伺服器磁碟信息時，遇到了一個錯誤“CONFIG statement cannot be used inside a user transaction.DB-Lib error message 20018, severity 16”，那麼為什麼遇到這個錯誤... ...
  • Springboot源碼分析之番外篇
    摘要： 大家都知道註解是實現了java.lang.annotation.Annotation介面，眼見為實，耳聽為虛，有時候眼見也不一定是真實的。 元註解: 元註解 一般用於指定某個註解生命周期以及作用目標等信息。正如源碼的註釋一樣，如果自定義的註解沒有添加元註解就和平常的註釋沒有多大的區別，有了元 ...
  • Java基礎語法總結
    - 1.win10安裝JDK8 - 2.數據類型與變數 - 3.運算符 - 4.程式流程式控制制 - 5.數組 ...
  • python 分析 知乎粉絲數據
    昨天花了一下午寫了一個小爬蟲，用來分析自己的粉絲數據。這個真好玩！今天幫了群里好多大V也爬了他們的數據。運行速度：每分鐘5千粉絲以上。暫時先寫成這樣，這兩天要準備補考，沒有時間繼續玩這個。 下次要改進的地方：1、多線程 2、scrapy 3、深度數據 4、分散式爬蟲 希望實現的功能： + 1、地區、 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類