html jQuery

一.對象選擇

1.js 獲取元素(父節點,子節點,兄弟節點)

var test = document.getElementById("test");
　　var parent = test.parentNode; // 父節點
　　var chils = test.childNodes; // 所有子節點
　　var first = test.firstChild; // 第一個子節點
　　var last = test.lastChile; // 最後一個子節點　
　　var previous = test.previousSibling; // 上一個兄弟節點
　　var next = test.nextSibling; // 下一個兄弟節點

2.jquery 獲取元素(父節點,子節點,兄弟節點)

$("#test1").parent(); // 父節點
    $("#test1").parents(); // 所有父節點
    $("#test1").parents(".mui-content");
    $("#test").children(); // 所有子節點
    $("#test").children("#test1");
    $("#test").contents(); // 返回#test裏面的全部內容，包括節點和文本
    $("#test").contents("#test1");
    $("#test1").prev();  // 上一個兄弟節點
    $("#test1").prevAll(); // 以前全部兄弟節點
    $("#test1").next(); // 下一個兄弟節點
    $("#test1").nextAll(); // 以後全部兄弟節點
    $("#test1").siblings(); // 全部兄弟節點
    $("#test1").siblings("#test2");
    $("#test").find("#test1");

3.元素篩選

// 如下方法都返回一個新的jQuery對象，他們包含篩選到的元素
    $("ul li").eq(1); // 選取ul li中匹配的索引順序爲1的元素(也就是第2個li元素)
    $("ul li").first(); // 選取ul li中匹配的第一個元素
    $("ul li").last(); // 選取ul li中匹配的最後一個元素
    $("ul li").slice(1, 4); // 選取第2 ~ 4個元素
    $("ul li").filter(":even"); // 選取ul li中全部奇數順序的元素

---

二.經常使用屬性和方法(增刪改查)

1.元素和標籤的添加

// 如下$A均表示當前jQuery對象，$B能夠是選擇器字符串、html字符串、DOM元素、jQuery對象

$A.before( $B ); // 在$A以前插入$B
$A.after( $B ); // 在$A以後插入$B

$A.insertBefore( $B ); // 將$A插入到$B以前的位置
$A.insertAfter( $B ); // 將$A插入到$B以後的位置

$A.append( $B ); // 在$A內部的末尾位置追加$B
$A.appendTo( $B ); // 將$A追加到$B內部的末尾位置

$A.prepend( $B ); // 在$A內部的開頭位置追加$B
$A.prependTo( $B ); // 將$A追加到$B內部的開頭位置

$A.wrap( $B ); // 在$A的外側包裹$B
$A.unwrap( ); // 只移除$A的父元素的標籤
$A.wrapAll( $B ); // 在整個$A的外側用單個$B將其包裹起來
$A.wrapInner( $B ); // 在$A的內側包裹$B

2.元素的經常使用方法

$A.clone(); // 克隆一個$A
$A.empty(); // 清空$A的全部內容
$A.remove(); // 刪除$A及其綁定的事件、附加數據等
$A.detach(); // 刪除$A，但保留其綁定的事件、附加數據等
$A.replaceAll( $B ); // 用$A替換$B
$A.replaceWith( $B ); // 用$B替換$A

---

三.標籤屬性修改(DOM屬性操做)

1.文本操做

.txet
.html()

2.設置和獲取屬性

.attr() // 設置屬性
.prop()//獲取匹配的元素集中第一個元素的屬性

---

四.經常使用實例

1.jQuery對象和野生js對象互相轉換

$(js對象)  //把js對象轉換爲jQuery對象
$(對象)[0] // 把jQuery對象轉爲js對象

2.綁定事件 .on / .one

$(對象).on(事件,函數())  //綁定事件
$(對象).one(事件,函數())  //綁定一次事件

3.Ecah和forEcah

list.forEach((item)=>{}) //野生js的forEcah返回的第一個元素是對象,第二個是下標
list.forEach((item,index)=>{})  

$(對象).each