JavaScript 學習-35.jQuery 基礎語法與事件

阿新 • • 發佈：2022-05-31

前言

jQuery 是一個輕量級的"寫的少，做的多"的 JavaScript 庫。極大地簡化了 JavaScript 程式設計
jQuery 庫包含以下功能：

HTML 元素選取
HTML 元素操作
CSS 操作
HTML 事件函式
JavaScript 特效和動畫
HTML DOM 遍歷和修改
AJAX
Utilities

環境準備

在網頁中使用 jQuery 可以使用以下方法：

從 jquery.com 下載 jQuery 庫
從 CDN 中載入 jQuery, 如從 Google 中載入 jQuery

jQuery 所有版本下載地址 https://www.jq22.com/jquery-info122

引用線上 CDN 示例

<head>
    <meta charset="UTF-8">
    <title>jquery 選擇器與事件</title>
    <!-- 引入jquery-->
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.2.1/jquery.min.js"></script>
</head>

入口函式

為了防止文件在完全載入（就緒）之前執行 jQuery 程式碼，即在 DOM 載入完成後才可以對 DOM 進行操作。可以將 jQuery 程式碼位於一個 $(document).ready()

函式中

$(document).ready(function(){
        // 執行程式碼
        alert('頁面載入完')
    });

也可以用下面簡寫方式，與上面寫法效果一樣

// 簡潔寫法（與以上寫法效果相同
    $(function(){
        alert('頁面載入完2')
    });

JavaScript 入口函式:

window.onload = function () {
    // 執行程式碼
}

jQuery 入口函式與 JavaScript 入口函式的區別：

jQuery 的入口函式是在 html 所有標籤(DOM)都載入之後，就會去執行。

JavaScript 的 window.onload 事件是等到所有內容，包括外部圖片之類的檔案載入完後，才會執行。

執行	`window.onload`	`$(document).ready`
執行時機	必須等網頁全部載入完畢，包含圖片等，再執行onload	只需等待頁面中DOM結構載入完畢
執行次數	只執行一次，第二個會覆蓋前面的	可以執行多次，後面的不會覆蓋前面
簡寫	無	`$(function(){ // do something ....}`）

jQuery 基本語法

通過jQuery 可以對元素查詢修改操作，也可以新增事件。基本語法結構

美元符號定義 jQuery
選擇符（selector）"查詢"和"查詢" HTML 元素
jQuery 的 action() 執行對元素的操作

 $(selector).action()

隱藏和顯示

jQuery 提供了隱藏和顯示元素的基本方法

hide() 隱藏元素
show() 顯示元素
toggle() 切換顯示和隱藏

示例

<body>
<p>如果你點選“隱藏” 按鈕，我將會消失。</p>
<button id="hide">隱藏</button>
<button id="show">顯示</button>
<button id="toggle">toggle</button>
<script>
     $(document).ready(function(){
         // 執行程式碼
         $('#hide').click(function () {
             $('p').hide();
         })
         $('#show').click(function () {
             $('p').show();
         })
         // toggle 切換
         $('#toggle').click(function () {
             $('p').toggle();
         })
     });
</script>

事件

事件處理程式指的是當 HTML 中發生某些事件時所呼叫的方法。

滑鼠事件	鍵盤事件	表單事件	文件/視窗事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

click 事件

如果需要對當前元素操作，這裡的this是你定位的元素物件

<button id="btn">點我</button>
<button id="submit">提交按鈕</button>
<script>
     $(document).ready(function(){
         // 執行程式碼
         $('#btn').click(function () {
             console.log(this);
             $(this).hide();
         })
     });
</script>

點選元素後，彈alert示例

<button id="btn">點我</button>
<button id="submit">提交按鈕</button>
<script>
     $(document).ready(function(){
         // 執行程式碼
         $('#btn').click(function () {
             console.log(this);
             //$(this).hide();
             alert('提交成功！')
         })
     });
</script>

如果定位的是多個元素，可以一次性繫結同一事件

     $(document).ready(function(){
         // 繫結button標籤click事件
         $('button').click(function () {
             console.log(this);
             //$(this).hide();
             alert('提交成功！')
         })
     });

但是通過id定位的元素，只會繫結第一個，因為一般id在頁面上具有唯一性，不要重複，通過id查詢的元素，只返回第一個

<button id="btn">點我</button>
<button id="btn">提交按鈕</button>
<script>
     $(document).ready(function(){
         // 只會繫結第一個id為btn元素
         $('#btn').click(function () {
             console.log(this);
             //$(this).hide();
             alert('提交成功！')
         })
     });
</script>

滑鼠事件

常用的一些滑鼠事件

事件	觸發時機
mouseenter()	滑鼠指標穿過元素時
mouseleave()	當滑鼠指標離開元素時
mousedown()	當滑鼠指標移動到元素上方，並按下滑鼠按鍵
mouseup()	鬆開滑鼠按鈕
hover()	游標懸停事件
focus()	獲得焦點時，發生 focus 事件
blur()	失去焦點時，發生 blur 事件

示例：滑鼠按在文字位置，彈窗提示：本文禁止複製

<p>mouse滑鼠事件</p>
<h3>文章標題</h3>
<p>hello world</p>
<button id="btn">點我</button>
<script>
     $(document).ready(function(){
         // 匹配p 或h3標籤
         $('p, h3').mousedown(function () {
             console.log(this);
             //$(this).hide();
             alert('本文禁止複製，開通會員可複製')
         })
     });
</script>