某试


0311lc.com说:
  1. 添加、删除、替换、插入 某个节点的方法 ?

    appendChild()//添加
    removeChild()//删除节点
    insertBefore(插入节点,被插节点)//插入(前插后)
    replaceChild(新节点,旧节点)//替换(前替换后)jq:
    append() (旧节点添加新节点后面)
    appendTo() (新节点添加到旧节点后面)
    prepend() (旧节点添加新节点的前面)
    prependTo() (新节点添加到旧节点的前面)
    //添加remove()
    (//清空:) empty()
    //删除after() ______// 旧节点后面插入 新节点
    before() ______ //旧节点前面插入 新节点
    insertAfter() ________//新节点插到旧节点后
    insertBefore() _________//新节点插到旧节点前
    //插入

    replaceWith()

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>节点</title>
        <style>
            button{
                margin-left:10px;
            }
            span{
                display: inline-block;
                width: 20px;
                text-align: center;
                border: 1px solid;
            }
            li{
                float: left;
                display: block;
                width: 100px;
                border:1px solid;
            }
        </style>
    </head>
    <body>
    <div id="js">
        <ul id="jspNode">
            <li id="jsDel">
                1、删除节点
                <p>我要死了</p>
            </li>
            <li id="jsAdd">
                2、增加节点
                <p>我要多一个兄弟了</p>
            </li>
            <li id="jsInt">
                3、插入节点
                <p>我的兄弟要进来了</p>
            </li>
            <li id="jsChg">
                4、替换节点
                <p>换一个吧</p>
            </li>
        </ul>
        <button>删除</button>
        <button>增加</button>
        <button>插入</button>
        <button>替换</button>
    </div>
    <div style="clear: both;"></div>
    <div id="jq">
        <ul id="jqpNode">
            <li id="jqDel">
                1、删除节点
            </li>
            <li id="jqAdd">
                2、增加节点
            </li>
            <li id="jqInt">
                3、插入节点
            </li>
            <li id="jqChg">
                4、替换节点
            </li>
        </ul>
        <button>删除</button>
        <button>增加</button>
        <button>插入</button>
        <button>替换</button>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
    <script>
        //js  node 节点操作
    
        let pNode = document.getElementById('jspNode');
    
        //节点获取
        let jsDel = document.getElementById('jsDel');
        let jsAdd = document.getElementById('jsAdd');
        let jsInt = document.getElementById('jsInt');
        let jsChg = document.getElementById('jsChg');
    
        //按钮获取
        let jsBtn =  document.getElementById('js').getElementsByTagName('button');
    
        let jqBtn =  document.getElementById('jq').getElementsByTagName('button');
    
        var creLi  = document.createElement('li');
        var newP =  document.createElement('li');
    
        //创建的如插入或删除节点内容
        creLi.innerHTML = `
             增加出来的节点
            <p>大家好,我刚刚出生,第一次做人,就多指教</p>
            `;
    
        newP.innerHTML = `<p>我是替换后的结果</p>`
        //删除节点
        jsBtn[0].onclick = function () {
            pNode.removeChild(jsDel);
        }
    
    
        //添加节点
        jsBtn[1].onclick = function () {
            //添加要有来源,所以需要先创建
            pNode.appendChild(creLi)   //在节点的末尾添加,如果是以存在节点,则删除原有节点,添加至添加处。
        }
    
    
        //插入节点
        jsBtn[2].onclick = function () {
            pNode.insertBefore(creLi,jsInt)   //前插后的节点之上
        }
    
        //替换节点
        jsBtn[3].onclick = function () {
            pNode.replaceChild(newP,jsChg)  //前替换后
        }
    
    
        //jq  node  操作
    
    
        //几种删除节点的方法
        $("#jq button").eq(0).click(function () {
            // var $li=$("#jqDel").remove();//删除ul节点中"删除节点"节点
            //$("#jqpNode").append($li);//把刚删除的元素节点从新添加到ul元素中去
            // $("#jqDel").empty();//清空"删除节点"节点元素的内容/
        })
    
    
    
        //几种添加节点的方法
        $("#jq button").eq(1).click(function () {
            // $("#jqAdd").append("<b>向li元素中追加《b》</b>");//向li元素中追加《b》
            // $("<b>将《b》追加到li元素中</b>").appendTo("#jqAdd");//将《b》追加到li元素中
            // $("#jqAdd").prepend("<b>前置《b》</b>");//向li中前置《b》
            // $("<b>《b》前置到li元素中</b>").prependTo("#jqAdd");//将《b》前置到li元素中
        })
    
    
        //插入节点:
        $("#jq button").eq(2).click(function () {
            // $("#jqInt").after("<li>插入</li>")    //向每个匹配元素的后面添加内容
            // $("#jqInt").before("<li>插入</li>")  // 向每个匹配元素的前面添加内容
            // $("<li>插入</li>").insertAfter("#jqInt") //把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
            // $("<li>插入</li>").insertBefore("#jqInt") //把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
    
        })
    
        //替换节点
        $("#jq button").eq(3).click(function () {
            // $("#jqChg").replaceWith("<li>替换成功</li>");
        })
    

     

  2. js 的 callee  和 caller 的 作用?

    callee
    callee是对象的一个属性,该属性是一个指针,指向参数arguments对象的函数
    首先我们来写个阶成函数:

    function chen(x){
    if (x<=1) {
    return 1;
    } else{
    return x*chen(x-1);
    };
    };

     

    从这个函数中可以看出来,用到了递归函数,要是改变了函数名,里面的函数名也要随着改变,这样很不方便所以我们用callee来试试

    function chen(x){
    if (x<=1) {return 1;
    }else{
    return x*arguments.callee(x-1);
    };
    };

     我们来分析一下为什么这样写:根据callee的定义,可以看出来callee是arguments对象的一个属性,指向arguments对象的函数,这个函数就是chen(chen=arguments.callee),这样解释应该可以理解了吧。

    function chen(x){
    if (x<=1) {return 1;
    }else{
    return x*arguments.callee(x-1);
    };
    };

    我们来分析一下为什么这样写:根据callee的定义,可以看出来callee是arguments对象的一个属性,指向arguments对象的函数,这个函数就是chen(chen=arguments.callee),这样解释应该可以理解了吧。

caller

caller是函数对象的一个属性,该属性保存着调用当前函数的函数的引用(指向当前函数的直接父函数)

先来个例子吧

function a(){
b();
};
function b(){
alert(b.caller);
};
a(); //结果就是弹出函数a和内容

我们来解释一下吧,首先函数b的属性caller调用当前函数b的函数引用a(就是指向当前函数b的父函数a),所以结果就是弹出 function a(){ b();};

那么了解了caller和callee,那么可以不可以将二者结合在一起来使用呢

function b(){
alert(b.caller);
};

从这个代码可以看出b函数中调用了b函数名,这样当函数名改变时就很不方便,我们需要替换里面的那个b
前面我们知道用什么方法可以指向当前对象,下面我们就来修改一下:

(function a(){
b();
})();
 
function b(){
alert(arguments.callee.caller);
};

从代码中可以看出我们用arguments.callee代替了b函数,所以解决了一下麻烦。。。。。

以上所述就是本文的全部内容了,希望大家能够喜欢。

  1. 请说出四个减页面加载的方法?
    重复的HTTP请求数量应尽量减少
    压缩Javascript、CSS代码,css、javascript改由外部调用
    在文件头部放置css样式的定义,在文件末尾放Javascript脚本
    添加文件过期或缓存头,使用CDN(Content Delivery Network)网络加速
    服务器启用gzip压缩功能
  2. 写出3个this 的典型案例?

    function Foo(){
       getName = function(){console.log(1);};
       return this;
    }
    Foo.getName = function(){console.log(2);};
    Foo.prototype.getName = function(){console.log(3);};
    var getName = function(){console.log(4);};
    function getName(){console.log(5);}
    
    Foo.getName();//2
    getName();//4
    Foo().getName();//1
    getName();//1
    new Foo.getName();//2
    new Foo().getName();//3
    new new Foo().getName();//3
    //基本用法
    
    function add(a,b){
      return a+b;  
    }
    function sub(a,b){
      return a-b;  
    }
    var a1 = add.apply(sub,[4,2]);  //sub调用add的方法
    var a2 = sub.apply(add,[4,2]);
    alert(a1);  //6     
    alert(a2);  //2
    
    /*call的用法*/
    var a1 = add.call(sub,4,2);
    //实现继承
    function Animal(name){
      this.name = name;
      this.showName = function(){
            alert(this.name);    
        }    
    }
    
    function Cat(name){
      Animal.apply(this,[name]);    
    }
    
    var cat = new Cat("咕咕");
    cat.showName();
    
    /*call的用法*/
    Animal.call(this,name);
    //多重继承
    function Class10(){
      this.showSub = function(a,b){
            alert(a - b);
        }   
    }
    
    function Class11(){
      this.showAdd = function(a,b){
            alert(a + b);
        }  
    }
    
    function Class12(){
      Class10.apply(this);
      Class11.apply(this);   
      // Class10.call(this);
      //Class11.call(this);  
    }
    
    var c2 = new Class12();
    c2.showSub(3,1);    //2
    c2.showAdd(3,1);    //4
    var arr = [1,3,4,5,7,8,11];
    var max = Math.max.apply(null,arr);  //数组最大值
    var min = Math.min.apply(null,arr); //最小值
    var arr1 = [71,3232,13,3];
    var arr2 = [3,1,3,41,1]
    var arr3 = Array.prototype.push.apply(arr1,arr2);
    console.debug(arr3); //合并

     

  3. 图片如何压缩?

    ps 压缩切片 ,还有服务器压缩,

  4. 缓存和预加载的区别?

    缓存

    )浏览器不会发起请求去请求图片,浏览器直接从缓存中拿图片。

    2)而设置过期时间会强迫浏览器在访问页面的时候去请求图片,如果图片已经在缓存中,并且正在被重新请求,浏览器会把最后修改时间加入在HTTP头中,这就是传统的GET请求,如果图片没有被修改,服务器会返回一个304代码,所以对于浏览器的请求服务器会返回下面的两种代码:

    200–浏览器没有缓存。

    304–浏览器已经缓存了图片,但是需要验证最后修改时间

    预加载
    1.什么是预加载
    资源预加载是另一个性能优化技术,我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。预加载简单来说就是将所有所需的资源提前请求加载到本地,这样后面在需要用到时就直接从缓存取资源。

    2.为什么要用预加载
    在网页全部加载之前,对一些主要内容进行加载,以提供给用户更好的体验,减少等待的时间。否则,如果一个页面的内容过于庞大,没有使用预加载技术的页面就会长时间的展现为一片空白,直到所有内容加载完毕。

    3.实现预加载的几种办法
       1.<img src=http://pic26.nipic.com/20121213/6168183 0044449030002.jpg style=”display:none/

    2. <script src=“./myPreload.js”></script>

    //myPreload.js文件 var image= new Image()      image.src=“http://pic26.nipic.com/20121213/6168183 004444903000 2.jpg

    3.使用XMLHttpRequest对象,虽然存在跨域问题,但会精细控制预加载过程

    var xmlhttprequest=new XMLHttpRequest();
        xmlhttprequest.onreadystatechange=callback;
        xmlhttprequest.onprogress=progressCallback;
        xmlhttprequest.open("GET","http://image.baidu.com/mouse,jpg",true);
        xmlhttprequest.send();
        function callback(){
          if(xmlhttprequest.readyState==4&& xmlhttprequest.status==200){
            var responseText=xmlhttprequest.responseText;
          }else{
             console.log("Request was unsuccessful:"+xmlhttprequest.status);
          }
        }
        function progressCallback(e){
        e=e || event;
        if(e.lengthComputable){
        console.log("Received"+e.loaded+"of"+e.total+"bytes")
        }
        }
    

    4使用PreloadJS库

    PreloadJS提供了一种预加载内容的一致方式,以便在HTML应用程序中使用。预加载可以使用HTML标签以及XHR来完成。默认情况下,PreloadJS会尝试使用XHR加载内容,因为它提供了对进度和完成事件的更好支持,但是由于跨域问题,使用基于标记的加载可能更好。

    //使用preload.js
        var queue=new createjs.LoadQueue();//默认是xhr对象,如果是new createjs.LoadQueue(false)是指使用HTML标签,可以跨域
        queue.on("complete",handleComplete,this);
        queue.loadManifest([
        {id:"myImage",src:"http://pic26.nipic.com/20121213/6168183  0044449030002.jpg"},
        {id:"myImage2",src:"http://pic9.nipic.com/20100814/2839526  1931471581702.jpg"}
        ]);
        function handleComplete(){
          var image=queue.getResuLt("myImage");
          document.body.appendChild(image);
        }
    

    懒加载和预加载的对比

    两者都是提高页面性能有效的办法,两者主要区别是一个是提前加载,一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力

  5. xhtml 和 html 的区别?

    一、其基础语言不同1、XHTML是基于可扩展标记语言(XML)。

    2、HTML是基于标准通用标记语言(SGML)。

    二、语法严格程度不同

    1、XHTML语法比较严格,存在DTD定义规则。

    2、HTML语法要求比较松散,这样对网页编写者来说,比较方便。

    三、可混合应用不同

    1、XHTML可以混合各种XML应用,比如MathML、SVG。

    2、HTML不能混合其它XML应用。

    四、大小写敏感度不同

    1、XHTML对大小写敏感,标准的XHTML标签应该使用小写。

    2、HTML对大小写不敏感。

    五、公布时间不同

    1、XHTML是2000年W3C公布发行的。

    2、HTML4.01是1999年W3C推荐标准。


发表评论

电子邮件地址不会被公开。 必填项已用*标注