iT邦幫忙

3

CMoney軟體工程師戰鬥營_jQuery_Week 14

分領域後
除了每週二的課程
每週四也會有老師指定的演示
本週我是負責jQuery
以下是我的不專業整理


  • 什麼是jQuery
  • jQuery特性有哪些
  • 如何安裝jQuery
  • jQuery語法
  • 使用範例

什麼是jQuery?

jQuery是一套跨瀏覽器的JavaScript函式庫(library),簡化HTML與JavaScript之間的操作。

jQuery是開源軟體,使用MIT授權條款授權。

jQuery的語法設計使得許多操作變得容易。

模組化的方式使jQuery函式庫能夠建立功能強大的動態網頁以及網路應用程式。

生日:2006年1月

最新版本:3.5 (4正在開發中)

最新版本釋出日期:2020年4月10日

勁敵:Bootstrap

jQuery特性有哪些

jQuery是使用最多的JS庫之一,它有很多優點,比如輕量、易用、完善的Ajax、良好的瀏覽器相容,以及它有健壯的選擇器等。這些優點使得jQuery成為幫助前端開發人員的有力工具。

  • HTML元素選取與操作→稍後揭曉(coming soon)
  • DOM→jQuery提供了選擇器,用於根據不同的條件
  • 事件→jQuery庫包含等效於DOM事件的函數
  • CSS操作→提供一些常使用的屬性操作的簡化方法
  • JavaScript 特效和動畫→可以將特殊效果應用於DOM元素
  • AJAX→jQuery包括易於使用的AJAX函數,以從服務器加載數據而無需重新加載整個頁面。
  • 多瀏覽器支援→jQuery庫自動處理跨瀏覽器問題

如何安裝jQuery

1.1下載jQuery

有兩個版本的jQuery 可供下載:

  • Production version - 用於實際的網站中,已被精簡和壓縮。
  • Development version - 用於測試和開發(未壓縮,是可讀的代碼)

網址:https://jquery.com/download/

1.2通過CDN(內容分發網絡) 引用

有兩種方式:

連到網路,連到本地端

網址:https://developers.google.com/speed/libraries

2.把jQuery添加到網頁中

<body>
<script src="jquery.js"></script>
</body>

3.jQuery語法

來源網址:https://api.jquery.com/

  • 文檔就緒函數→為了防止文檔在完全加載(就緒)之前運行jQuery 代碼。
$(document).ready(function(){
		所有 jQuery 函數位於document ready 函數中
});

如果在文檔沒有完全加載之前就運行函數,操作可能失敗。下面是兩個具體的例子:

  • 試圖隱藏一個不存在的元素

  • 獲得未完全加載的圖像的大小

  • 選取物件:$("CSS選取器") or $("標籤"),$等同於jQuery

6個基本語法

  1. 取得內容、屬性

    console.log($("p").html());        // 取得內容
    console.log($("p").attr("class")); // 取得 class 屬性的值
    
  2. 更新 style 屬性

    $("p").css("color", "red");         // 改變文字顏色
    $("p").css("font-style", "italic"); // 變斜體
    
  3. 更新一般屬性

    $("p").attr("id", "myid");
    $("p").attr("style", "font-weight: bold;font-size: 30px;");
    
  4. 取代裡面內容

    $("p").html("<span>這是 span 標籤的內容。</span>");
    $("p").text("<span>這是 span 標籤的內容。</span>");
    
  5. 移除元素

    $("p").remove();
    
  6. 新增元素至某處

    $("p").append("<span>這是 span 標籤的內容。</span>"); // 裡面的最後面
    $("p").prepend("<span>這是 span 標籤的內容。</span>"); // 裡面的最前面
    $("p").after("<span>這是 span 標籤的內容。</span>"); // 同層後面
    $("p").before("<span>這是 span 標籤的內容。</span>"); // 同層前面
    
  • jQuery選取器

    • 元素選擇器

      Query 使用CSS 選擇器來選取HTML 元素。
      
      $("p") 選取<p> 元素。
      $("p.intro") 選取所有class="intro" 的<p> 元素。
      $("p#demo") 選取所有id="demo" 的<p> 元素。
      
    • 屬性選取器

      jQuery 使用XPath表達式來選擇帶有給定屬性的元素。
      
      $("[href]") 選取所有帶有href 屬性的元素。
      $("[href='#']") 選取所有帶有href 值等於"#" 的元素
      $("h1[id^='my_']")選取所有h1標籤,且 id 的屬性值開頭等於 my_ 的元素。
      $("[href$='.jpg']") 選取所有href 值以".jpg" 結尾的元素
      $("p[class*='ara']")選取所有p標籤,且 class 的屬性值有包含 ara 字串的元素。
      
    • CSS 選取器

      $("p").css("background-color","red");
      
    • 實例

      https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f1ce7a32-4144-482d-9c6c-7fcf4c71b073/_2021-05-26_2.59.54.png

  • 篩選器

    $("p").first().css("color", "red");
    $("p").last().css("color", "red");
    $("p").eq(0).css("color", "red"); // 第 1 個
    $("p").eq(-1).css("color", "red"); // 倒數第 1 個
    $("p").slice(1, 3).css("color", "red");// 從索引值 1 到 3,但不包含 3
    
  • 事件:$(selector).action()

    $("button").click(function() {$(this).hide() 為隱藏當前元素 } )

    https://api.jquery.com/category/events/mouse-events/

  • CSS操作

    https://api.jquery.com/category/css/

  • jQuery效果

    • 顯示/隱藏

      hide()

      show()

      toggle()

    • 淡入/淡出

      fadeIn()

      fadeOut()

      fadeToggle()

      fadeTo(speed,opacity,callback))

    • 滑入/滑出

      slideDown()

      slideUp()

      slideToggle()

    • 動畫

      $(selector).animate({params}, speed, Easing, callback);

    • 停止動畫

      $(selector).stop(stopAll,goToEnd);


1 則留言

0
shawnchill717
iT邦新手 5 級 ‧ 2021-05-29 01:16:06

看了你的上課筆記,還蠻詳細的
之前上北科大java養成班應該要像你一樣上來做做筆記的Orz
現在才開始希望不會太晚
加油~~

fanny iT邦新手 5 級 ‧ 2021-06-06 18:39:38 檢舉

這其實是我演示的題目~
筆記整理得越好
在寫code的時候比較方便!
我是寫前端的
光是html, css, javascript就有很多語法要記
我又很健忘
所以筆記對我來說省去網路查找的時間!
我使用的筆記是notion

我要留言

立即登入留言