jQuery心得3--jQuery入門知識串講2

    續上篇博文jQuery串講1

1.表單物件屬性過濾選擇器

此選擇器主要對所選擇的表單元素進行過濾

2. 表單選擇器

3. jQuery 中的 DOM 操作

DOM(Document Object Model—文件物件模型)：一種與瀏覽器, 平臺, 語言無關的介面, 使用該介面可以輕鬆地訪問頁面中所有的標準元件

DOM 操作的分類:

DOM Core: DOM Core 並不專屬於 JavaScript, 任何一種支援 DOM 的程式設計語言都可以使用它. 它的用途並非僅限於處理網頁, 也可以用來處理任何一種是用標記語言編寫出來的文件, 例如: XML

HTML DOM: 使用 JavaScript 和 DOM 為 HTML 檔案編寫指令碼時,　有許多專屬於 HTML-DOM 的屬性

CSS-DOM:針對於 CSS 操作, 在 JavaScript 中, CSS-DOM 主要用於獲取和設定 style 物件的各種屬性

4.具體功能實現

查詢節點:

查詢元素節點: 通過 jQuery 選擇器完成.

查詢屬性節點: 查詢到所需要的元素之後, 可以呼叫 jQuery 物件的 attr() 方法來獲取它的各種屬性值

建立節點:

使用 jQuery 的工廠函式 $(): $(html); 會根據傳入的 html 標記字串建立一個 DOM 物件, 並把這個 DOM 物件包裝成一個 jQuery 物件返回.

注意:

動態建立的新元素節點不會被自動新增到文件中, 而是需要使用其他方法將其插入到文件中;

當建立單個元素時, 需注意閉合標籤和使用標準的 XHTML 格式. 例如建立一個<p>元素, 可以使用 $(“<p/>”) 或 $(“<p></p>”), 但不能使用 $(“<p>”) 或 $(“<P>”)

建立文字節點就是在建立元素節點時直接把文字內容寫出來; 建立屬性節點也是在建立元素節點時一起建立

插入節點

動態建立 HTML 元素並沒有實際用處, 還需要將新建立的節點插入到文件中, 即成為文件中某個節點的子節點

以上方法不但能將新建立的 DOM 元素插入到文件中, 也能對原有的 DOM 元素進行移動.

刪除節點

remove(): 從 DOM 中刪除所有匹配的元素, 傳入的引數用於根據 jQuery 表示式來篩選元素. 當某個節點用 remove() 方法刪除後, 該節點所包含的所有後代節點將被同時刪除. 這個方法的返回值是一個指向已被刪除的節點的引用.

empty(): 清空節點 – 清空元素中的所有後代節點(不包含屬性節點).

複製節點

clone(): 克隆匹配的 DOM 元素, 返回值為克隆後的副本. 但此時複製的新節點不具有任何行為.

clone(true): 複製元素的同時也複製元素中的的事件

替換節點

replaceWith(): 將所有匹配的元素都替換為指定的 HTML 或 DOM 元素;replaceAll(): 顛倒了的 replaceWith() 方法.

注意: 若在替換之前, 已經在元素上繫結了事件, 替換後原先繫結的事件會與原先的元素一起消失

包裹節點

wrap(): 指定節點用其他標記包裹起來. 該方法對於需要在文件中插入額外的結構化標記非常有用, 而且不會破壞原始文件的語義.

wrapAll(): 將所有匹配的元素用一個元素來包裹. 而 wrap() 方法是將所有的元素進行單獨包裹.

wrapInner(): 將每一個匹配的元素的子內容(包括文字節點)用其他結構化標記包裹起來.

使用 wrapAll() 方法時需要注意要包裝的節點是否屬於 "一組節點", 若不屬於一組, 則會發生 "移動節點" 的副作用

5.屬性操作

l     attr(): 獲取屬性和設定屬性

當為該方法傳遞一個引數時, 即為某元素的獲取指定屬性

當為該方法傳遞兩個引數時, 即為某元素設定指定屬性的值

jQuery 中有很多方法都是一個函式實現獲取和設定. 如: attr(), html(), text(), val(), height(), width(), css() 等.

l     removeAttr(): 刪除指定元素的指定屬性

l     讀取和設定某個元素中的 HTML 內容: html() . 該方法可以用於 XHTML, 但不能用於 XML 文件

l     讀取和設定某個元素中的文字內容: text(). 該方法既可以用於 XHTML 也可以用於 XML 文件.

l     讀取和設定某個元素中的值: val() --- 該方法類似 JavaScript 中的 value 屬性. 對於文字框, 下拉選單框, 單選框該方法可返回元素的值(多選框只能返回第一個值).如果為多選下拉選單框, 則返回一個包含所有選擇值的陣列

6.常用的遍歷節點方法

l     取得匹配元素的所有子元素組成的集合: children(). 該方法只考慮子元素而不考慮任何後代元素.

l     取得匹配元素後面緊鄰的同輩元素的集合(但集合中只有一個元素): next()

l     取得匹配元素前面緊鄰的同輩元素的集合(但集合中只有一個元素): prev()

l     取得匹配元素前後所有的同輩元素: siblings()