jQuery 入門(1)（還在寫）

by | 12 月 23, 2024 | 程式 | 0 comments

Views: 12

當年小弟我學jQuery的時候還是2012年，印象中當時IE 8是主流，我在公務機關工作，多數電腦還是Windows XP，網站開發還沒有現在Vue、React、Angular等前端框架，如果不使用jQuery，開發上是非常的痛苦，不同的瀏覽器對javascript的處理上差異非常大。

(這篇發現寫太長了，我正在進行拆分)

jQuert Logo

jQuery是什麼

是一套javascript框架，用神奇?的方法幫你處理掉很多javascript的坑 ，讓你用少少的程式碼做很多事情，如同它的標語write less do more。

簡單的說jquery是提供一個簡化javascript語法的套件，概念上很像將語法提供簡寫，處理好javascript比較囉唆的語法。

jQuery最早期有個重要的貢獻，在IE6的年代，當時的瀏覽器有IE Firefox Safari，主流是IE 6-8 再來是Firefox，當年IE對javascript有自己的一套標準跟實作(簡單的說就是不照公定標準)，當時等於同一段javascript跑在IE6跟IE8的結果是不同的，跑在Firefox也是另一個結果，當時jQuery的出現處理了這個問題，這個套件大幅度的處理了同一段程式碼在瀏覽器的相容問題。

jQuery值得學嗎？

目前它仍相當值得學，原因如下

  1. 無論新舊專案，還是非常多專案還是在使用，到哪份工作都碰的到。
  2. 很容易上手，學習成本其實不高，你可以把它當成簡易版的javascript。
  3. 它影響了後續其他javascript的框架

Getting Start

一般來說，練習jquery只需整合jquery就好，不過我建議連bootstrap也整合好，除了練習jQuery以外也練習把頁面弄得美美的，想自學的小夥伴，可以直接找Getting Start或Tutoria。

JSFiddle 練習html css js的工具

通常我使用visual studio code進行教學，不過有學員反應希望可以看到js css html 結果在同一個畫面上，通常這樣做法會是將css跟js分到另外兩個檔案，然後用多視窗的方式進行。

這類工具主流的有

  • jsFiddle
  • js bin
  • codepen
  • CSS DECK

jsFindle

各個平台有些差異，不過我自己比較喜歡用VS Code或 Sublime之類的本機文字編輯器，原因有幾個

  1. 要熟悉使用本機的VS Code各種操作
  2. VS Code之類有snippet可以用，可以幫你用關鍵字帶出語法、函數、樣式等

開始寫

jquery101.html

這邊提供一個簡單的樣版，我已經放好CDN了，jquery101.html

不過這個是沒有拆的，JS CSS都在同一個檔案中 ，這是依照Bootstrap4 Getting Start的樣板製做的，不過我換了裡面的jquery為min版的而不是slim版

<!DOCTYPE html>
<html lang="zh-tw">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
      crossorigin="anonymous"
    />
    <title>Hello, jQuery!</title>
  </head>
  <body>
    <h1 class="h4">Hello, jQuery!</h1>

    <!--JS-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
      integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
      integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
      crossorigin="anonymous"
    ></script>
    <script type="text/javascript">
      //jquery的程式碼寫在這邊
    </script>
  </body>
</html>

jsFindle

網頁上的程式：事件驅動 Event Driven

要在網頁上寫程式，核心的概念是事件驅動Event Driven。

網頁上的事件可以理解為使用者在網頁上操作的各種行為，例如點擊按鈕(click)、滑鼠移動(mouse move、mouse over)、鍵盤輸入(key press)，甚至是網頁讀取完成的瞬間(。這些行為都是「事件(Event)」，而我們寫的程式，就是負責「監聽(Listen)」這些事件，並在事件(Event)觸發(trigger)時執行相應的動作(function)。

在 jQuery 中，我們可以很方便地透過事件綁定來處理這些互動。事件綁定的核心是將一個函式（通常稱為回呼函式或事件處理器）附加到某個 HTML 元素的特定事件上。當該事件被觸發時，這個函式就會執行。

選擇器

jQuery的核心是選擇器，是以$("目標")，選擇後要做什麼事情。這邊列出常用的幾個選擇器寫法。

  1. id： $("#特定ID")
  2. class：$(".特定class")
  3. name：$("[name = '特定的name' ]")
  4. 特定屬性：$("[屬性名稱 = '特定的name' ]")

這邊要注意，「通常」一個Html頁面上id只能掛在一個Html tag上

<!-- 正常的寫法 一個div有唯一的id -->
<div id="5566"></div>
<div id="7788"></div>

<!-- 錯誤的寫法 重複id -->
<div id="30cm"></div>
<div id="30cm"></div>

可以用id或name取得的部分

  1. 多數的input>textbox、File
  2. 非輸入用途的html tag 例如img div span p
  3. table
  4. 按鈕 button
  5. form

一定要用name才能取得的

  1. jQuery取得radio box已選項目：$('input[name='name名稱']:checked')
  2. jQuery取得check box已選項目：$('input[name="name名稱"]:checked')

更特殊的 select option

  1. 取得選擇值 $('#country').find(":selected").val();
  2. 取得選擇值的文字 $('#country').find(":selected").text();

範例1-滑鼠點擊on click

我們先來學習設定滑鼠點擊按鈕，點下去會改變div內的文字

html>body

<button id="myButton" class="btn btn-default">點我一下</button>
<div id="output" class="alert alert-info"></div>

javascript

//保證網頁的程式碼全部載入後才開始執行
$(document).ready(function () {

  // 綁定(註冊、登記)點擊事件
  $("#myButton").click(function () {
    // 當按鈕被點擊時，修改 #output 文字的內容
    $("#output").text("你剛剛點了按鈕！ 啊阿啊");
  }); //end myButton click

});//end document ready

解釋程式碼：

  1. $(document).ready(); 註冊jQuery網頁完全載入的事件，確保程式碼會在網頁載入後才執行。
  2. $("#myButton").click(); 註冊id是myButton的tag被點擊（滑鼠或手指），要執行的事件
  3. $("#output").text("你剛剛點了按鈕！ 啊阿啊");
    • $("#output").選擇ID為 output的tag，
    • .text("你剛剛點了按鈕！ 啊阿啊");修改裡面的內容。

範例2 jQuery輸入textbox內容後輸出到div

這邊來練習一個經典的範例

  1. textbox變動的事件.change()
  2. 取得textbox內容 使用選擇器跟函數 .val()
  3. 輸出到div 使用函數.text()

Html

<h3 class="h4">Hello, jQuery! example 2 Text box change</h3>
<input type="text" id="myTextbox" class="form-control col-md-3">
<div id="output" class="alert alert-info mt-1  col-md-3">
</div>
<p class="text-muted">這個範例是當Textbox輸入完成後,會更新底下的div</p>
  1. 建一個文字框，裡面給一個id="myTextbox"
  2. 建一個顯示內容的div，給一個id="output"

jQuery (Javascript)

//js寫在這
$(document).ready(function () {

  // 綁定(註冊、登記)變動事件  
  $("#myTextbox").change(function () {
    //將text讀出後存到變數
    let inputText = $("#myTextbox").val();
    //將inputText的值放到output這個div
    $("#output").text(inputText);
  });
});
  1. $("#myTextbox").change() 註冊事件
  2. 事件觸發時候讀出文字、將文字輸出到div
  3. 讀出文字 let inputText = $("#myTextbox").val();
  4. 將文字輸出到div $("#output").text(inputText);

這個範例會遇到一個問題，輸入不會「即時反應」，你需要滑鼠點一下頁面的其他地方才會觸發.change()事件，這個特徵有好有壞，如果你要做及時存檔，使用.change()可以避免打一個字就存一個字，造成後端存檔的負擔大。

範例2.1 jQuery輸入textbox內容後輸出到div(即時更新版)

前一個範例使用.change() 會造成的問題不夠「及時」，當然如果使用者不唉唉叫的話其實我覺得用.change()是比較好的做法，這邊改用另一個事件叫做input，這個事件是Html5之後才有的事件，所以jQuery沒有提供簡短的寫法

Html

<h3 class="h4">Hello, jQuery! example 2.1 Text box change</h3>
<input type="text" id="myTextbox" class="form-control col-md-3">
<div id="output" class="alert alert-info mt-1  col-md-3">
</div>
<p class="text-muted">這個範例是改良版本 可以輸入時瞬間更新</p>

jQuery

$(document).ready(function () {
  $("#myTextbox").on("input", function () {
    // 讀取輸入框內的值
    let inputText = $(this).val();
    // 將輸入框的值放到 output 這個 div 中
    $("#output").text(inputText);
  });
});

範例3 radio box 是 否 其他

這個範例練習的是經典的三個問題，是、否、其他，但我們還沒有處理顯示其他項目那邊

HTML

<h3 class="h4">Hello, jQuery! example 3 radio change</h3>
<label><input type="radio" name="yesno" value="1"> 是</label> 
<label><input type="radio" name="yesno" value="0"> 否</label>
<label><input type="radio" name="yesno" value="2"> 其他</label>
<br>
<label>選到的值</label>
<div id="output" class="alert alert-info mt-1  col-md-3">
</div>
<p class="text-muted">radiobox 的是否 其他，但還沒補上其他的輸入框 </p>

  1. 這邊做了三個radio
  2. 關鍵點radio的 name屬性要設定成相同
  3. radio的三個屬性 value分別用012代表三個不同的值，也會有人用-1或99代表其他

jQuery

//js寫在這
$(document).ready(function () {
  //這邊用input或change都行  要注意的是checkbox要用name取得
  $("[name='yesno']").on("change", function () {
    // 讀取輸入框內的值
    let inputValue = $(this).val();
    // 將輸入框的值放到 output 這個 div 中
    $("#output").text(inputValue);
  });
});
  1. 這邊使用change作為觸發
  2. 取值我們使用$(this).val();，這樣是比較漂亮的做法，this是js的一個隱藏變數，會直接指向觸發事件的元素

範例 3.1 radio box 是 否 其他/顯示其他的輸入框

目前還缺一個顯示其他的文字輸入框，所以我們要做的事情有幾個

HTML

  1. 補一個其他的文字輸入框
  2. 把其他輸入框用div包起來，並且補上說明+id
  3. 把div先設定為隱藏

jQuery

  1. 在change();內加上判斷選擇的是否為其他
  2. 選擇為其他的時候顯示div
  3. 選擇為是/否的時候隱藏div

內容處理

內容處理上分兩大類型

  1. 標籤上的屬性value、checked那類的
  2. html tag的內容，例如<div>處理這邊的內容</div>

屬性操作類

  1. 取值 var 變數 = $(目標).val();
  2. 賦值 $(目標).val(值);
  3. 設定checkbox或radio button已勾選$(目標).prop('checked', true);
  4. 判斷checkbox已選 $("目標").is(':checked')
  5. 取得已經選的checkbox清單 $('input[name="chechbox名稱"]:checked');
  6. 取得data-id $(目標).attr("data-id") 或者 $(目標).data("id")
  7. .attr() 操作html原始碼的屬性
  8. .prop() 操作布林值相關的屬性

內容類

  1. $(目標).html(新內容); 直接把目標的內容取代
  2. $(目標).text(新內容); 直接把目標的內容取代，但會編碼過。
  3. $(目標).append(新內容);把目標內原有的內容後面加入新內容。
  4. $(目標).prepend(新內容);把目標內原有的內容前面加入新內容。
  5. $(目標).before(新內容);把目標tag前面加入新內容。
  6. $(目標).after(新內容);把目標tag後面加入新內容。
  7. $(目標).empty();把目標內容全部清除。

事件

jquery簡化了事件註冊如下。

  1. $(某元素).change(觸發後要執行的fn) 更改內容
  2. $(某元素).click(觸發後要執行的fn) 滑鼠點下去
  3. $(某元素).on(事件名稱,觸發後要執行的fn) 函數

最多人問的一個問題：為什麼事件內不是直接寫程式碼.click(/*程式碼*/)，還要寫.click(function(){/*程式碼*/})才行？

原因是javascript註冊事件是需要提供一個函數給它，告訴瀏覽器事件觸發時要執行那個函數，其中function(){/*程式碼*/} 這個是所謂的匿名函數（沒有取名字的函數），反過來如果有名字的函數就叫做具名函數function 函數名稱(){/*程式碼*/}

那我能用具名函數嗎？

YES

function copyUserName() {
  let userName = $("#UserNameID").val();
  //將userName變數寫入id=myUserName
  $("#myUserName").val(userName);
}
$(document).ready(function () {
  //使用具名函數
  $("#UserNameID").change(copyUserName);
});

尋找相關

  1. $(目標).parrent(); 選擇上一層的
  2. $(目標).child();選擇下一層的
  3. $(目標).next();選擇下一個相同的html標籤
  4. $(”).find();
  5. $(目標).closest();

.val()取值與賦值

取值

取值=將值拿出來放到變數或if()中，如果要取得某文字框的內容

選擇器可以透過id或name取值(其實還有其它方式)

  1. 透過ID $("#UserNameID").val()
  2. 透過Name $("[name='UserName']").val()

let 變數 = $(目標元素).val();

賦值

$(目標元素).val(要寫入的值);

範例

<lable>帳號</lable>
<input type="text" name="UserName"  id="UserNameID" placeholder="請輸入帳號" />
<br/>
<label>結果</label>
<input type="text" id="myUserName" />
 <script type="text/javascript">
    $(document).ready(function () {
      //.change() 當輸入完成後,離開輸入框才會變
      $("#UserNameID").change(function () {
        //將帳號存入userName變數
        let userName = $("#UserNameID").val();
        //將userName變數寫入id=myUserName
        $("#myUserName").val(userName);
      });
    });
</script>

.attr() 跟 .prop()

主要差異

比較attr()prop()
操作對象HTML 屬性DOM 屬性
用途靜態 HTML 中定義的屬性值動態屬性或 JavaScript 屬性值
適用場景href, id, src, alt 等checked, disabled, selected 等
支援布林值可能返回字串 ("true" 或 "false")返回布林值 (true 或 false)

這兩個屬性非常的像，基本上記住.prop()常用在操作這幾個屬性checked disabled selected readonly時候才會用

// 使用 attr
$('#checkbox').attr('checked', true);  // 僅修改 HTML 屬性，不會真正選中
console.log($('#checkbox').prop('checked')); // false

// 使用 prop
$('#checkbox').prop('checked', true); // 修改 DOM 屬性，會真正選中
console.log($('#checkbox').prop('checked')); // true

// 使用 attr 操作 href
$('#link').attr('href', 'https://newlink.com');
console.log($('#link').attr('href')); // 顯示更新的連結

// 使用 prop 操作 href
console.log($('#link').prop('href')); // 返回完整的絕對 URL

.data取值與賦值

很多時候會在tag中埋特別的屬性，這些特別的屬性長這樣

<div data-id="1534" class="del btn btn-danger">刪除</div>
<div data-id="1535" class="del btn btn-danger">刪除</div>
<div data-id="1537" class="del btn btn-danger">刪除</div>

當我希望點下去之後刪除對應的資料

<script>
$(".del").click(
  function(){
    //取得id的資料
    let id = $(this).data("id");
    //執行刪除對應的id ajax
    //...
    //刪除畫面上一整列，通常網頁結構會是要刪除整個所在的tr
    // tr>td>div
    let row = $(this).parrent().parrent().remove();    
  }
);
</script>

.text() 跟 .html()

主要差異比較

比較.text().html()
操作內容純文本（無 HTML 標籤）HTML 內容（包括標籤）
獲取結果返回內部的純文本返回內部的 HTML 字串（包含標籤）
設定結果將內容作為純文本插入，不解析 HTML將內容解析為 HTML 並插入
適用場景操作純內容，避免 HTML 標籤的影響，可以防止xss攻擊操作 HTML 結構或插入 HTML 標籤

取得內容差異

<div id="example"><b>Hello</b> World!</div>

console.log($('#example').text()); // Hello World!（純文本）
console.log($('#example').html()); // <b>Hello</b> World!（HTML 字串）

.before() 在元素前插入 .after()在元素後插入 .prepend()在元素內開頭加入 .append() 在元素內結尾加入

這四個很常用，但要注意加入的元素會解析成html，要做一定的過濾。

假如我們有個元素

<div id="target">歡迎加入喵喵教</div>

這四個分別會在這幾個地方作用

(before)<div id="target">(prepend)歡迎加入喵喵教(append)</div>(after)

官方文件

.empty() 清除內容

用法:$(目標).empty();

.show() .hide() 顯示或隱藏區塊

.fadeIn() .fadeOut() 使用淡出淡入顯示或隱藏區塊

.find()

.parrent() 找上層的元件

Ajax相關

  1. .ajax()
  2. .post()
  3. .get()

常用的有這三個，這邊後續學到後端我再特別說

參考資料

checkbox判斷是否勾選 javascript – How do I check whether a checkbox is checked in jQuery? – Stack Overflow

設定checkbox已經勾選 jQuery set checkbox checked – Stack Overflow

取得值 jQuery Get Selected Option From Dropdown

0 Comments

Submit a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *