讀 [1]-選擇器及DOM操作

今天是小年了，2013馬上要過去了，但是學習不能間斷啊。最近正在看《jQuery權威指南》，先溫習一下選擇器和DOM操作。

---

一、基本選擇器

1.table單雙行：

$(function () {

            $( "#tbStu tr:nth-child(even)" ).addClass("trOdd");

        })

2.jQuery完善的檢測機制：

     傳統js處理對象時要首先判斷是否存在；jQuery具有較完善的檢測機制不需要判斷，即使該元素不存在，也不會出現錯誤提示。

3.選擇器

①基本選擇器：

②層次選擇器

注意：

• $(“ancestor descendant”)是祖先與后代關系，而$(“parent child”)是父級與子級關系；
• $(“prev+next”)可以使用.next()代替，表示prev后面緊鄰的兄弟元素；而$(“prev~siblings”)等同於.nextAll()，表示prev后面所有兄弟元素；siblings()方法表示獲取全部的兄弟元素。

③過濾選擇器：

二.DOM操作

1.訪問元素

①元素屬性操作-- attr()

• 獲取元素屬性：attr(name)
• 設置元素屬性：

attr(key,value);

attr({key1:value1, key2:value2})

attr(key,function(){}):函數返回值作為屬性值。

• 刪除元素屬性：removeAttr(name)

②元素內容操作-- html(),text()

③獲取或設置元素值-- val()

設置元素值：val(value)

獲取元素值：val()

獲取select多個選項值：$("select").val().join( ",")

設置多個選中：val(array)。

④元素樣式操作

css(name,value):設置樣式

addClass("class0 class1"):添加樣式

toggleClass(name)：切換樣式

removeClass(name):刪除樣式，如果有參數則刪除指定類，否則刪除所有class。

2.DOM-創建節點

$(html)：用於動態創建節點。要注意是否閉合。

3.DOM-插入節點

①內部插入節點

②外部插入節點

4.DOM-復制節點

clone():復制元素，不復制行為。

clone(true):復制元素，同時復制行為。

5.替換節點

replaceWith(content)

replaceAll(selector)

替換完成后元素的事件全部消失。

6.包裹節點

7.刪除元素

remove([expr])：選擇元素節點后刪除該節點及其后代元素。

empty()：清空元素及其后代元素。