• DOM操作二三事


    我突然想起了append(),但是我记不太清它是原生JS的还是jQuery封装的,貌似是JS的,咦?那它在jQuery里叫什么来着?哎呀!记不清了!确定append()是JS里的?不是jQuery里的?哎呀!这个问题好low啊,要是被那些大牛知道得笑死我了!赶紧偷偷整理一下!

    获取节点内容/修改节点内容

    原生JS方法

    <div id="test">test</div>
    <script>
        alert(document.getElementById("test").innerHTML);
        document.getElementById("test").innerHTML += "test";
    </script>

    jQuery方法

    text()

    <div id="test"><h1>test</h1></div>
    <script>
        //返回test
        alert($("#test").text());
        $("#test").text(" new test");
    </script>

    html()

    <div id="test"><h1>test</h1></div>
    <script>
        //返回<h1>test</h1>
        alert($("#test").html());
        $("#test").html("<h1>new test</h1>");
    </script>

    属性操作

    原生JS方法

    <div id="test" style="100px; height:100px; background:red;"></div>
    <script>
        document.getElementById("test").style.background="yellow";
        alert(document.getElementById("test").style.background);
        document.getElementById("test").setAttribute("width","200px");
        alert(document.getElementById("test").getAttribute("width"));
    </script>

    注意:在使用setAttribute()后,元素的宽度并未发生改变,究其原因,在debug界面可以看到

    <div id="test" style=" 100px; height: 100px; background: yellow;" width="200px"></div>

    width被写在style外面,而真正生效的是style里的width

    再看CSS管理器里

    element.style {
        width: 100px;
        height: 100px;
        background: yellow;
    }

    width仍然没有变化...如果不在行间写style写在<style>标签里呢?仍然没有用!因为setAttribute()并不会对element.style发生作用,而element.style的优先级是最高的。

    所以在使用setAttribute()时要谨慎,没事就别瞎用了。

    jQuery方法

    <div id="testDiv" style="100px; height:100px; background:red;"></div>
    <a href="www.cnblogs.com" id="testLink">cnblogs</a>
    <script>
        alert($("#testDiv").attr("background-color"));
        alert($("#testLink").attr("href"));
        $("#testDiv").attr("background-color","yellow");
        $("#testLink").attr("href","www.baidu.com");
        alert($("#testDiv").attr("background-color"));
        alert($("#testLink").attr("href"));
    </script>

    你会发现a的href是有用的,div的background-color是undefined,换成width还是undefined。我也不知道为什么,总之谨慎使用吧。

    <div id="test" style="100px; height:100px; background:red;"></div>
    <script>
        alert($("#test").css("background-color"));
        $("#test").css({"background-color":"yellow"});
    </script>

    用css()方法比较稳定,它是CSS类的一个方法,和addClass()/removeClass()/toggleClass()一样。

    节点操作

    原生JS方法

    <div id="testDiv"></div>
    <script>
        var testSpan = document.createElement("span");
        var testText = document.createTextNode("Test");
        testSpan.appendChild(testText);
        document.getElementById("testDiv").appendChild(testSpan);
    </script>

     重复插入是没用的,九浅一深什么的都是没有用的,你只能换着姿势插

    <div id="testDiv">
        <p id="testP">Test</p>
    </div>
    <script>
        var testSpan = document.createElement("span");
        var testText = document.createTextNode("Test");
        testSpan.appendChild(testText);
        
        var testDiv = document.getElementById("testDiv");
        var testP = document.getElementById("testP");
        
        testDiv.insertBefore(testSpan,testP);
    </script>

    或者替换

    <div id="testDiv">
        <p id="testP">Test</p>
    </div>
    <script>
        var testSpan = document.createElement("span");
        var testText = document.createTextNode("TestReplace");
        testSpan.appendChild(testText);
        
        var testDiv = document.getElementById("testDiv");
        var testP = document.getElementById("testP");
        
        testDiv.replaceChild(testSpan,testP);
    </script>

    或者干脆删掉

    <div id="testDiv">
        <p id="testP">Test</p>
    </div>
    <script>
        var testDiv = document.getElementById("testDiv");
        var testP = document.getElementById("testP");
        
        testDiv.removeChild(testP);
    </script>

    jQuery方法

    <div id="testDiv">
        <p id="testP">Test Paragraph</p>
    </div>
    <script>
        $("#testDiv").append("Append Test");
        $("#testDiv").append("<p>Element Append Test</p>");
        $("#testDiv").prepend("<p>Prepend Test</p>");
        
        $("#testP").before("Before Test");
        $("#testP").after("after Test");
    </script>

    用jQuery则要简单很多,不需要创建节点插来插去,只需要干着插,深深猛插。而且姿势也更多,原生JS只能正常插和从前面插,而jQuery不仅能正常插从前面插,还能在最前面插,在最后面插以及从某个部位的后面插,花样繁多,高下立判。

    但是jQuery没有replace方法,但是人家提出了empty()清空子元素

    <div id="testDiv">
        <p id="testP">Test Paragraph</p>
    </div>
    <script>
        $("#testDiv").empty();
    </script>

    还有remove(),可以自杀

    <div id="testDiv">
        <p id="testP">Test Paragraph</p>
    </div>
    <script>
        $("#testP").remove();
    </script>

    换着姿势杀

    <div id="testDiv">
        <p id="testP">Test Paragraph</p>
    </div>
    <script>
        $("p").remove("#testP");
    </script>

    比原生JS不知道高到哪里去了

    遍历操作

    原生JS方法

    <script>
        document.getElementById("test").firstChild;
        document.getElementById("test").lastChild;
        document.getElementById("test").parentNode;
        document.getElementById("test").childNodes[0];
    </script>

    基本就这样了

    jQuery方法

    <script>
        //祖先
        //返回向上一级的父元素
        $("test").parent();
        //返回向上所有的祖先元素直到根节点
        $("test").parents();
        //返回介于两者之间的所有祖先元素
        $("test").parentsUntil(test2);
        
        //子孙
        $("test").children();
        $("test").children("p.testP");
        $("test").find("span");
        $("test").find("*");
        
        //兄弟
        //前后找,过滤找
        $("test").siblings();
        $("test").siblings("p");
        //往后找
        $("test").next();
        $("test").nextAll();
        //往前找
        $("test").pre();
        $("test").preAll();
        
        //过滤
        //找第一个
        $("test").first();
        //找最后一个
        $("test").last();
        //按索引找
        $("test").eq(0);
        //按条件找
        $("test").filter(".testFilter");
        //筛选出来找
        $("test").not(".testFilter");
    </script>

    简直无情,已经把原生JS秒出十条街了。

    写在结尾

    库再好也只是库,是别人的东西,怎样做出自己的库,做出自己的库的方法才是最重要的。jQuery也只是对原生JS的封装,却能绽放出比原生JS更耀眼的魅力,它的源码才是真正的关键所在。学习思维和方法,永远比学习流于表面的代码重要。这篇笔记仅仅是为了我能够不搞混原生JS和jQuery而记录的,仅此而已。

    PS:好吧,原生JS里根本就没有append()方法,我终于搞清楚了。

  • 相关阅读:
    【实战】如何实现滚轮时间的显示
    NSDate的常用用法
    UIDatePicker的简单用法
    NSDateFormatter相关整理
    UIPickerView
    回家任务
    addTarget:self 的意思是说,这个方法在本类中
    2020/2/25
    树上启发式合并
    题解
  • 原文地址:https://www.cnblogs.com/zcynine/p/4989299.html
Copyright © 2020-2023  润新知