Skip to content

jQuery 基礎

目錄
簡介
語法架構
選擇器
事件處理
事件物件
更新style
取用/更改元素
刪除/加入元素
總結

簡介

jQuery是一個讓JS輕量化的套件，大大簡化JS以下功能的語法

  • 操作DOM元素
  • 更動CSS
  • 事件處理
  • 動畫與效果、AJAX…等其他進階功能

並且jQuery是google、微軟等大公司也有在使用、維護的套件，因此質量有保證

起手式

引入原始碼

使用jQuery，當然首先要在html檔中include jQuery原始碼， 可以選擇本地下載後引入，或是使用Google雲端版

以google雲端版為例

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

Ready function

JQuery的撰寫通常都會用以下function為起頭 
$(document).ready(
   function(){
   	// all your jquery code here

   }
)

簡單來說
\$ 代表jQuery的起頭
\$ (document)代表當前網頁
ready代表一個行為，表示等到當前網頁全部ready 才執行function

其目的是等所有元素都載入完成，才執行jQuery，否則可能太早選取而選不到還未載入的元素

而這個起手式可以簡化成

$(function(){
  	// all your jquery code here
}
)

語法架構

jquery幾乎由
$(選擇器).行為()
這個架構組成

選擇器(selector)可以選擇要針對哪一個網頁元素(比如 tag、當前網頁…)

行為()則可以包含事件監聽、元素操作等Jquery所有提供的功能

比如

$(".example1").click(function(){  //事件監聽內要放一個執行function
	$(".example2").hide()
})

表示當class="example1"的元素被click時，將class="example2"這個元素隱藏

外層是選取class="example1”，行為是監聽click這個事件
內層是選取class="example2”，行為是隱藏元素

以下是一個例子

==========

click me(text)

:)

==========

這例子告訴我們:

  1. 監聽事件的參數是當事件發生時的執行函數
  2. 任何元素都可以監聽包含click等事件，不一定需要是按紐
    在接下來會做更深入的探討

選擇器(selector)

由上例我們可以知道語法架構上
會先以選擇器指定網頁DOM元素
接著再寫入要對該元素做的行為

Jquery的選擇器語法採用與CSS選擇器大致相同

除了常用的
tag , class ,id ,屬性
子孫 ，直屬子孫 ，多重
以外，這邊介紹指定位置選擇器

指定位置選擇器 :nth-child(n)

可以選擇元素的第n個子代
比如以下是一個list

<div>
  <p> 水果清單 </p>
  <ul>
    <li> 香蕉 </li>
    <li> 蘋果</li>
    <li> 芒果 </li>
  </ul>
</div>

單以這段code來說，可以轉換成以下的樹狀結構

可以了解到parent , child 及其child順序在code上是十分直觀的

而nth-child() 則是先選擇該元素，然後再看該元素是否是第n個子代

比如
\$(“div p:nth-child(1)") 會選到 <p> 水果清單 </p>
\$(“ul li:nth-child(2)")會選到 含蘋果的 li

但
\$(“div p:nth-child(2)") 不會選到任何東西，因為此例中沒有p 是第2個子代

  • Note 其他位置選擇器還有
    :first , :first-child , :even , :odd 但因為比較直觀且有些包含於nth-child,因此不特別介紹

事件處理(Event handler)

事件處理也是依照 $(選擇器).行為() 的架構

只是行為的參數通常是回應事件的函數
也就是 $(選擇器).監聽事件(function(){回應函數})
上一節的click()就是一個例子

以下舉例幾個特別的event function，更多event function可以參考這裡

hover()

在滑鼠於元素上與元素外的事件，可以說是mouseenter(), mouseleave() 的結合
如

$(function(){
		$("selector").hover(function(){
  				//enter;
			},
			function(){
  				//leave;
			});
	})

以下是一個例子

==========
hi

==========

on()

類似socket.io內的on()，可以以event:eventFunction的方式註冊多個 event function

比如

$("p").on({
  mouseenter: function(){
    $(this).css("background-color", "lightgray");
  },
  mouseleave: function(){
    $(this).css("background-color", "lightblue");
  },
  click: function(){
    $(this).css("background-color", "yellow");
  }
});

focus()/blur()

用於form 這個元素，在選取準備輸入(在input上出現輸入光標)時是focus，離開時是blur()

keypress()

按下任何鍵盤按鍵就會觸發

如果要判斷是哪一個按鍵，則會需要使用Event Object，因此以下先介紹 Event Object

注意目前可能只能綁定input這個tag

Event Object

Event Object是一個可作為event handler反應函數輸入參數的物件，會記錄該發生事件的詳細資料，也會提供method供使用者與事件互動(如 preventDefault()可以取消該事件預設反應)
參考這裡

而keyboard、mouse ..等各類型的事件基本上就是繼承Event Object而成的各類型event object，會額外紀錄各種特殊資訊

比如MouseEvent內會有當前滑鼠的位置座標(ClientX,ClientY)、KeyBoardEvent內會有哪一個按鍵被壓下(key) … 等等

使用方法


作為回應函數的參數使用 \\$(選擇器).監聽事件(function(event){回應函數})

整合上一節所講到的keyboard

以下是一個例子

==========
press s to show,press h to hide

==========

重點程式碼如下

    $("input").keypress(function(event){
          console.log("hello");
          if (event.key == "h"){
            $("div").hide();
          } 
          else if(event.key == "s"){
            $("div").show();
          } 
      }

可以看出event可做為參數傳入，並且這裡的"event"只是一個變數名字
只要使用事件監聽函數，都會有此輸入參數

更新style

如果需要更新網頁排版位置、字體、顏色、大小 … 等style
就會自然的想到要用CSS

而jQuery也提供css修改函式

\$(“selector”).css(“property”, “value”)

而CSS的property可以參考這裡

以下是一個例子

==========
color

==========

核心程式碼:

$("#e6").click(function(){
          $(".example6").css("color","red");
      }

取用/更改 元素內容

text,html,val

取用元素最常使用三個函式
text() , html() , val()
分別代表指定元素的文字、html檔

val() 是特別用在input等跟使用者互動的tag裡面，去取使用者輸入的值
(eg: 聊天室
val = $(“input”).val()
$(“input”).val("") //也可以用來clean
)

若不指定內容(括號內不給變數)，則會回傳其值內容
若給變數，則會修改為變數內容

例如以下code

<div>
  <p> hello world </p>
</div>

執行
\$(“div”).text() 會回傳 hello world (所有子代的文字) \$(“div”).html() 會回傳 <p> hello world </p>

而若想要修改
只需要\$(“div”).text(":)") 就可以將 hello world 變更為笑臉

attr()

使用規則類似於上面

加入/刪除 元素

加入元素

加入元素可以使用 append() , prepend() (在內部插入) 以及 before() ,after() (在外部插入)

通常以html element作為參數

以以下code為例

<div>
  <p id="list"> 水果清單 </p>
  <ul>
    <li id="banana"> 香蕉 </li>
    <li id="apple"> 蘋果</li>
    <li id="mango"> 芒果 </li>
  </ul>
</div>

若想要在芒果之後加入橘子
可以使用 $("ul").append("<li id="orange"> 橘子 </li>") 或是 $("#mango").after("<li id="orange"> 橘子 </li>") 兩者可以達到一樣的效果，但append是在ul這個parent的尾部加上一個child
after則是單純在mango之後加上一個element

prepend, before則是一樣的概念，只是指定位置不同

  • Note 如果做一個聊天室，則每一個訊息就可以用append不斷加入在畫面上

刪除元素

可以單純使用remove()即可

總結

jQuery 格式必為 $(選擇器).行為()

行為在此章介紹了四種

  • 事件
$(選擇器).事件(function(event){
  //do something  
})

事件清單
事件物件

  • CSS 選擇器
$(選擇器).css("property:value")

CSS列表

  • 取值/設值 (以text為例)
$(選擇器).text() //get
$(選擇器).text("something here") //set
  • 插入/刪除元素 (以append為例)
$(選擇器).append("html content here") 
$(選擇器).remove() //remove

此外jQuery 也有AJAX、動畫..等等強大的功能，未來有機會再介紹

參考資料

https://www./3schools.com/jquery/default.asp

存放文章數: 53

連結

分類