jquery js 兄弟父元素的擷取

標籤：空格   動態   children   ack   class   dom   move   previous   str   

jQuery提供的方法

　　上來就把jQuery提供的方法擺在這裡是不是有點不好呀，不過，我們從jQuery的方法名稱上就能知道這些方法是幹嘛的了。

parent(selector)	尋找父元素，可傳入selector進行過濾(下同)
parents(selector)	尋找所有的祖先節點
children(selector)	返回所有的子節點，不過該方法只會返回直接的子節點，不會返回所有的子孫節點
prev()	返回該節點的上一個兄弟節點
prevAll()	返回該節點之前所有的節點
next()	返回該節點的下一個兄弟節點
nextAll()	返回該節點之後所有的節點
siblings()	返回該節點所有的兄弟節點，不分前後
find(selector)	返回該節點所有的子孫節點

　　看完所有的方法之後，我們可以發現：children()只能擷取直接的子節點；而find能擷取所有的子孫節點，當然也包括直接的子節點。

js提供的方法

1 擷取元素節點    // 通過id的方式( 通過id尋找元素，大小寫敏感，如果有多個id只找到第一個)    document.getElementById(‘div1‘);    // 通過類名尋找元素，多個類名用空格分隔,得到一個HTMLCollection(一個元素集合，有length屬性，可以通過索引號訪問裡面的某一個元素)    var cls = document.getElementsByClassName(‘a b‘);    console.log(cls);    // 通過標籤名尋找元素 返回一個HTMLCollection    document.getElementsByTagName(‘div‘);    // 通過name屬性尋找，返回一個NodeList(一個節點集合，有length屬性，可以通過索引號訪問)   var nm =  document.getElementsByName(‘c‘);    console.log(nm);    // 擷取所有form標籤(得到一個HTMLCollection集合）    var form = document.forms;  // html5新加標籤（ie8+）    // document.querySelector(); //  返回單個node，如果有多個匹配元素就返回第一個    // document.querySelectorAll(); // 返回一個nodeList集合

// 2 建立節點

    // 建立元素，只是建立出來並未添加到html中，需要與appendChild 配合使用    var elem = document.createElement(‘p‘);    elem.id = ‘test‘;    elem.style = ‘color: red‘;    elem.innerHTML = ‘我是新建立的節點‘;    document.body.appendChild(elem);    // 建立文本節點 createTextNode    var txt = document.createTextNode(‘我是文本節點‘);    document.body.appendChild(txt);    // 複製節點（需要接受一個參數來表示是否複製元素）    var form =  document.getElementById(‘test‘);    var clone = form.cloneNode(true);    clone.id = ‘test2‘;    document.body.appendChild(clone);    //文檔片段的方式（提升效能）    (function()    {        var start = Date.now();        var str = ‘‘, li;        var ul = document.getElementById(‘ul‘);        var fragment = document.createDocumentFragment();        for(var i=0; i<10000; i++)        {            li = document.createElement(‘li‘);            li.textContent = ‘第‘+i+‘個子節點‘;            fragment.appendChild(li);        }        ul.appendChild(fragment);        console.log(‘耗時：‘+(Date.now()-start)+‘毫秒‘); // 63毫秒    })();// 3 節點修改API    //節點修改APi有兩個特點    // 1 不論新增還是替換節點，如果原本就在頁面上，就會被替換    // 2 修改之後節點本身綁定的事件不會小時    // 1 appendChild ()    // 用法是： parent.appendChild(child)    // 會將child節點添加到parent裡的最後面，如果子節點原本就存在，會移除原節點，添加新節點    // 到最後，但是事件會保留    // 2 insertBefore()    // 用法是 parent.insertBefore(newNode,refNode);    // refNode 是必須傳的 不傳會報錯    // 如果 refNode 是undefined 和null 就會將新節點傳入到parent節點的最後    // 3 removeChild()    // 用法是：parent.removeChild(child)    // 如果刪除的不是父元素的子節點會報錯    // var deleted = parent.removeChild(child)    // deleted 可以繼續引用節點 ，被刪除節點依然存在與記憶體中    // 4 replaceChild()    // 用法是：parent.replaceChild(newChild, oldChild);// 4 節點的關係APi    // 1 父關係API       //  parentNode 父節點       //  parentElement父元素    // 2 子關係API        // children 子項目        // childNodes 子節點        // firstElementChild 第一個子項目        // firstChild 第一個子節點        // lastElementChild 最後一個子項目        // lastChild 最後一個子節點    // 3 兄弟關係的API        // previousSibling 節點的上一個兄弟節點        // previousElementSibling  節點的上一個兄弟元素（ie9以下不支援）        // nextSibling  節點的下一個兄弟節點        // nextElementSibling 節點的下一個兄弟元素（ie9以下不支援）// 5 節點屬性API    // setAttribute(name,value) 給元素設定屬性    // getAttribute(name)   擷取元素屬性// 6 直接修改元素的樣式    elem.style.color = ‘red‘;    elem.style.setProperty(‘font-size‘, ‘16px‘);    elem.style.removeProperty(‘color‘);// 7 動態添加樣式    var style = document.createElement(‘style‘);    style.innerHTML = ‘body{color:red} #top:hover{background-color: red;color: white;}‘;    document.head.appendChild(style);// 8 window.getComputedStyle// 用法是：var style = window.getComputedStyle(element[, pseudoElt]);// element:目標元素的DOM對象 // pseudoElt:指明要匹配的虛擬元素,對於普通元素必須指定為null(或省略)

jquery js 兄弟父元素的擷取