Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
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。
特性:
讓開發人員可以在標籤上自訂屬性,例:data-title、data-name 等。*
號是任意字元,儘量是一般小寫英文字母都可。
可以當做資料儲存的地方。
html:
可以透過以下 jQuery 取得:
也可以透過以下方式重新設定其值:
範例:
html:
可以透過以下 jQuery 取得:
也可以透過以下方式重新設定其值:
範例:
.data() 設定的值並不會真的改到元素上的 data-* 屬性,而是 jQeury 會自己另外記錄下來,好處是有隱蔽性,但不易觀察。
避免 .attr() 和 .data() 混用來操控 data-*,以免混亂。
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 )
參考作法:
建立 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 移除。
完成示意:
參考作法:
說明:貼在元素裡面的最後面。
語法:
範例:
說明:貼在元素裡面的最前面。
語法:
範例:
.after()
說明:貼在同層的下一個。
.before()
說明:貼在同層的前一個。
語法:
範例:
說明:取代原來的元素。
語法:
範例:
說明:該元素用什麼包起來。
html:
執行以下程式:
會變成:
範例:
說明:複製元素。
html:
執行以下程式,就可以複製 <p>這是 div 裡的段落</p>
:
範例:
說明:移除元素。
說明:清空掉元素裡面的所有東西,只保留自己。
說明:移除父元素。
範例: