jQuery 入門（還在寫）

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

Views: 5

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

jQuert Logo

jQuery是什麼

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

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

jQuery值得學嗎？

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

  1. 無論新舊專案，還是非常多專案還是在使用，到哪份工作都碰的到。
  2. 很容易上手，學習成本其實不高。

開始寫

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

<!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://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></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>

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

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

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

滑鼠點擊

這邊設計一個按鈕跟一個div，按下按鈕後會修改div的內容

<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("你剛剛點了按鈕！ 啊阿啊");
  });
});

解釋程式碼：

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

選擇器

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

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

另外補充兩個比較常用的

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

特殊但常用的屬性 this ，這個屬性會取得究竟是那個tag觸發的。

內容處理

內容處理上分兩大類型

  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

0 Comments

Submit a Comment

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