Dom是Document Object Model的縮寫,意思是文檔物件模型。 DOM是一種與瀏覽器、平台、語言無關的接口,使用該接口可以輕鬆存取頁面中所有的標準元件。
DOM操作可以分為三個面向即DOM Core(核心)、HTM-DOM和CSS-DOM。
jQuery DOM 元素方法
函數 | 描述 |
---|---|
.get() | 取得由選擇器指定的 DOM 元素。 |
.index() | 傳回指定元素相對於其他指定元素的 index 位置。 |
.size() | 傳回被 jQuery 選擇器所符合的元素的數量。 |
.toArray() | 以陣列的形式傳回 jQuery 選擇器相符的元素。 |
1.attr() .removeAttr()
.attr() 方法可以傳入一個名值對的參數,也可以傳入一個包含2個以上名值對的物件參數,例如:
.attr('src','images/a.jpg');
.attr({ rel:'www', id:'zz', title:'some', some:'111' });
當然,也可以移除一個或一個以上屬性.removeAttr('id rel');
2.prop()
此方法可以取得屬性值
傳入想要取得的值的屬性名稱(字串),例如.prop('id');
設定id的值(修改DOM本身存在的屬性例如a標籤的href,id)
.prop('id','otherid');
3.val()
這個方法常用來取得表單控制項的值
4.insertBefore() .insertAfter() .prependTo() .appendTo()
.insertBefore()在現有元素外部、之前加入內容;(反向操作 .before())
.insertAfter()在現有元素外部、之後加入內容;(反向操作 .after())
.prependTo()在現有元素內部、之前加入內容;(反向操作 .prepend())
.appendTo()在現有元素內部、之後加入內容;(反向操作 .append())
5.clone()
此方法可以複製拷貝元素,如果需要複製出來的元素繼承其他事件,則需要傳入一個布林值作為參數,.clone(true)
6.wrap() .wrapAll() .wrapInner()
.wrap()和.wrapInner()可以理解成相對的,.wrap()是包在元素外面一層,而.wrapWith()是包在元素裡面一層,
而.wrapAll()是在所有匹配到的元素外圍包裹
7.html() .text() .replaceWith() .replaceAll()
.html()可以傳入文字或DOM節點;
.text()只能讀取或替換文字;
.replaceWith() 把。 。 。替換“成”。 。 。 ;
.replaceAll() 把。 。 。替換“給”。 。 。
8.empty()
移除元素
9.detach() .remove()
這2個方法有點相似,都不會把符合的元素從jQuery物件中刪除,但還是有所區別:
.detach() 所有綁定的事件、附加的資料等都會保留下來
.remove() 除了這個元素本身得以保留之外,其他的比如
綁定的事件,附加的資料等都會被移除。