jquery js 兄弟父元素的获取

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery js 兄弟父元素的获取相关的知识,希望对你有一定的参考价值。

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 兄弟父元素的获取的主要内容,如果未能解决你的问题,请参考以下文章

jquery js 兄弟父元素的获取

js和jquery获取父级元素子级元素兄弟元素的方法

js或jquery如何获取父级子级兄弟元素(包括祖级孙级等)

jquery 获取元素(父节点,子节点,兄弟节点)

js或jquery如何获取父级子级兄弟元素(包括祖级孙级等)

jquery如何获取某一个兄弟节点,不是全部的,是指定的兄弟节点