jQuery學習筆記Fisrt Day

来源:https://www.cnblogs.com/otakus/archive/2019/11/28/jQuery1.html
-Advertisement-
Play Games

跳過JS直接JQUERY,“不愧是你”。 對就是我。 今天開始jQuery學習第一天。 click事件方法: 滑鼠點擊 dbl事件方法: 雙擊滑鼠 mouseenter事件方法: 滑鼠進入 mouseleave事件方法: 滑鼠離開 hover: 游標懸停,多一個css可以產生和mouseenter、 ...


跳過JS直接JQUERY,“不愧是你”。

 

對就是我。

 

今天開始jQuery學習第一天。

click事件方法:

滑鼠點擊

dbl事件方法:

雙擊滑鼠

mouseenter事件方法:

滑鼠進入

mouseleave事件方法:

滑鼠離開

hover:

游標懸停,多一個css可以產生和mouseenter、mouseleave接近的效果

alert:

彈出一個框

在事件之後。

keydown - 鍵按下的過程,變yellow

keypress - 鍵被按下,可用計數

keyup- 鍵被鬆開,變pink

submit事件方法:

當提交表單時,會發生 submit 事件。

該事件只適用於 <form> 元素。

submit() 方法觸發 submit 事件,或規定當發生 submit 事件時運行的函數。

1 $(document).ready(function(){
2 $("form").submit(function(){
3 alert("提交");
4 });
5 });

拓展:

1 $(document).ready(function(){
2 $("form").submit(function(event){
3 event.preventDefault();
4 alert("不許提交");
5 });
6 });

event.preventDefault阻止

change事件方法:

1 $(document).ready(function(){
2 $("input").change(function(){
3 alert("文本已被修改");
4 });
5 });

input改變時,彈出alert

當元素的值改變時發生 change 事件(僅適用於表單欄位)。

change() 方法觸發 change 事件,或規定當發生 change 事件時運行的函數。

註意:當用於 select 元素時,change 事件會在選擇某個選項時發生。當用於 text field 或 text area 時,change 事件會在元素失去焦點時發生。

拓展:onchange 事件會在域的內容改變時發生。

$(document).ready(function(){
  $("button").click(function(){
    $("input").change();
  });
});
</script>
</head>
<body>

<p>點擊按鈕觸發 change 事件 (即使元素沒有改變)。</p>
<button>輸入框中觸發 change 事件</button>
<p>輸入你的名字: <input value="Runoob" onchange="alert(this.value)" type="text"></p>

focus事件方法:

當元素獲得焦點時(當通過滑鼠點擊選中元素或通過 tab 鍵定位到元素時),發生 focus 事件。

focus() 方法觸發 focus 事件,或規定當發生 focus 事件時運行的函數。

提示:該方法通常與 blur() 方法一起使用。

使用,點擊input框或者其他TAP獲取焦點,產生事件的方法

<script>
$(document).ready(function(){
  $("input").focus(function(){
    $("span").css("display","inline").fadeOut(2000);
  });
});
</script>
<style>
span
{
display:none;
}
</style>
</head>
<body>

<input>
<span>請輸入你的電話號碼?</span>
<p>點擊輸入框獲取焦點。</p>

</body>
</html>

blur事件方法:

失去焦點,和focus方法對應,把$("span").focus換成$("span").blur就可以產生相反作用。

 1 $(document).ready(function(){
 2   $("input").blur(function(){
 3     alert("輸入框失去了焦點");
 4   });
 5 });
 6 </script>
 7 </head>
 8 <body>
 9 
10 輸入你的名字: <input type="text">
11 <p>在輸入框寫些東西,然後點擊輸入框外,讓其失去焦點。</p>
12 
13 </body>
14 </html>

 

Load事件:

當指定的元素已載入時,會發生 load 事件。

該事件適用於任何帶有 URL 的元素(比如圖像、腳本、框架、內聯框架)以及 window 對象。

根據不同的瀏覽器(Firefox 和 IE),如果圖像已被緩存,則也許不會觸發 load 事件。

鑒於3.0.0以上版本已廢棄,就不再贅述


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

-Advertisement-
Play Games
更多相關文章
  • 一:錯誤捕獲 1.try-catch 語句(錯誤捕獲) try{ //這裡放置可能出現問題的代碼 }catch(error){ //錯誤發生時執行的代碼 console.log(error.name) //列印錯誤類型 console.log(error.message) //列印錯誤消息 } 說明 ...
  • 1、字體、文本聲明 聲明語句必須要包含在{}號之中; 屬性和屬性值之間用“:”分隔; 當有多個屬性時,用“;”進行區分; 在書寫屬性時屬性之間使用空格、換行等,並不影響屬性的顯示; 如果一個屬性有多個值,則每個屬性值之間用空格分隔開。 CSS屬性 字體 font size 字體大小屬性:可設置字體的 ...
  • 作用域:使用範圍 全局變數: 聲明的變數是使用var聲明的, 那麼這個變數就是全局變數 全局變數可以在頁面的任何位置使用 除了函數以外, 其他的任何位置定義的變數都是全局變數 局部變數:在函數內部定義的變數,是局部變數,外面不能使用 全局變數,如果頁面不關閉,那麼就不會釋放,就會占空間,消耗記憶體 全 ...
  • 有一天發現,阮一峰老師的博客圖片很好看,想收藏一下,因為幾百張,一張張下載太慢,朋友推薦了個谷歌插件(Fatkun)確實挺好用的,這之後就對爬蟲有了興趣,這個項目會整理一些簡單切實用的爬蟲代碼 **[crawler-img](https://github.com/mingjiezhou/crawle... ...
  • 幾個入門小知識 1. 微信公眾平臺下載開發者工具(穩定版/64) 登錄微信公眾平臺 2. 導入本地文件夾 APPID (開發 -> 開發設置(沒有APPID可以用測試)) 、 後端服務(不使用雲服務) 、 語言(JavaScript) 3. pages:存放頁面 每個頁面有四部分構成: js:邏輯層 ...
  • 1. 函數可以作為參數使用, 如果一個函數作為參數, 那麼我們說這個參數(函數)可以叫回調函數 2. 只要是看到一個函數作為參數使用了, 那就是回調函數 function sayHi(fn) { console.log("您好啊"); fn();//fn此時應該是一個函數 } function su ...
  • 1. 如何獲取某個變數的類型? typeof 2. 函數是有數據類型 ,數據類型:是function function f1() { console.log("我是函數"); } //如何獲取某個變數的類型? typeof console.log(typeof f1); //函數是有數據類型,數據類 ...
  • 上一篇我們簡單的看了看vue的基本用法,就是三步,首先就是用<script>標簽引入vue的依賴,然後就是寫html標簽,在標簽中用vue指令綁定一些屬性,最後就是new Vue(xxx)實例,在這個實例中有很多的實例屬性可以給html標簽中那些綁定的屬性賦值、或者是綁定事件函數; 這一篇我們來說說 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...