美文网首页Web 前端开发 程序员
纯干货!jQuery之DOM操作解析

纯干货!jQuery之DOM操作解析

作者: 人生还有多少个二十年 | 来源:发表于2016-12-16 13:40 被阅读0次

    版权声明,文章首发于本人慕课网账号:人生还有多少个二十年,欢迎转载,转载请注明出处

    说明:本文涉及的内容多,为保持整体脉络的清晰,对个别疑难点将另附链接,并不定期对文章的错漏之处进行修正...

    创建节点

    eg: 
    // 用三种方式创建三个段落(包括标签节点、属性节点和文本节点)并添加到文档中去
    $("<p></p>").attr({title:"p1",id:"p1"}).html("这是第一个段落").appendTo("body");
    $("<p></p>",{title:"p2",id:"p2"}).html("这是第二个段落").appendTo("body");
    $("<p title='p3' id='p3'>这是第三个段落</p>").appendTo("body");
    

    查找节点

    eg: 
    // 采用上面已经创建的节点,下面进行查找标签节点、属性节点和文本节点的操作
    var p1 = $("p:first"); // 获取第一个段落节点
    console.log(p1); // 打印标签节点 result: Object[p#p1]
    console.log(p1.attr("title")); // 打印属性节点  result: p1
    console.log(p1.text()); // 打印文本节点  result: 这是第一个段落
    

    插入节点

    1.   $(target).append(content)/$(content).appendTo(target) - 在被选元素的内部的结尾插入内容
         $(target).prepend(content)/$(content).prependTo(target) - 在被选元素的内部的开头插入内容
         $(target).after(content)/$(content).insertAfter(target) - 在被选元的素外部之后插入内容
         $(target).before(content)/$(content).insertBefore(target) - 在被选元素的外部之前插入内容 
    
        详情请看:《一眼看破插入节点的8个方法》    http://www.imooc.com/article/12047
    

    替换节点

    1.$(target).replaceWith(content)/$(content).replaceAll(target)-将目标元素替换为内容
        eg: 
            $("<ul><li>html</li><li>css</li></ul>").appendTo("body");
            console.log($("ul").html());        //result:   <li>html</li><li>css</li>
            $("<li>html5</li>").replaceAll($("ul li:eq(0)"));
            console.log($("ul").html());        //result: <li>html5</li><li>css</li>
            $("ul li:eq(1)").replaceWith("<li>css3</li>");
            console.log($("ul").html());        //result: <li>html5</li><li>css3</li>   
    2.如果替换之前,已经为元素绑定事件,替换后原先绑定的事件将会与被替换的元素一起消失,需要在新元素上重新绑定事件
    

    复制节点

    eg: $(this).clone();        //仅复制节点,不复制元素所绑定的事件
        $(this).clone(true);    //既复制节点,也复制元素所绑定的事件
        如果不理解上面的两句话,自己打一下下面的具体代码,运行一次,应该就能明白了:
        1)html代码:
            <input type="button" value="复制节点">
            <input type="button" value="复制节点,同时复制节点的行为">
        2)引入jQuery库(根据自己的情况自行引入)
        3)script代码:
            $(function(){
                $("input:eq(0)").click(function(){
                    $(this).clone().appendTo("body");
                    });
                $("input:eq(1)").click(function(){
                    $(this).clone(true).appendTo("body");
                    });
                });
    

    删除节点

    $(element).remove()返回值是一个指向删除的节点的引用,因此可以在以后再使用这些元素,但是它绑定的事件、附加的数据无法再次使用了
    $(element).detach()使用之后,重新追加该元素,所有绑定的事件、附加的数据都能够使用
    $(element).empty()严格来说并不是删除节点,而是清空节点,它能清空元素中的所有后代节点
       eg://下面两个例子意在解释empty()
          1)$("<div><p><span>人生有多少个二十年</span></p></div>").appendTo("body");
            console.log($("div").html());       //result:   <p><span>人生有多少个二十年</span></p>
            $("p").empty();
            console.log($("div").html());       //result:   <p></p>
          2)$(element).empty()类比:
            你可以把element看做电脑的回收站,把$(element).empty()看做是清空回收站的操作,把包含在element中的标签节点看做回收站中的文件夹,把包含在element中的文本节点看做是回收站中的文件,而清空回收站就是把回收站里的所有文件夹和文件都彻底删除,并且回收站自身并不会被删除,这就类似于清空节点,该操作把某节点里的所有后代标签节点包括文本节点都彻底删除,但该节点本身没有被删除。
    

    包裹节点

      wrap()将所有匹配的元素进行单独的包裹,在原来的元素的外部实施包裹
      wrapAll()将匹配的元素集合当做一个整体来包裹,在元素的外部实施包裹
      wrapInner()经所有匹配的元素进行单独的包裹,在原来的元素额内部实施包裹
    
    详情请看:《一眼看破包裹节点的方法》    http://www.imooc.com/article/12193
    

    遍历节点

    1.往上遍历
            1)parent() 方法返回被选元素的直接祖先元素,即父元素。
            2)parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)
            3)parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
            4)closest()方法从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素。
    
    2.往下遍历
        1)children() 方法返回被选元素的所有直接后代元素,即子元素。(跟parent()方向恰好相反,一个是往上找,一个是往下查)
        2)find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。(跟parents()方向恰好相反)
    
    3.同级遍历
        1)siblings() 方法返回被选元素的所有同辈元素。
        2)next() 方法返回被选元素的下一个同辈元素。
          nextAll() 方法返回被选元素的后面所有的同辈元素。
              nextUntil() 方法返回介于两个给定参数之间的所有的同辈元素。
        3)prev(), prevAll() 以及 prevUntil() 方法的跟上面三个方法的原理是一样的(都是找同辈元素),但是方向恰好相反(next()/ nextAll()/nextUntil() 是往后找,而prev()/ prevAll() / prevUntil() 则是往前找)。
    
    4.过滤(相当于基本过滤选择器)
        1)first() 方法返回被选元素的首个元素。
          last() 方法返回被选元素的最后一个元素。
          eq() 方法返回被选元素中带有指定索引号的元素。
        2)filter() 方法允许规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
        3)not() 方法返回不匹配标准的所有元素。(not() 方法与 filter() 相反。)
    
    attentions:
        1)此小节内容较多,容易混淆,可以结合我写过的另一篇文章来辅助理解:
        《纯干货!一切关于jquery选择器 》    http://www.imooc.com/article/11319
    

    cssDOM

    1).在css()方法中,如果属性中带有“-”符号,例如font-size和background-color属性,如果在设置这些属性的值的时候不带引号,那么就要用驼峰命名法,例如:
        $("p").css({    fontSize:"30px",backgroundColor:"#888888"});
    如果带上了引号,既可以写成"font-size",也可以写成“fontSize"。
    总之,带上引号是一个好习惯。
    
    2).获取高度值用css()和height()的差别:
    css()方法获取的高度值与样式的设置有关,可能得到"auto",也可能得到“10px”之类的字符串;而height()方法获取的高度值则是元素在页面中的实际高度,与样式的设置无关,并且不带单位
    
    3).css ()与addClass()设置样式的区别
    1)可维护性:addClass()优于css()
    2)灵活性:css()优于addClass()
    3)样式值:css()可以获取到指定的样式值,而addClass()无法获取指定的属性的值。
    4)样式优先级:css()的样式优先级高于addClass()。(理由:addClass()方法是通过增加class名的方式,那么这个样式是在外部文件或者内部样式中先定义好的,等到需要的时候附加到元素上;css()处理的是内联样式,直接通过元素的style属性附加到元素上)
    总结:两个方法各有利弊,一般是静态的结果,都确定了布局的规则,可以用addClass的方法,增加统一的类规则;如果是动态的HTML结构,在不确定规则,或者经常变化的情况下,一般多考虑css()方式。
    
    4).总结样式操作:
    js中:
        1)通过类名: element.className = theClassName或者element.setAttribute("class",theClassName)
            eg: document.getElementById("p1").className = "active";
                或document.getElementById("p1").setAttribute("class","active");
        2)通过element.style
            eg: document.getElementById("p1").style.color="blue";
    
    jquery中:
        1)通过类名: $(element).addClass(theClassName)或者$(element).attr("class",theClassName)
            eg: $("p1").addClass("active");
                或$("p1").attr("class","active");
        2)通过css()
            eg: $("p1").css("color","blue");
    

    jQuery-尺寸

    - width()/height()方法设置或返回元素的宽度/高度(不包括内边距、边框或外边距)。
    - innerWidth()/innerHeight()方法返回元素的宽度/高度(包括内边距)。
    - outerWidth()/outerHeight()方法返回元素的宽度/高度(包括内边距和边框)。
    - outerWidth(true)/outerHeight(true)方法返回元素的宽度/高度(包括内边距、边框和外边距)。
    
    attentions:
    根据盒子模型,可知:
    - width()/height()获得的是盒子模型最内层(content)的宽、高
    - innerWidth()/innerHeight()获取的是盒子模型内两层(content、padding)的宽、高
    - outerWidth()/outerHeight()获取的是盒子模型内三层的(content、padding、border)宽、高
    - outerWidth(true)/outerHeight(true)获取的是盒子模型的整个盒子(content、padding、border、margin)的宽、高
    

    盒子模型图:

    盒子模型

    相关文章

      网友评论

        本文标题:纯干货!jQuery之DOM操作解析

        本文链接:https://www.haomeiwen.com/subject/zsunmttx.html