web前端试题解析

最新推荐文章于 2024-01-01 18:06:39 发布

流浪的javascript

最新推荐文章于 2024-01-01 18:06:39 发布

阅读量1.3k

点赞数

分类专栏： javascript web前端试题解析

本文链接：https://blog.csdn.net/liulangdejavascript/article/details/26220083

版权

本文涵盖了JavaScript前端面试中的一些常见问题，包括遍历document对象、获取DOM元素位置、创建table、实现九九乘法表、预加载图片、模拟HashTable、Ajax读取XML解析以及面向对象和继承机制的实现。通过这些问题，深入理解JavaScript在实际开发中的应用。

摘要由CSDN通过智能技术生成

</pre><pre name="code" class="plain">

1.实现输出document对象中所有成员的名称和类型：

for(var k in document){
    document.write(document[k]);
    document.write('<br>');
    document.write(typeof document[k]);
    document.write('<br>');
}

知识点：单个对象时没有length属性的、js遍历对象

2.如何或得一个DOM元素的绝对位置？（或得元素位置，不依赖框架）

function getElementPosition(ElementPosition){
               var Top=ElementPosition.offsetTop;
               var Left=ElementPosition.offsetLeft;
              if(ElementPosition.offsetParent){
                              ElementPosition=ElementPosition.offsetParent;
                              Top+=ElementPosition.offsetTop+ElementPosition.clientTop;
                               Left+=ElementPosition.offsetLeft+ElementPosition.clientLeft;
              }
              return {
                          Top:Top,
                          Left:Left
              }
}
var ElementPosition=document.getElementById('current');
document.write(getElementPosition(ElementPosition).Top,getElementPosition(ElementPosition).Left);

知识点：HTMLElement对象的属性

3.如何利用js生成一个规定的行列table

 function AddTable(x,y){
         document.write('<table id="_table"></table>');
         var _table=document.getElementById('_table');
         for(var i=0;i<x;i++){
             var _row=document.createElement('tr');
             _table.appendChild(_row);
             for(var j=0;j<y;j++){
                 var _cee=document.createElement('td');
                 _cee.innerText=j
                 _row.appendChild(_cee);
             }
    
         }
}
var keyX=20,keyY=20;
AddTable(keyX,keyY);

知识点：主要考察对document的方法的熟悉

4.利用js写一个九九乘法表：

function Multiplication(){
      for(var i=1;i<10;i++){
          for(var j=1;j<=i;j++){
             document.write(j+"x"+i+"="+i*j+" ");
          }
          document.write('<br/>');
      }
}
Multiplication();

5.实现预加载一张图片，加载完成后显示在网页中并设定其高度为50px，宽度为50px:

用他人思路解预加载

(1)简单的预加载：

var imgObj = document.getElementById('img');
addImg('image.png');
function addImg(isrc) {
    imgObj1 = new Image();
    imgObj1.src = isrc;
    imgObj1.onload = function() {
        imgObj.src = this.src;
        imgObj.height = 50;
        imgObj.width = 50;
    }
}

(2)列子：

function loadImage(url,callback){
      var img=new Image();
      img.οnlοad=function(){
            callback.call(img);
            img.height=50;
            img.width=50;
      }
      img.src=url;
}
function imgLoaded(){
      alert(this.width);
}
<div type="button" οnclick="loadImage('image.jpg',imgLoaded)"><div/>

(3)深入浅出的列子，感觉作者写的不错：

function preloadimages(arr){   
    var newimages=[], loadedimages=0
    var postaction=function(){}  //此处增加了一个postaction函数
    var arr=(typeof arr!="object")? [arr] : arr
    function imageloadpost(){
        loadedimages++
        if (loadedimages==arr.length){
            postaction(newimages) //加载完成用我们调用postaction函数并将newimages数组做为参数传递进去
        }
    }
    for (var i=0; i<arr.length; i++){
        newimages[i]=new Image()
        newimages[i].src=arr[i]
        newimages[i].οnlοad=function(){
            newimages[i].width=50;
            newimages[i].height=50;
            imageloadpost()
            
        }
        newimages[i].οnerrοr=function(){
            newimages[i].width=50;
            newimages[i].height=50;
            imageloadpost()
        }
    }
    return { //此处返回一个空白对象的done方法
        done:function(f){
            postaction=f || postaction
        }
    }
}
preloadimages(['1.gif', '2.gif', '3.gif']).done(function(images){
alert(images.length)
alert(images[0].src+" "+images[0].width])
})

(4)预加载图片是遇到Onload方法里绑定的事件不执行,据说是浏览器的图片缓存导致的,问题的解决方案：

if(newimages[i].complete){
          newimages[i].complete=function(){
            newimages[i].width=50;
            newimages[i].height=50;
            imageloadpost()
            
        }
}else if(newimages[i].onload){
          newimages[i].οnlοad=function(){
            newimages[i].width=50;
            newimages[i].height=50;
            imageloadpost()
            
        }
}

知识点：了解new一个Image对象:var image=new Image()、image.onload、image.complete、image.onerror、image.src

5.模拟一个HashTable类，包含有add、remove、contains、length方法：

(1)

</pre><pre name="code" class="javascript">function HashTable(){
      this.value=new Array();
}
HashTable.prototype.add=function(val){
      this.value.push(val);
}
HashTable.prototype.remove=function(val){
      var containValue=this.value;
      for(var i=0;i<containValue.length;i++){
              if(val==containValue[i]){ 
                     this.value.splice(i,1); 
              }
      }
}
HashTable.prototype.contains=function(val){
       var containValue=this.value;
       for(var i=0;i<containValue.length;i++){
               if(val=