zoukankan      html  css  js  c++  java
  • JavaScript那些事儿(1):对比JavaScript和jQuery的Dom操作

         正在着手看《javascript权威指南》,整理点儿笔记,也算是督促自己学习,每天看一点,特立此贴,希望自己能坚持下去。

    对比:用javascript和jQuery分别判断某元素是否存在,如果不存在则创建,并向其中追加子元素

    (1)javascript的实现

    //在document中的一个指定的区域输出调试消息
    function debug(msg) {
        var log = document.getElementById("debuglog");
    
        if (!log) {
            log = document.createElement("div");
            log.id = "debuglog";                  //给这个元素的HTML id赋值
            log.innerHTML = "<h1>Debug Log</h1>";
            document.body.appendChild(log);
        }
    
        //将消息包装在<pre>中,并添加至log中
        var pre = document.createElement("pre");
        var text = document.createTextNode(msg);  //将msg包装在一个文本节点中
        pre.appendChild(text);                    //将文本添加至<pre>
        log.appendChild(pre);
    }

    (2)jQuery的实现

    function debug(msg) {
        var log = $("#debuglog");
        if (log.length == 0) {
            log = $("<div id='debuglog'><h1>Debug Log</h1></div>");
            log.appendTo(document.body);
        }
        log.append($("<pre/>").text(msg));        //将msg包装在<pre>中,再追加到log里
    }

    jQuery, write less do more. 由此可见,名不虚传。

    (声明:以上代码来自《Javascript权威指南》)

  • 相关阅读:
    小程序导出excel
    小程序搜索框加icon
    微信小程序全局传参 app传参
    长亭安服面经
    uni关于生成支付宝小程序问题
    Echarts图表使用
    js获取url路径斜杠分开
    git---更新gitignore文件,使之生效
    常见Cpu 100%的原因
    OFFICE 2019 INSTRUCTIONS
  • 原文地址:https://www.cnblogs.com/jacktag/p/3024962.html
Copyright © 2011-2022 走看看