Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
接案 自由工作者 Freelancer
成立 粉絲頁 ,分享網站知識及文章。
成立 卡斯有限公司,承接主機代管、前端開發、網站架設等服務。
於台北及中壢資策會教學網站設計開發相關領域課程。
2009 年:進入職場,曾任職於中視、華視、Yahoo!、新創公司。
2013 年:全職的網站前端自由工作者。
2016 年:成立卡斯有限公司:承接網站設計開發、主機代管。
2017 年:承接標案
2018 年:網站相關教學
2019 年:合夥存股管家
張互賓/Carlos
個人 email: chang.abin@gmail.com
希望 學員/讀者 在這學習領域中,有遇到任何問題,可直接與我聯繫,盼能協助各位在這領域上精進。
點進去官網網址後,如下圖,看到「Download jQuery」按鈕,點進去。
然後出現如下畫面:
找到上圖的連結文字「Download the compressed, production jQuery 3.4.1」,點擊進去,出現如下畫面:
在 jquery/practice/vendors/jquery/
資料夾中,建立檔名 jquery-3.4.1.min.js
,然後將上圖的原始碼全部複製,貼進剛建立的檔案並儲存。
然後在頁面上載入,開啟 jquery/practice/index.html
檔案,改成如下(載入 jQuery 檔案,放在 </body>
之前):
在該頁面就可以使用 jQuery 函式庫了。
在下載頁面當中,找到「Google CDN」的連結,如下畫面:
然後點擊進去,複製下圖圈選起來的 script 標籤原始碼:
即:
將上述 script 標籤,放到你要載入的頁面即可,建議放在 </body>
之前。
直接按 Settings → JS
,搜尋 jquery
,選擇正確的版本,再按 Save & Close
即可。如下示意:
是一個 JavaScript 「函式庫(Library)」,執行於瀏覽器端,主要提供了以下好處:
跨瀏覽器一致性的 API
animation 動畫效果
頁面 DOM 處理
各種事件監聽
AJAX 機制
已經預設寫好的一些函式
可自行寫 jQuery Plugin
截至 2024/03,最新版本為 3.7.1
。
請透過以上的「搜尋」,試著查看看以下三個 API 的說明:
width()
innerWidth()
outerWidth()
範例觀察:
先在電腦桌面(或其它習慣的位置)建立一個 jquery
資料夾,然後在該資料夾內,再建立以下資料夾及檔案:
assignment/
practice/vendors/jquery/
practice/index.html
index.html
檔案內容如下:
之後的練習都會在 jquery/practice/
資料夾內。
之後的作業會在 jquery/assignment/
資料夾內。
網址:
網址:
以下範例,直接在 practice/selectors.html
頁面中測試觀察:
找到的所有項目中的第一個。例:
找到的所有項目中的最後一個。
第幾個元素,從 0 開始,0 代表第一個。以此類推。
-1
代表倒數第一個;-2
代表倒數第二個。以此類推。
從索引值開始(start),到最後的索引值(last),但並不包含最後一個。
如果 last 沒有提供,就是直接取到最後一個。
用來判斷是否符號指定的規則。
在 practice/selectors.html
新增以下原始碼:
例:同層前一個
例:同層下一個
在 practice/selectors.html
頁面中,新增以下原始碼:
例:往父層找,找到第一個符合 el 的元素:
例:找到第一層子元素
例:找到第一層子元素為 p 標籤的元素:
例:一直往內層找(不只是第一層子元素),找到所有的 p 標籤的元素:
只要透過 $.fn
就可以寫一個基於 jquery 專用外掛。
先參考 IIFE(Immediately Invoked Function Expression) 範例:
步驟一:在 IIFE 裡面寫
步驟二:在 IIFE 裡代入 jQuery 參數,這是為了避免跟其它函式庫有命名上的衝突,jQuery 代入,由 $
變數承接:
步驟三:在 $.fn 繼續撰寫基於 jQuery 相關的自訂程式,並回傳 jQuery 物件
自訂 .externalLinkIcon()
,如果 <a>
標籤有 target="_blank"
的話,在標籤裡的最後面,加上一個 icon 做示意。
icon 路徑:
https://alldata.sgp1.digitaloceanspaces.com/images/external_link.png
提供 html:
提供 css:
完成如下圖,有 target="_blank"
的連結,右邊多了小 icon:
參考作法:
$("p")
:找到標籤名稱為 p 的元素。
$("h1")
:找到標籤名稱為 h1 的元素。
$("#my_id")
:# 表示的是 id,即找到 id 為 my_id 的元素。
$("h1#my_title")
:找到 h1 標籤,且 id 為 my_title 的元素。
$(".my_style")
:. 表示的是 class,即找到 class 為 my_style 的元素。
$("p.my_style")
:找到 p 標籤,且 class 為 my_style 的元素。
請先建立 practice/selectors.html
檔案,用於練習,內容如下:
試著輸入以下例子,看是否有效:
DOM = Document Object Model,中文即「文件物件模型」。
建立 jquery/practice/dom.html
檔案,內容如下:
瀏覽器解析以上 html 後,產出的 DOM tree:
用瀏覽器開啟檔案,按下 Cmd + Option + i
或 F12
,如下圖的 Elements 頁籤,展開看看,這就是瀏覽器將你寫的 html 解析出來的 DOM Tree:
試著加上以下的原始碼(可放在 </body>
之前):
再到上述提的 Elements 頁籤觀察看看,出了什麼問題?
javascript 本身並沒有 window、document 這種物件,這是瀏覽器解析完之後,提供給開發人員使用的,例如:
window.alert()
document.getElementById()
元素.setAttribute()
元素.getAttribute()
以上這些其實都是 DOM Scripting。
以中括號 [ ] 代表該標籤的屬性。
$("[id='my_title']")
:不指定標籤,只要 id 等於 my_titile,即可取到元素。
$("h1[id='my_title']")
:h1 標籤,且 id 等於 my_titile 的元素。
$("h1[id!='my_title']")
:h1 標籤,且 id 不等於 my_title 的元素。
$("h1[id^='my_']")
:h1 標籤,且 id 的屬性值開頭等於 my_
的元素。
$("h1[id$='tle']")
:h1 標籤,且 id 的屬性值結尾等於 tle
的元素。
$("p[class*='ara']")
:p 標籤,且 class 的屬性值有包含 ara
字串的元素。
延續 practice/selectors.html
頁面,請試試以下例子:
$("p:first-child")
:找到 p 標籤,然後相對於父元素,如果是第一個子元素的話,就符合。
$("p:last-child")
:找到 p 標籤,然後相對於父元素,如果是最後一個子元素的話,就符合。
$("p:only-child")
:找到 p 標籤,然後相對於父元素,如果是只有自己一個元素的話,就符合。例如以下的段落就符合:
$("p:nth-child(3)")
:p 標籤且是第3個子元素,就符合。
延續 practice/selectors.html
頁面,試以下例子:
html:
「取值」語法:
「設定值」的語法:
範例:
type 等於 password、hidden 等類似一般文字框,操作都一樣。
語法:(取得 textarea 的內容)
語法:(設定 textarea 的內容)
如果要斷行,要用 \n
。
範例:
html:
語法:
範例:
語法:
或:(使用 .eq(index)
,索引值 0 開始)
範例:
語法一:特定值
語法二:使用 .eq(index)
,索引值 0 開始
範例:
語法:透過 :selected
取得已選到的那個 option:
語法:取得該 option 的文字:
語法:取得特定 option 的文字:
範例:
語法:
範例:
語法:(有無勾選,回傳 true 或 false)
範例:
語法:
範例:
語法:(會取到複數個)
勾選的個數有幾個:
留意 :checked 左邊沒有空格;在 select 下拉選項的 :selected 的左邊是有空格的。
範例:
html:
語法:
範例:
語法:取得有選到的那項的值
範例:
語法:
範例:
建立 practice/check_all.html
來練習,提供 html:
撰寫 jQuery 語法,完成如下影片示意:( https://youtu.be/7pMgVOY70os )
參考作法:
特性:
讓開發人員可以在標籤上自訂屬性,例:data-title、data-name 等。*
號是任意字元,儘量是一般小寫英文字母都可。
可以當做資料儲存的地方。
html:
可以透過以下 jQuery 取得:
也可以透過以下方式重新設定其值:
範例:
html:
可以透過以下 jQuery 取得:
也可以透過以下方式重新設定其值:
範例:
.data() 設定的值並不會真的改到元素上的 data-* 屬性,而是 jQeury 會自己另外記錄下來,好處是有隱蔽性,但不易觀察。
避免 .attr() 和 .data() 混用來操控 data-*,以免混亂。
使用者與網頁有互動操作。例:
開啟網頁
滑鼠滑過元素
點擊元素
一般文字框的焦點輸入(focus)
打字
送出表單資料
視窗拖曳改變大小
找到要綁定的元素
什麼樣的事件綁定,例:click、dblclick。
事件觸發後,要執行什麼程式,通常會是一個帶有事件物件(Event Object)的函式。
事件觸發後,除了自訂邏輯之外,事件物件當中,重要的兩個:
停止預設行為(e.preventDefault()
)
停止事件冒泡(e.stopPropagation()
)
說明:貼在元素裡面的最後面。
語法:
範例:
說明:貼在元素裡面的最前面。
語法:
範例:
.after()
說明:貼在同層的下一個。
.before()
說明:貼在同層的前一個。
語法:
範例:
說明:取代原來的元素。
語法:
範例:
說明:該元素用什麼包起來。
html:
執行以下程式:
會變成:
範例:
說明:複製元素。
html:
執行以下程式,就可以複製 <p>這是 div 裡的段落</p>
:
範例:
說明:移除元素。
說明:清空掉元素裡面的所有東西,只保留自己。
說明:移除父元素。
範例:
click 事件的寫法,使用 .on()
:
範例:
如果要停止事件冒泡狀況發生,在正確的位置執行以下程式:
範例:燈箱(或稱做 modal)。
mouseenter:滑鼠移入時觸發。(不會發生冒泡狀況)
mouseleave:滑鼠移出時觸發。(不會發生冒泡狀況)
範例:
mouseover:滑鼠移入時觸發。(會發生冒泡狀況)
mouseout:滑鼠移出時觸發。(會發生冒泡狀況)
範例(不用背,要會觀察):
說明:滑鼠游標在元素上移動時觸發。(會發生事件冒泡狀況)
範例:5_4_mousemove.html
以下寫法為例,事件觸發時,this 指的就是那個元素。
所以可把 this 丟到 jQuery 函式中,使用 jQuery 提供的函式:
範例: 5_4_this.html
連結的預設行為是是將連結開啟。可以透過以下程式來停止:
範例:5_4_link_prevent_default.html
停止「表單資料送出的預設行為」。
停止「文字出現在欄位上的預設行為」。
建立 jquery/practice/form_submit.html
檔案,內容如下:
說明:表單送出事件的寫法:
接著請撰寫以下兩個:
如果沒有填寫資料,表單不能送出,然後用 alert()
顯示「請輸入資料」。
如果有填寫資料,就表單按鈕原來預設的形式將資料送出。
參考作法:
html 部份:5_5_dynamic_binding.html
js 部份:
請藉由以下範例,瞭解上述兩段 js 程式的差異:
建立 jquery/practice/4_8_practice.html
,
提供 html:
提供 CSS:
事件綁定的範例(以 click 為例):
註:HTML 、CSS 部份,都不用在做任何更新,主要撰寫 jQuery 程式。
初始狀態示意:
然後撰寫 jQuery 程式,完成以下:
透過按鈕,將 h1 標題部份,加上 title1 這個 class。
透過按鈕,將 p 段落部份,移除 title1 這個 class ,並加上 para 這個 class。
透過按鈕,將 a 連結裡面的文字內容,換成「Yahoo! 網站
」。
在文字框欄位,觸發 blur
事件時,將文字框的文字,放在 ul.list 裡面的最前面。也就是新增新的一項 li,文字放在 li 裡。然後文字框欄位要清空。如果使用者沒有輸入任何文字,就不新增。
「移除」按鈕按下去時(click),該項的 li 移除。
完成示意:
參考作法:
分別觀察以下程式:
代入完成動畫效果之後所要執行的函式參數,例:
範例:6_1_hide_show.html
需在「開發者工具」中,看是什麼發生了變化。為何隱藏、為何出現。
分別觀察以下程式:
範例:6_1_fade.html
分別觀察以下程式:
範例:6_1_slide.html
以上都可代入最後的函式參數,代表跑完動畫效果後,所要執行的自訂程式。
範例:6_1_modal.html
在 assignment
資料夾下,建立以下資料夾及檔案:
index.html
css/index.css
js/index.js
vendors/jquery/jquery-3.4.1.min.js
提供 html 及 CSS:
完成以下項目:
index.html 頁面需載入 jquery 以及 index.js
input.task_name
在 focus 事件觸發時,div.task_add_block
加上 -on
class。
input.task_name
在 blur 事件觸發時,div.task_add_block
移除 -on
class。
結果示意:
更新 html、css:
新增待辦事項的 html:
完成以下項目:
按下「新增」按鈕時,將以上的待辦事項 html,新增到 ul.task_list
裡,新增到裡面的最前面。
如果沒有輸入待辦事項,按「新增」的話,不能有任何反應。
新增成功的話,待辦事項欄位要清空。
輸入的待辦事項,如果文字的最左邊、最右邊有空格,需移除。(語法:JS 內建的 trim()
函式)。
按下「Enter」鍵,也要能新增待辦事項。
更新 index.html:
將以下這行放到 h1 標籤之前:
更新 index.css:
完成以下項目:
按下「移除」按鈕,淡出 1 秒,然後移除該筆待辦事項。
按下「清空」按鈕,淡出 1 秒,清除全部的待辦事項。
index.js,待辦項目更新以下結構,以老師自己寫的為例,有以下這行:
在其下方,加上這行(留意有加上 -none
這個 class):
更新 index.css:
完成以下項目:
按下「更新」按鈕,出現一般文字框,然後可以更新。
再按下「更新」按鈕,回到不可編輯的狀態,但待辦事項要是更新的。
如果所更新的待辦事項,沒有輸入文字,跳出提醒視窗(alert),顯示「請輸入待辦事項」。
待辦事項的文字若最左邊、最右邊有空格的話,需移除。
更新 index.css:
jQuery 其它提示:(以下這行可以判斷父層裡的 li,它是不是第一個子元素)
jQuery 其它提示:(以下這行可以判斷父層裡的 li,它是不是最後一個子元素)
完成以下項目:
按下「往上」按鈕,與上面的待辦事項對調。(註:每個待辦事項是以 li
為單位。)
按下「往下」按鈕,與下面的待辦事項對調。
第一個的待辦事項,「往上」按鈕按了要沒反應;最後一個的待辦事項,「往下」按鈕按了要沒反應。
更新 index.css:
完成以下項目:
點擊星號的時候,該星號加上 -on
這個 class,然後該筆待辦事項,星號數( data-star
)小於等於點擊的星號數的話,也要加上 -on
這個 class;反之則移除。
結果示意:
最晚繳交日期:0/(日) 晚上 12 點之前。
先將 assignment
資料夾壓成壓縮檔,然後透過以下網址繳交:
結果示意:( )
結果示意:
結果示意:
結果示意:
結果示意:
前端班:
Java 班: