<HeadFirst_jQuery> O’REILLY_Chap.4_jQuery Web頁面管理

本部落格的FollowMeReading系列初衷是線上的讀書筆記. 為方便後期查閱, 故寫成部落格形式, 使用關鍵字查詢便可以快讀的找到相關的內容.

FollowMeReading系列所選的書籍一般選自O’REILLY或Apress出版社, 儘量保證筆記內容的權威性.

FollowMeReading系列的部落格標題格式為: <書名> 出版社章節數章節名, 方便大家在紙質版書籍中查詢.

FollowMeReading系列博文中的內容大部分是原文, 非原文部分前面將有’博主’字樣提醒.

感謝<HeadFirst_jQuery>作者 Ryan Benedetti & Ronan Cranley
感謝<HeadFirst_jQuery>翻譯 林琪

本部落格由@scott編寫. 若轉載此文章, 請註明出處和作者

正文

原文

BULLTE POINTS(要點):

• $("myElement").remove() remove方法從DOM中完全刪除.

• $("myElement").detach() detach方法將選擇的元素取出, 但會維護這些元素, 以後可以重新關聯.

• DOM會構建為一棵樹. 它有一個根, 有分支, 還有節點. 瀏覽器的JavaScript直譯器可以遍歷(並管理)這個DOM, jQuery在這方面尤其擅長. DOM遍歷就是在DOM中上下爬行.

• $(".fish").parent() 得到上面的元素.

• $(".fish").children() 得到下面的元素.

• $(".fish").prev() 得到它左邊緊鄰的兄弟元素.

• $(".fish").next() 得到它歐彼岸緊鄰的兄弟元素.

• $("myElement").empty() 刪除元素中的內容.

• $("myElement").parents() 所選元素的所有父元素.

• $("myElement").closest() 所選元素最近的父元素.

• $("myElement").siblings 遍歷所選元素同一層上的所有元素.

• $("myElement").replaceWith()

  替換元素.

• $("myElement").before() 將新內容插入到選擇的元素前面.

• $("myElement").after() 將新內容插入到選擇的元素後面.

• $("myElement").children().first() 第一個元素

• $("myElement").children().last() 最後一個元素

• $("myElement").eq(2) 第三個元素.

• $("myElement").children().slice(1, 5); 介於索引1和5之間的是元素, 不包括索引1和5的元素

• $("myElement").children().filter(".organic"); 過濾出選擇器”.organic”的元素.

• $("myElement").children().not(".local"); 過濾掉與選擇器不匹配的元素.

• $("myElement").children().find("li") 找到陣列中的元素.

• $("img#oreilly").wrap("<a href='....'></a>") 把oreilly影象包含在一個 <a> 元素中.