淺談 jQuery

| kindping

針對 jQuery 基本使用進行說明。

jQuery 是一個以 Javascript 來編寫的函式庫，簡單來說就是先幫你實作了很多 Javascript 的函數功能，用途是讓開發者可以更輕鬆方便的製作網站功能，最重要的是它是免費的。

特色

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

代表符號

jQuery 使用 $ 為代表符號。

當有其它套件也使用 $ 為代表符號時，可以利用 noConflict 來作轉換。

var jq = jQuery.noConflict();

或是直接使用 jQuery 來處理。

使用

引入 jQuery 檔案

https://jquery.com/download/

例如

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

抓取 DOM

直接使用 $(seletor) 就可以抓取了。

<div id="content-block">Content!!!</div>

抓取

let content = $('#content-block');

取出內容

content.val(); // 取值
content.html(); // 取得內容

val() 等同原生 value

html() 等同原生 innerHTML

效能