精华内容
下载资源
问答
  • web前端笔试选择题
    万次阅读 多人点赞
    2019-04-08 15:19:44

    一、填空题(每空1分,共70分)
    1、JS中的数据类型有哪些__string,number,undefined,null,boolean,Object Array,Function,;(3分)
    2、JS中强制类型转换为number类型的方法有:parseInt()parseFloat()
    number()

    3、创建一个子节点___createElement()
    ,插入一个节点_appendChild() __,在已有元素之前插入节点__insertbefore(),删除字节点_____removeChild()

    4、获取元素的第一个子节点__firstNode___________________,获取元素的最后一个子节点__lastNode
    ______________,上一个兄弟节点____previousSibling_________________,下一个兄弟节点__________nextSibling___________。
    5、获取所有子元素节点___children_________,获取父级节点___parent_________
    6、常用运算符有那五大类_____算术运算符___、逻辑运算符______、关系运算符________、赋值运算符_、比较运算符_______。
    7、下面代码执行结果依次为:undefined____、1
    var a = 1;
    function fn1(a){
    alert(a);
    a = 2;
    }
    fn1(); //undefined
    alert(a); //1
    8、下面代码执行结果依次为:undefined________、1
    var a = 1;
    function fn1(){
    alert(a);
    var a = 2;
    }
    fn1();
    alert(a);

    9、把字符串按照指定字符分割并返回数组的方法为:splice(‘|’);大写字母转小写字母的方法为:toLowerCase();小写字母转大写字母的方法为:toUpperCase();查询字符在字符串中位置的方法_indexof(‘a’);返回指定位置字符串的方法charAt(3)
    10、在数组最前面插入一项的方法为:_unshift()
    ;删除数组最后一项的方法为:__pop()
    ;在数组最前面插入一项的方法为:__unshift();删除数组最前面一项的方法为:shift()__;删除、添加、替换数组项的方法为:_splice(start,deleteCount,value1,value2);颠倒数组顺序的方法为:reverse()__;合并多个数组并返回新数组的方法__Array.concat([1,2,3])
    11、有x=15,y=64,写出生成x到y直接随机数的方法:Math.Random()*49+15

    12、JS中的多次执行的定时器为:setInterval(function(){},1000)
    ;只执行一次的定时器为:setTimeout(function(){},1000);清除定时器的方法:clearInterval(timer) clearTimeout(timer)
    13、通过id名获取元素的方法:

    14、获取滚动条滚动高度的方法:__对象.onscroll = function(){ console.log(this.scrollTop)}

    15、JS中绑定事件的方法:对象.fn
    ;解除事件绑定的方法________________对象.onclick = null
    ___。
    16、JS获取焦点事件为:onfocus___________;失去焦点事件为:onblur_______。
    17、对数字向上取整的方法:Math.ceil()___;向下取整的方法:Math.floor();四舍五入的方法:Math.round()
    18、获取表格元素中thead、tbody、tfoot、tr、td的方法分别为:____________、____________、____________、____________、_________
    19、var arr=[{name:’张三’,age:25}],怎么读取数组中的“张三”arr.name
    Arr[“name”]

    20、鼠标右键菜单事件:__
    21、字符串转换成数组的方法是_______splice(“|”)

    22、浮动可以使元素___是
    (是或否)脱离文档流。
    二、根据要求写出对于代码(每题6分,共30分)
    1、封装通过id获取元素的方法:

    Function  getMyEById(id){
    return document.getElmetById(id)
    
    } 
    

    2、获取当前日期(输出格式:年-月-日 星期 时:分:秒);

    3、获取鼠标坐标位置;

    对象. function(e){
    Console.log(e.clientX,e.clientY)
    
    }
    

    4、把数组 arr=[1,23,12,7,3,28,2,14]按正序的方式排序;
    源码 :

    var arr = [1,2,3,5,4,6,7,8]  //? 优化
    var tang = 0;
    var flag = 0;
    for(var i =1;i<arr.length;i++){
        flag =0;
        tang++; //趟数
        for(var j=0;j<arr.length-i;j++){
            if(arr[j] > arr[j+1]){
                flag = 1; //本趟有交换  没有交换 flag =0
                var temp = arr[j];
                arr[j] = arr[j+1];
                arr[j+1] = temp;
    
            }
        }
    
        if(flag === 0){
            break;
        }
    
    }
    
    console.log(tang+'==================')
    for(var i =0;i<arr.length;i++){
    
        console.log(arr[i])
    
    }
    

    5、写出清除浮动的影响四种方法

    (1)	定高  
    (2)	Overflow:hidden (密闭的作用域)
    (3)	<div style=“clear:both”></div>  块级元素
    (4)	衣服  伪元素法 
    .clearFix::after,.clearFix:;before {
     Content:’’;
    Line-height:0; //IE 
    Display:block;
    Clear:both;
    
    }
    .clear{*zoom:1;} //IE下清除浮动影响的办法
    
    更多相关内容
  • web前端笔试试题(答案).pdf
  • web前端笔试试题一(含答案)

    千次阅读 2021-07-11 10:04:22
    一、填空(每空1分,共70分) 1、JS中的数据类型有哪些_number、string、boolean、undefined、null、object、array、function、NaN__________________________________________;(3分) 2、JS中强制类型转换为...

    一、填空题(每空1分,共70分)

    1、JS中的数据类型有哪些_number、string、boolean、undefined、null、object、array、function、NaN___;(3分)

    2、JS中强制类型转换为number类型的方法有:parseInt()、parseFloat()、Number()__。

    3、创建一个子节点_createElement()___,插入一个节点_appendChild()__,在已有元素之前插入节点_insertBefore()__,删除子节点___removeChild___。

    4、获取元素的第一个子节点__firstChild___,获取元素的最后一个子节点___lastChild__,上一个兄弟节点____previousSibling____,下一个兄弟节点___nextSibling()__。

    5、获取所有子元素节点__childNodes___,获取父级节点__parentNode___

    6、常用运算符有那五大类_赋值运算符、算术运算符、比较运算符、逻辑运算符、关系运算符__。

    7、下面代码执行结果依次为:undefined  1__。

    var a = 1;

    function fn1(a){

    alert(a);

    a = 2;

    }

    fn1();

    alert(a);

    8、css中常见布局单位有_px、rem、em、%__(3种)

    9、把字符串按照指定字符分割并返回数组的方法为:___split(“分隔符”)__;大写字母转小写字母的方法为:toLowerCase()____;小写字母转大写字母的方法为:_ toUpperCase()___;查询字符在字符串中位置的方法__indexOf(“字符串“)__;返回指定位置字符串的方法__charAt(index)___。

    10、在数组最前面插入一项的方法为:unshift()___;删除数组最后一项的方法为:_pop()___;在数组最后面插入一项的方法为:push()__;删除数组最前面一项的方法为:__shift()___;删除、添加、替换数组项的方法为:_splice(start,deleteCount,value1,value2)___;颠倒数组顺序的方法为:_reverse()_;合并多个数组并返回新数组的方法_Array.concat()____。

    11、有x=15,y=64,写出生成x到y直接随机数的方法:__Math.random()*49+15 __。

    12、JS中的多次执行的定时器为:_setInterval(function(){},1000)__只执行一次的定时器为:_setTimeout(function(){},1000)__清除定时器的方法:clearInterval(timer)clearTimeout(timer)_

    13、通过id名获取元素的方法:__document.getElementById(“id”)__。

    14、获取滚动条滚动高度的方法:_对象.οnscrοll=function(){console.log(this.scrollTop)}_。

    15、JS中绑定事件的方法:__对象.on+事件名 = 事件处理函数_;解除事件绑定的方法_对象.on+事件名 = null__。

    16、JS获取焦点事件为:___onfocus_;失去焦点事件为:_onblur__。

    17、对数字向上取整的方法:__Math.ceil()_;向下取整的方法:_Math.floor()__;四舍五入的方法:_Math.round()_。

    18、表格元素中thead、tbody、tfoot、tr、td的含义分别为:_表头_、表格内容__、_表格页脚_、__、_单元格_。

    19、var arr=[{name:’张三’,age:25}],怎么读取数组中的“张三”___arr[0].name_。

    20、鼠标右键菜单事件:__onContextMenu_。

    21、字符串转换成数组的方法是_split(“”)__。

    22、浮动可以使元素___(是或否)脱离文档流。

    二、根据要求写出对于代码(每题6分,共30分)
    1、封装通过id获取元素的方法:

    function getEle(idName){
    	return document.getElementById(idName);
    };
    

    2、获取当前日期(输出格式:年-月-日 星期 时:分:秒)

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>2</title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
    	var data = new Date();
    	var year = data.getFullYear();
    	var month = data.getMonth() + 1;
    	var day = data.getDate();
    	var week = data.getDay();
    	var hour = data.getHours();
    	var min = data.getMinutes();
    	var sec = data.getSeconds();
    	month = month >= 10 ? month : "0" + month;
    	day = day >= 10 ? day : "0" + day;
    	hour = hour >= 10 ? hour : "0" + hour;
    	min = min >= 10 ? min : "0" + min;
    	sec = sec >= 10 ? sec : "0" + sec;
    	switch (week) {
    		case 1: week = "一";
    			break
    		case 2: week = "二";
    			break
    		case 3: week = "三";
    			break
    		case 4: week = "四";
    			break
    		case 5: week = "五";
    			break
    		case 6: week = "六";
    			break
    		case 7: week = "日";
    			break
    	};
    	console.log(year + "年" + month + "月" + day + "日 " + "星期" + week + " " + hour + ":" + min + ":" + sec);
    </script>
    </html>

    3、获取鼠标坐标位置

    对象.function(e){
    	console.log(e.clientX,e.clientY);
    };
    

    4、把数组 arr=[1,23,12,7,3,28,2,14]按正序的方式排序(写出3种方式才能拿满分)

    //sort()方法排序
    function func(a,b){
    	return a-b;
    };
    var arr = [1,23,12,7,3,28,2,14];
    console.log(arr.sort(func));//[1, 23, 12, 7, 3, 28, 2, 14]
    
    
    //选择排序
    function selectSort(arr) {
    	for (var i = 0; i < arr.length - 1; i++) {
    		for (var j = i + 1; j < arr.length; j++) {
    			if (arr[i] > arr[j]) {
    				var temp = arr[i];
    				arr[i] = arr[j];
    				arr[j] = temp;
    			};
    	    };
    	};
        return arr;
    };
    var arr = [1,23,12,7,3,28,2,14];
    console.log(selectSort(arr));//[1, 23, 12, 7, 3, 28, 2, 14]
    
    
    //冒泡排序
    function BubbleSort(arr){
    	for(var i=0;i<arr.length-1;i++){
    		for(var j=0;j<arr.length-1-i;j++){
    			if(arr[j]>arr[j+1]){
    				var temp = arr[j+1];
    				arr[j+1] = arr[j];
    				arr[j] = temp;
    			}
    		};
    	};
    	return arr;
    };
    var arr = [1,23,12,7,3,28,2,14];
    console.log(BubbleSort(arr));//[1, 23, 12, 7, 3, 28, 2, 14]

    5、写出清除浮动的影响四种方法

    1. 给父级div定义伪类:afterzoom

    .clearfloat:after{clear:both;overflow:hidden;display:block;current:"";height:0}
    
    .clearfloat{zoom:1}

    2.在浮动尾部添加空div标签clear:both

    3.父级定义高度

    4.父级定义overflow:hidden;

    展开全文
  • web前端笔试题(含答案).doc
  • web前端研发工程师笔试题(选择题带答案).pdf
  • web前端笔试题

    2019-02-21 15:05:07
    web前端工程师笔试题题目不多,涵盖了大多公司会问到的问题
  • web前端研发工程师笔试题(选择题带答案)
  • 关于下列 CSS 选择器:ID 选择器、类选择器、伪类选择器、标签名称选择器,排序正确的是:() 假设 a 是一个由线程 1 和线程 2 共享的初始值为 0 的全局变量,则线程 1 和线程 2 同时执行下面的代码,最终 a 的...
    1. 下面标签嵌套正确的是
      在这里插入图片描述
      A.ul只能紧挨着li
      B.a中不能再嵌套a
      C.dl dt
      D.ol li是有序排列
    2. 下面哪些是HTML5 新增的表单元素?
      在这里插入图片描述
      在这里插入图片描述
    3. 在HTML中,( )可以在网页上通过链接直接打开邮件客户端发送邮件。
      在这里插入图片描述
      mailto 后面加发送邮件地址
    4. 请选出所有的置换元素()
      在这里插入图片描述
      a) 置换元素:浏览器根据元素的标签和属性,来决定元素的具体显示内容。
      例如:浏览器会根据标签的src属性的 值来读取图片信息并显示出来,而如果查看(x)html代码,则看不到图片的实际内容;标签的type属性来决定是显示输入 框,还是单选按钮等。 (x)html中 的、、、、 都是置换元素。这些元素往往没有实际的内容,即是一个空元素。
      置换元素在其显示中生成了框,这也就是有的内联元素能够设置宽高的原因。
      b) 不可替换元素:(x)html 的大多数元素是不可替换元素,即其内容直接表现给用户端(如浏览器)。
      例如: 标签
    5. 下面哪条声明能固定背景图片()
      在这里插入图片描述
      在这里插入图片描述
    6. 下列说法正确的是()
      在这里插入图片描述
      在这里插入图片描述
    7. 以下关于盒子模型描述正确的是:
      在这里插入图片描述
    8. 下面哪个属性不会让 div 脱离文档流(normal flow)?
      在这里插入图片描述
      在这里插入图片描述
    9. 英文字母全部转为大写正确的是()
      在这里插入图片描述
      在这里插入图片描述
    10. 假设在今日头条里面,有很多工作人员检查新闻是不是属于虚假新闻,所有新闻真实率到达了98%,工作人员在检验一个真实的新闻把它检验为一个虚假的新闻的概率为2%,而一个虚假的新闻被检验为真实的新闻的概率为5%.那么,一个被检验为真实的新闻确实是真实的新闻的概率是多大?

    在这里插入图片描述
    在这里插入图片描述

    1. 现在有两堆石子,小今与小条玩游戏,2个人都足够聪明,两个人规定:每次每人只能从其中一堆中取走1个或2个或3个石子,后将石子全部取完的人胜利。现在两堆石子的个数为8和9,请问如何安排才能让小今必胜?
      在这里插入图片描述
      在这里插入图片描述
    2. 以下描述正确的:

    在这里插入图片描述
    在这里插入图片描述
    13. 表toutiao_tb
    在这里插入图片描述

    查询title中包含cv且type是1的记录
    在这里插入图片描述
    在这里插入图片描述

    1. 下列关于操作系统进程与线程的区别正确的是:
      在这里插入图片描述
    2. 下面那个页面调度算法,当进程分配到的页面数增加时,缺页中断的次数可能增加也可能减少
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述
    3. 下列排序算法不稳定的有?

    在这里插入图片描述
    不稳定:快选堆希
    稳 定:插冒归基

    1. 运行以下程序
      在这里插入图片描述
      y和z的最终结果为:
      在这里插入图片描述
      在这里插入图片描述
    2. 这段代码运行后的输出是:
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述
    3. 页面有一个id为 button1的按钮,如何通过原生的js禁用?(IE 考虑IE 8.0以上版本)
      在这里插入图片描述
      在这里插入图片描述
    4. 页面有一个id为 button1的按钮,通过原生的js设置背景色为红色?
      在这里插入图片描述
      在这里插入图片描述
    5. 现在有一个字符串,你要对这个字符串进行 n 次操作,每次操作给出两个数字:(p, l) 表示当前字符串中从下标为 p 的字符开始的长度为 l 的一个子串。你要将这个子串左右翻转后插在这个子串原来位置的正后方,求最后得到的字符串是什么。字符串的下标是从 0 开始的,你可以从样例中得到更多信息。
    
    	var line = readline();
    
    	var n = readline();
    
    	for(var i=0;i<n;i++){
    
    	    var line2 = readline().split(' ');
    
    	    var start = parseInt(line2[0]);
    
    	    var len = parseInt(line2[1]);
    
    	    var temp = line.substr(start,len).split('').reverse().join('');
    
    	    line = line.slice(0,start+len) + temp + line.slice(start+len);
    
    	}
    
    	print(line);
    
    
    
    1. 你作为一名出道的歌手终于要出自己的第一份专辑了,你计划收录 n 首歌而且每首歌的长度都是 s 秒,每首歌必须完整地收录于一张 CD 当中。每张 CD 的容量长度都是 L 秒,而且你至少得保证同一张 CD 内相邻两首歌中间至少要隔 1 秒。为了辟邪,你决定任意一张 CD 内的歌数不能被 13 这个数字整除,那么请问你出这张专辑至少需要多少张 CD ?
    import java.util.*;
    
    public class Main{
        
        public static void main(String[] args){
            Scanner in = new Scanner(System.in);
            while(in.hasNext()){
                int n = in.nextInt();
                int s = in.nextInt();
                int l = in.nextInt();
                int count = (l+1)/(s+1);
                count = Math.min(n, count);
                if(count%13==0){
                    count--;
                }
                int sum = n/count;
                int yu = n%count;
    			if(yu!=0){
                	sum++;
                	if(yu%13==0&&(count-yu)==1){//查看最后最后一张专辑的情况
                		sum++;
                	}
                }
                System.out.println(sum);
            }
        }
    }
    
    1. 变量a是一个64位有符号的整数,初始值用16进制表示为:0Xf000000000000000; 变量b是一个64位有符号的整数,初始值用16进制表示为:0x7FFFFFFFFFFFFFFF。 则a-b的结果用10进制表示为多少?()
      在这里插入图片描述
      在这里插入图片描述
    2. 这段代码运行后得到的结果分别是什么?
    console.log(([])?true:false); 
    console.log(([]==false?true:false)); 
    console.log(({}==false)?true:false) 
    

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    1. 下列哪些是块级元素()
      在这里插入图片描述
      input是行内替换元素
    2. 下面关于跨域问题的说法正确的是?
      在这里插入图片描述
      在这里插入图片描述
    3. 以下符合 ES6 写法的有:()
      在这里插入图片描述
      在这里插入图片描述
    4. 可继承的样式属性包括()
      在这里插入图片描述
      在这里插入图片描述
    5. 堆的数据结构能够使得堆顶总是维持最大(对于大根堆)或最小(对于小根堆),给定一个数组,对这个数组进行建堆,则平均复杂度是多少?如果只是用堆的 push 操作,则一个大根堆依次输入 3,7,2,4,1,5,8 后,得到的堆的结构示意图是下述图表中的哪个?()
      在这里插入图片描述
      答案是:D
      初始建堆操作复杂度是 O(n)的.
      建堆时,由于只采取Push的操作,所以每次将新的数字Push到堆的最后一位,然后按照插入到原则,进行堆的由下至上调整.
      最终得出D为答案.
    6. http 请求方式 get 和 post 的区别包括()
      在这里插入图片描述
      在这里插入图片描述
    7. 下面哪些属于JavaScript的typeof运算符的可能结果:()
      在这里插入图片描述
      在这里插入图片描述
    8. 老王有两个孩子,已知至少有一个孩子是在星期二出生的男孩。问:两个孩子都是男孩的概率是多大?
      在这里插入图片描述
      在这里插入图片描述
      老王有两个孩子,已知至少有一个孩子是在星期二出生的男孩。问:两个孩子都是男孩的概率是多大?
    9. 下列说法正确的有:()
      在这里插入图片描述
      AB, display:none指的是元素完全不陈列出来,不占据空间,涉及到了DOM结构,故产生reflow与repaint
      visibility:hidden指的是元素不可见但存在,保留空间,不影响结构,故只产生repaint
    10. TCP断开连接的四次挥手中,第四次挥手发送的包会包含的标记,最正确的描述是?()
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述
    11. 页面有一个按钮button id为button1,通过原生的js如何禁用?()
      在这里插入图片描述
      上面是一段按钮的html代码 如果要用原生的js来禁用这个按钮 可以用这样: document.getElementByIdx_x_x(“btnShow”).disabled=true;(这样就把按钮禁用了) 如果要重新开启按钮,则可以让disabled=false;即可 那么在jquery下面要如何设置呢?其实也很简单 利用jquery的attr的方法即可 $("#btnShow").attr({“disabled”:“disabled”}); 如要让按钮恢复可用,可以采用removeAttr方法把disabled属性删除即可。 $("#btnShow").removeAttr(“disabled”);
    12. 关于下列 CSS 选择器:ID 选择器、类选择器、伪类选择器、标签名称选择器,排序正确的是:()
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述
    13. 假设 a 是一个由线程 1 和线程 2 共享的初始值为 0 的全局变量,则线程 1 和线程 2 同时执行下面的代码,最终 a 的结果不可能是()
      在这里插入图片描述
      在这里插入图片描述
      不管怎样线程对a的操作就是+1后-2
      1.线程1执行完再线程2执行,1-2+1-2=-2
      2.线程1和2同时+1,再-2不同时,1-2-2=-3
      3.线程1和2不同时+1,同时-2,1+1-2=0
      4.线程1和2既同时+1又同时-2,1-2=-1
      没有结果为1的情况
    14. 使用HTML+CSS实现如图布局,border-width:5px,格子大小是50px*50px,hover时边框变成红色,需要考虑语义化。
      在这里插入图片描述
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            table{
            /* border-collapse:separate;*/
            border: none;
            border-spacing: 0;
            }
            td{
            position: relative;
            width: 50px;
            height: 50px;
            border: 5px solid blue;
            background: #fff;
            color: green;
            text-align: center;
            line-height: 50px;
            display: inline-block;
            }
            tr:not(:first-child) td{
            margin-top: -5px;
            }
            tr td:not(:last-child){
            margin-right: -5px;
            }
            td:hover{
            border-color: red;
            cursor: pointer;
            z-index: 2;
            }
        </style>
    </head>
    
    <body>
        <table>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
            <tr>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
        </table>
    </body>
    
    </html>
    
    1. 给出一个上传文件时不用刷新页面的方案,要求写出关键部分的js代码。
    <input id="upload" type="file" />
    <button id="upload-btn"> upload </button>
    
    document.getElementById('upload-btn').onclick = function(){
    
    	
    
    	varinput = document.getElementById('upload');
    
    	varfile = input.files[0];
    
    	varformData = newFormData();
    
    	forData.append('file',file);
    
    	
    
    	fetch({
    
    	url:'/upload',
    
    	mothod:'POST',
    
    	body:formData
    
    	})
    
    	.then((d)=>{
    
    	console.log('result is',d);
    
    	alert('上传完毕');
    
    	})
    
    	
    
    }
    
    1. 给定整数n和m, 将1到n的这n个整数按字典序排列之后, 求其中的第m个数。
      对于n=11, m=4, 按字典序排列依次为1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9, 因此第4个数是2.
      对于n=200, m=25, 按字典序排列依次为1 10 100 101 102 103 104 105 106 107 108 109 11 110 111 112 113 114 115 116 117 118 119 12 120 121 122 123 124 125 126 127 128 129 13 130 131 132 133 134 135 136 137 138 139 14 140 141 142 143 144 145 146 147 148 149 15 150 151 152 153 154 155 156 157 158 159 16 160 161 162 163 164 165 166 167 168 169 17 170 171 172 173 174 175 176 177 178 179 18 180 181 182 183 184 185 186 187 188 189 19 190 191 192 193 194 195 196 197 198 199 2 20 200 21 22 23 24 25 26 27 28 29 3 30 31 32 33 34 35 36 37 38 39 4 40 41 42 43 44 45 46 47 48 49 5 50 51 52 53 54 55 56 57 58 59 6 60 61 62 63 64 65 66 67 68 69 7 70 71 72 73 74 75 76 77 78 79 8 80 81 82 83 84 85 86 87 88 89 9 90 91 92 93 94 95 96 97 98 99 因此第25个数是120…

    既然是字典序,那么很自然,我们可以考虑使用字典树来实现,但是,这里并不需要真的生成这个字典树,而只需要计算对应分支的节点数就行了。计算分支节点数,那么很简单,节点数就是上级节点*10,总的节点数= 1 + (1 * 10) + (1 * 10 * 10) + (1 * 10 * 10 * 10) +……,这里需要注意最后的边界,n以内的节点数,那么,最后相加的时候必须要把n+1 ~ (1 * 10 * 10 *……)这几个数去掉。
    既然知道了如何计算字典树分支的节点数,要想知道第m个数是什么,那么也就是找第m个节点,首先从1开始,如果1分支的节点数>m,那么第m个数肯定是以1开头,进一步搜索其子节点,搜索子节点时不用再搜索1了,所以是搜索1分支的第m-1个节点。如果1分支的节点数<m, 那么所查找的数肯定不是1开头,那么开始搜索2分支,在2分支中,所要找的数应该是第(m-(1分支节点数))个数。重复这个过程,要么搜索子节点,要么搜索兄弟节点,知道最终m==0,也就是当前节点就是所要搜索的节点。为了便于理解,简单修改了下java代码:

    import java.util.Scanner;
    
    public class Main {
        public static void main(String[] args) {
            Scanner sc = new Scanner(System.in);
            while (sc.hasNext()) {
                long n = sc.nextLong();
                long m = sc.nextLong();
                System.out.println(solve(n, m));
            }
        }
    
        private static long solve(long n, long m) {
            long ans = 1;
            while (m != 0) {
                long cnt = getCntOfPre(ans, n);
                if(cnt >= m) {
                    m --;
                    if(m == 0)
                        break;
                    ans *= 10;
                } else {
                    m -= cnt;
                    ans ++;
                }
            }
            return ans;
        }
    
        private static long getCntOfPre(long pre, long n) {
            long cnt = 1;
            long p = 10;
            for (; pre * p <= n; p *= 10) {
                if (pre * p - 1 + p < n)
                    cnt += p;
                else
                    cnt += n - pre * p + 1;
    
    //          cnt += Math.min(n, pre * p - 1 + p) - pre * p + 1;
            }
            return cnt;
        }
    }
    
    1. 为了不断优化推荐效果,今日头条每天要存储和处理海量数据。假设有这样一种场景:我们对用户按照它们的注册时间先后来标号,对于一类文章,每个用户都有不同的喜好值,我们会想知道某一段时间内注册的用户(标号相连的一批用户)中,有多少用户对这类文章喜好值为k。因为一些特殊的原因,不会出现一个查询的用户区间完全覆盖另一个查询的用户区间(不存在L1<=L2<=R2<=R1)。

    这个题的主要问题就是使用顺序扫描用户的时候会花费比较长的时间,从而导致超时

    为了节省顺序查找的时间,我们可以利用二分查找的思路来实现:
    1.使用ArrrayList将喜好值相同的用户id存储起来(此时这个ArrayList的用户id是递增的)
    2.使用hashmap将该喜好值为k和对应的用户id的list进行存储
    3.每次查找时找到对应k的ArrayList进行二分查找即可
    最后可以通过所有测试用例

    import java.util.*;
    public class Main{
        public int getCount(List<Integer> data, int target){
            int left=0, right = data.size()-1, middle=0;
            while(left <= right){
                middle = left + (right-left)/2;
                if (data.get(middle) > target)
                    right = middle-1;
                else if(data.get(middle) < target)
                    left = middle+1;
                else
                    return middle;
            }
            return left;
        }
         
        public void f(){
            Scanner sc = new Scanner(System.in);
            while(sc.hasNextLine()){
                int n, q, l, r, k;
                n = Integer.parseInt(sc.nextLine());
                Map<Integer, List<Integer>> map = new HashMap<>();
                for(int i=1; i<=n; i++) {
                    int worth = sc.nextInt();
                    if(!map.containsKey(worth))
                        map.put(worth, new ArrayList<>());
                    map.get(worth).add(i);
                }
                sc.nextLine();
                q = Integer.parseInt(sc.nextLine());
                for(int i=0; i<q; i++){
                    l = sc.nextInt();
                    r = sc.nextInt();
                    k = sc.nextInt();
                    sc.nextLine();
                    if(map.containsKey(k)){
                        if(r<map.get(k).get(0) || l > map.get(k).get(map.get(k).size() -1))
                            System.out.println(0);
                        else{
                            int left = getCount(map.get(k), l);
                            int right = getCount(map.get(k), r);
                            if (right < map.get(k).size() && map.get(k).get(right) == r)
                                System.out.println(right-left+1);
                            else
                                System.out.println(right - left);
                        }
                    }else
                        System.out.println(0);
                }
            }
        }
         
        public static void main(String[] args){
            new Main().f();
        }
    }
    
    
    1. 作为一个手串艺人,有金主向你订购了一条包含n个杂色串珠的手串——每个串珠要么无色,要么涂了若干种颜色。为了使手串的色彩看起来不那么单调,金主要求,手串上的任意一种颜色(不包含无色),在任意连续的m个串珠里至多出现一次(注意这里手串是一个环形)。手串上的颜色一共有c种。现在按顺时针序告诉你n个串珠的手串上,每个串珠用所包含的颜色分别有哪些。请你判断该手串上有多少种颜色不符合要求。即询问有多少种颜色在任意连续m个串珠中出现了至少两次。
    // 初始化串珠总个数,连续的串珠个数,颜色种类数,所有串珠的颜色信息数组, 同一颜色的串珠数组, 不合格的颜色个数
    let ballNums, linkNums, colorNums, ballColor = [], sameColorBall = [], count = 0;
    [ballNums, linkNums, colorNums] = readline().split(' ').map(item => Number(item));
     
    // 依次保存每个串珠所用颜色信息
    // 数组的每个元素都是一个数组,元素数组的第一位代表颜色个数,后续代表所用颜色
    for(let i = 0; i < ballNums; ++i) {
        ballColor[i] = readline().split(' ').map(item => Number(item))
    }
     
    // 将同一颜色出现的串珠序号进行收集
    ballColor.forEach((item, index) => {
        // 若该串珠所用颜色种类大于0
        // console.log(item, 'item');
        if(item[0] > 0) {
            let colorArr = item.slice(1)
            // 下面的item代表不同的颜色种类
            colorArr.forEach(color => {
                // 如果之前已经保存过使用某颜色的串珠序号,则直接将其添加到数组中去
                if(sameColorBall[color]) {
                    sameColorBall[color].push(index + 1)
                } else {
                   sameColorBall[color] = [index + 1]
                }
            })
        }
        
    })
    sameColorBall.forEach(item => {
        // sameColorBall[0]代表使用‘0’这种颜色的所有串珠的序号数组,这里的序号是按顺序排列的
        for(let i = 0; i < item.length - 1; ++i) {
            if(item[i+1] - item[i] < linkNums) {
                ++count;
                break;
            }
            if(ballNums - item[item.length - 1] + item[0] < linkNums) {
                ++count;
                break;
            }
        }
    })
    
    console.log(count);
    
    
    1. 以下函数使用二分查找搜索一个增序的数组,当有多个元素值与目标元素相等时,返回最后一个元素的下标,目标元素不存在时返回-1。请指出程序代码中错误或不符最佳实践的地方(问题不止一处,请尽量找出所有你认为有问题的地方)
    int BinarySearchMax(const std::vector<int>& data, int target){
       int left = 0;
       int right = data.size();
       while (left < right) {
           int mid = (left + right) / 2;
           if (data[mid] <= target)
               left = mid + 1;
           else
               right = mid - 1;
       }
       if (data[right] == target)
           return right;
       return -1;
    }
    

    1、当data大小为零时,明显会出错,应该先判断一下。
    2、 right 应该等于 data.size()-1,否则当目标出现在data最右边或比data中所有的数大时,会访问越界。
    修改后的代码如下

    int BinarySearchMax(const vector<int>& data, int target){
     	if (data.size() == 0) return -1;
     	int left = 0;
     	int right = data.size() - 1;
    	while (left < right) {
     		int mid = (left + right) / 2;
     		if (data[mid] <= target)
     			left = mid + 1;
     		else
     			right = mid - 1;
     	}
     	if (data[right] == target)
     		return right;
     	return -1;
     }
    
    1. 设计一个TODO List,页面结构如下图所示,要求:使用HTML与CSS完成界面开发
      实现添加功能:输入框中可输入任意字符,按回车后将输入字符串添加到下方列表的最后,并清空输入框
      实现删除功能:点击列表项后面的“X”号,可以删除该项
      实现模糊匹配:在输入框中输入字符后,将当前输入字符串与已添加的列表项进行模糊匹配,将匹配到的结果显示在输入框下方。如匹配不到任何列表项,列表显示空
      注:以上代码实现需要能在浏览器中正常显示与执行。
      在这里插入图片描述
    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>TODOList</title>
        <style type="text/css">
            body{
                margin: 0;
                background-color: #f5f5f5;
            }
            h1{
                margin: 30px 0 0 0;
                color: #ff5550;
                text-align: center;
                font-size: 60px;
            }
            #back{
                width: 300px;
                margin: 0 auto;
                border: 1px solid #333;
                box-shadow: 0px 0px 3px #999;
                background-color: #fff;
            }
            #back input{
                width: 100%;
                box-sizing: border-box;
                line-height: 30px;
                border: none;
                border-bottom: 1px solid #000;
                padding: 5px 15px;
                font-size: 18px;
            }
            #list_back .single{
                position: relative;
                border-bottom: 1px solid #000;
            }
            #list_back .single p{
                width: 100%;
                height: 30px;
                margin: 0;
                line-height: 30px;
                padding: 5px 15px;
            }
            #list_back .single span{
                position: absolute;
                right: 0;
                top: 0;
                width: 30px;
                text-align: center;
                line-height: 40px;
                font-size: 18px;
                color: #000;
                cursor: pointer;
            }
        </style>
    </head>
    
    <body>
        <h1>todos</h1>
        <div id="back">
            <input id="addInput" type="text" name="">
            <div id="list_back">
    
            </div>
        </div>
        <script type="text/javascript">
            var oAddInput = document.getElementById('addInput');
            var oList_back = document.getElementById('list_back');
            var all = document.getElementsByClassName('single');
            oAddInput.onkeyup = function(){
                // alert(event.keyCode);//13
                // alert(event.code);//Enter
                if(event.keyCode == '13'){
                    // alert('add');
                    var oDiv = document.createElement('div');
                    var oSpan = document.createElement('span');
                    var oP = document.createElement('p');
                    oDiv.appendChild(oP);
                    oDiv.appendChild(oSpan);
                    oP.innerHTML = oAddInput.value;
                    oSpan.innerHTML = '&times;';
                    oDiv.className = 'single';
                    oList_back.appendChild(oDiv);
                    oAddInput.value = '';//清空输入框
                    oSpan.onclick= function(){
                        oList_back.removeChild(this.parentNode);//绑定删除方法
                    };
                }
            };
            //模糊查询
            function select(){
                oAddInput.addEventListener('keyup', function(e){//监听键盘抬起事件(所有键盘按钮)
                    // console.log(e.target.value);
                    var str = e.target.value;
                    var reg = new RegExp('(' + str + ')', 'g');//匹配到的文字变红色,准备工作
                    for( var i = 0; i<all.length; i++ ){
                        var one = all[i].getElementsByTagName('p')[0];
                        var newStr = one.innerText.replace(reg, '<font color=red>$1</font>');//换-->红色,用innerText防止用innerHTML将标签也读取出来出错。
                        if( one.innerText.indexOf(str) == -1 ){//也选用innerHTML
                            all[i].style.display = 'none';//匹配不到的掩藏
                        }else{
                            one.innerHTML = newStr;//匹配到的变红
                        }
                    }
                    if(str == ''){
                        for( var i = 0; i<all.length; i++ ){
                            all[i].style.display = 'block';//输入框空时全部显示
                        }
                    }
                });
            }
            select();  //函数解析完就运行
            
        </script>
    </body>
    
    </html>
    
    1. 以下函数用于找到整数矩阵matrix中,元素之和最大的n行m列的子矩阵的元素之和。请指出程序代码中错误的地方(问题不止一处,请尽量找出所有你认为错误的地方),并在不新增代码行的情况下将问题修复。
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述
    2. 有一个推箱子的游戏, 一开始的情况如下图:
      在这里插入图片描述
      思路:利用广度搜索求最短路径,队列中的每个位置是人的位置和箱子的位置的集合,用四维数组记录走过的路程状态。首先判断人是否已经走到箱子了,位置重合时带箱子一起走,直到箱子的位置和终点的位置重合,输出路程。
    let [n,m] = readline().split(' ').map(item=>Number(item));
    let map = [],start={},end={};
    for(let i=0;i<n;i++){
        let line = readline().split('')
        map.push(line)
        let fstart = line.indexOf('S'),fend = line.indexOf('E'),fbox = line.indexOf('0');
        if(fstart !== -1){
            start.px = i;
            start.py = fstart;
        }
        if(fend !== -1){
            end.x = i;
            end.y = fend;
        }
        if(fbox !== -1){
            start.bx = i;
            start.by = fbox;
        }
    }
    //初始化搜索队列和记录步数的四维数组
    let queue = [start], location=[];
    for(let i=0;i<n;i++){
        location[i]=[]; 
        for(let j=0;j<m;j++){
            location[i][j]=[];
            for(let k=0;k<n;k++){
                location[i][j][k]=[]
                for(let p=0;p<m;p++){
                    location[i][j][k][p]=-1
                }
            }
        }
    }
    location[start.px][start.py][start.bx][start.by]=0
    //移动数组
    const walk = [{x:0,y:1},{x:0,y:-1},{x:1,y:0},{x:-1,y:0}]
    let now={}//存储当前人和箱子的位置
    while(queue.length){
        now = queue.shift();
        //如果到达终点,则输出
        if(now.bx === end.x && now.by === end.y){
            console.log(location[now.px][now.py][now.bx][now.by]);
            break;
        }
        for(let move of walk){
            //移动人,判断人越界
            let player={x:now.px+move.x, y:now.py+move.y}
            if(player.x>=0 && player.x<n && player.y>=0 && player.y<m && map[player.x][player.y]!=='#'){
                let box = {}
                //如果移动后人与箱子重合,也移动箱子
                if(player.x === now.bx && player.y === now.by){
                    //判断箱子越界
                    box={x:now.bx+move.x, y:now.by+move.y}
                    if(box.x<0 || box.x>=n || box.y<0 || box.y>=m || map[box.x][box.y]==='#'){
                        continue;
                    }
                }
                //如果不重合,箱子不动
                else{
                    box.x = now.bx;
                    box.y = now.by;
                }
                //是否已经遍历过
                if(location[player.x][player.y][box.x][box.y]<0){
                    queue.push({px:player.x,py:player.y,bx:box.x,by:box.y});
                    location[player.x][player.y][box.x][box.y] = location[now.px][now.py][now.bx][now.by]+1;
                }
            }
          }  
        
    }
    if(now.bx!==end.x || now.by!==end.y){
        console.log(-1)
    }
    
    1. 有n个房间,现在i号房间里的人需要被重新分配,分配的规则是这样的:先让i号房间里的人全都出来,接下来按照 i+1, i+2, i+3, … 的顺序依此往这些房间里放一个人,n号房间的的下一个房间是1号房间,直到所有的人都被重新分配。

    现在告诉你分配完后每个房间的人数以及最后一个人被分配的房间号x,你需要求出分配前每个房间的人数。数据保证一定有解,若有多解输出任意一个解。

    首先分析题目可知,i号房间的人数在分配完成后必然是最少的,先统计出最少的人数min(这说明循环了几轮),让每个房间减去min以减少循环次数,从最后一个分配的房间循环往前推,记录次数count,在循环过程中第一个是0的房间就是i号房间,其人数为min*n + count;
    p.s要注意房间人数要用long int型

    import java.util.Scanner;
    
    public class Main {
    
        public static void main(String[] args) {
            // TODO Auto-generated method stub
            int n = 0 ,k = 0;
            Scanner a = new Scanner(System.in);
            n = a.nextInt();
            k = a.nextInt();
            long [] p = new long [n];
            for(int i = 0;i < n;i++) {
                p[i] = a.nextInt();
            }
            long min = p[0];
            for(int i = 0;i < n;i++) {
                if(p[i] < min)
                    min = p[i];
            }
            for(int i = 0;i < n;i++) {
                p[i] = p[i] -min;
            }
            int count = 0;
            while(p[k-1] != 0)
            {
                p[k - 1]--;
                count++;
                if(k - 1 == 0)
                    k = n;
                else
                    k--;
            }
            p[k-1] = count + min * n;
            for(int i = 0;i < n;i++) {
                System.out.print(p[i]+" ");
            }
        }
    
    }
    
    1. 请按要求书写一个图片上传的弹窗组件,弹窗的样式要求如下:
      1、样式要求
      (1)宽: 668px, 高: 608px, 圆角5px, 边框1px solid #ccc
      (2)弹窗垂直居中, 左右居中
      (3)标题栏高 :50px , 右边的x不能使用图片,请使用css3画出, 标题文字颜色:红色
      (4)列表元素的高:110px , 宽:110px, 边框 1px solid #ccc
      (5)中间“添加”按钮的图片地址:https://p1.pstatp.com/large/3ecd0004b6bdeff4c48d
      整体样式效果如下图所示:
      在这里插入图片描述
      2、功能要求
      (1)点击“添加”按钮弹出文件选择框, 选择图片(要求只能选择png、jpeg、jpg三种图片)
      (2)选择图片后列表增加一张图片缩略图展示(此时图片未上传到服务器)
      (3)点击上传按钮将当前选择的图片上传到图片服务器(只要求上传当前选择的一张图片,如能实现多个同时上传更佳),上传的图片的接口地址: https://mp.toutiao.com/profile_v2/
      接口说明:接口只接收并且处理二进制文件。
      请编码实现。
      (注:不支持本地IDE)
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            body {
                margin: 0;
            }
             
            .wrap {
                width: 100vw;
                height: 100vh;
                display: flex;
                background: rgba(0, 0, 0, 0.5);
                justify-content: center;
                align-items: center;
            }
             
            .upload {
                width: 668px;
                height: 608px;
                border-radius: 5px;
                background: #fff;
                border: 1px solid #ccc;
            }
             
            .title {
                height: 50px;
                border-bottom: 1px solid #ccc;
            }
             
            .title-name {
                margin-left: 25px;
                float: left;
                font-size: 15px;
                line-height: 50px;
                color: red;
            }
             
            .title-close::before {
                content: "\2716";
                color: #ccc;
            }
             
            .title-close {
                height: 50px;
                margin-right: 25px;
                display: flex;
                float: right;
                align-items: center;
            }
             
            .content {
                height: 458px;
                overflow: auto;
            }
             
            .content-item {
                width: 110px;
                height: 110px;
                margin: 10px;
                border: 1px solid #ccc;
                float: left;
            }
             
            .content-item-upload {
                width: 110px;
                height: 110px;
                margin: 10px;
                border: 1px solid #ccc;
                float: left;
                position: relative;
                cursor: pointer;
                color: #888;
                background: url('https://p1.pstatp.com/large/3ecd0004b6bdeff4c48d');
                background-repeat: no-repeat;
                border: 1px solid #ddd;
                border-radius: 4px;
                overflow: hidden;
                *display: inline;
                *zoom: 1
            }
             
            .content-item-upload input {
                position: absolute;
                font-size: 100px;
                right: 0;
                top: 0;
                opacity: 0;
                filter: alpha(opacity=0);
                cursor: pointer
            }
             
            .footer {
                height: 100px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
             
            .btn {
                width: 85px;
                margin: 0 10px;
                border: 1px solid #ccc;
                padding: 10px 10px;
                border-radius: 5px;
                text-align: center;
                text-decoration: none;
                display: inline-block;
                font-size: 12px;
            }
             
            .btn-red {
                background-color: red;
                border: 1px solid red;
                color: white;
            }
        </style>
    </head>
    
    <body>
        <div class="wrap">
            <div class="upload">
                <div class="title">
                    <div class="title-name">上传图片</div>
                    <div class="title-close"></div>
                </div>
                <div class="content" id='upload-list'>
                    <div class="content-item"><img width="110px" height="110px" src="" /></div>
                </div>
                <div class="footer">
                    <button class="btn btn-red" onclick="upload()">上传</button>
                    <button class="btn">取消</button>
                </div>
            </div>
        </div>
        <script>
            const render = renderList => {
                let documentText = ''
                renderList.forEach(e => {
                    documentText = documentText +
                        `<div class="content-item"><img width="110px" height="110px" src="${e.img}"/></div>`
                })
                documentText = documentText +
                    `<a href="javascript:;" class="content-item-upload">
                        <input id="file-upload" type="file" accept="image/png,image/gif" name="file"/>
                    </a>`
                document.getElementById('upload-list').innerHTML = documentText
                document.getElementById('file-upload').addEventListener('change', function () {
                    var file = this.files[0];
                    var reader = new FileReader();
                    let res = reader.readAsDataURL(file);
                    reader.onloadend = e => {
                        console.log(e.target.result)
                        inputList.push({
                            img: e.target.result
                        })
                        render(inputList)
                    }
                })
            }
            const upload = () => {
                uploadList.forEach(e => {
                    let formData = new FormData();
                    formData.append("img", e);
                    fetch("https://mp.toutiao.com/profile_v2/", {
                        method: 'POST',
                        body: formData
                    });
                })
             
            }
            var inputList = []
            var uploadList = []
             
            window.onload = () => {
                render(inputList)
            }
        </script>
    </body>
    
    </html>
    
    1. 以下函数用于将一颗二叉搜索树转换成一个有序的双向链表。要求不能创建任何新的节点,只能调整树种节点指针的指向。如输入下图中左边的二叉搜索树,则输出转换后的排序双向链表:
      在这里插入图片描述
        TreeNode* Convert(TreeNode* root)
        {
            if(root==NULL)
                return NULL;
            TreeNode* listHead = NULL;
            TreeNode* listLastNode = NULL;
            stack<TreeNode*> s;
            while(root||!s.empty()){
                while(root){
                    s.push(root);
                    root=root->left;
                }
                root=s.top();  
                s.pop();
                root->left=listLastNode;
                if (listHead == NULL){
                    listHead = root;
                }else{
                    listLastNode->right = root;
                }
                listLastNode = root;
                root=root->right;
            }
            while(listHead&&listHead->left)
                listHead=listHead->left;
            return listHead;
        }
    
    展开全文
  • Web前端笔试115道(带答案及解析)

    万次阅读 多人点赞 2018-07-29 16:25:01
     由上分析知道,@import url(style.css) 和@import url(“style.css”)是最优的选择,兼容的浏览器最多。  从字节优化的角度来看@import url(style.css)最值得推荐。 4、常见的浏览器内核有哪些?  使用...

    1、html5为什么只需要写<!doctype html>?

        答:html5不是基于sgml(标准通用标记语言),不需要对dtd文件进行引用,但是需要doctype来规范浏览器的行为,

        否则浏览器将开启怪异模式,而html4.01基于sgml,需要引入dtd,才能告知浏览器文档使用的文档类型

    2、行内元素有哪些?块级元素有哪些?空(void)元素有哪些?

        行内元素有:a b span img input select strong(强调的语气)

        块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p

        知名的空元素:

        <br> <hr> <img> <input> <link> <meta>

        鲜为人知的是:

        <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

    3、页面导入样式时,使用link和@import有什么区别?

        两者都是外部引用CSS的方式,但是存在一定的区别:

      区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。

      区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。

      区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。

      区别4:link支持使用Javascript控制DOM去改变样式;而@import不支持。

        补充:@import最优写法

        @import的写法一般有下列几种:

        @import ‘style.css’ //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别

        @import “style.css” //Windows IE4/ NS4, Macintosh IE4/NS4不识别

        @import url(style.css) //Windows NS4, Macintosh NS4不识别

        @import url(‘style.css’) //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别

        @import url(“style.css”) //Windows NS4, Macintosh NS4不识别

        由上分析知道,@import url(style.css) 和@import url(“style.css”)是最优的选择,兼容的浏览器最多。

        从字节优化的角度来看@import url(style.css)最值得推荐。

    4、常见的浏览器内核有哪些?

        使用Trident内核的浏览器:IE、Maxthon、TT、The World等;

        使用Gecko内核的浏览器:Netcape6及以上版本、FireFox、MozillaSuite/SeaMonkey;

        使用Presto内核的浏览器:Opera7及以上版本;

        使用Webkit内核的浏览器:Safari、Chrome。

    5、html5有哪些新特性?移除了哪些元素?如何处理HTML5新标签的浏览器兼容性问题?如何区分html和html5?

        新增的元素有绘画 canvas ,用于媒介回放的 video 和 audio 元素,本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失,而sessionStorage的数据在浏览器关闭后自动删除,此外,还新增了以下的几大类元素。

        内容元素,article、footer、header、nav、section。

        表单控件,calendar、date、time、email、url、search。

        控件元素,webworker, websockt, Geolocation。

        移出的元素有下列这些:

        显现层元素:basefont,big,center,font, s,strike,tt,u。

        性能较差元素:frame,frameset,noframes。

     

        如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5?

        处理兼容问题有两种方式:

        1.IE8/IE7/IE6支持通过document.方法产生的标签,利用这一特性让这些浏览器支持HTML5新标签。

        2.使用是html5shim框架

        另外,DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素,此外,还可以根据新增的结构、功能元素来加以区分。

     

    6、iframe有哪些优缺点?

        优点:

                1.用来实现长连接,在websocket不可用的时候作为一种替代,最开始由google发明。Comet:基于 HTTP 长连接的”服务器推”技术

                2.跨域通信。JavaScript跨域总结与解决办法 ,类似的还有浏览器多页面通信,比如音乐播放器,用户如果打开了多个tab页,应该只有一个在播放。

                3.历史记录管理,解决ajax化网站响应浏览器前进后退按钮的方案,在html5的history api不可用时作为一种替代。

                4.纯前端的utf8和gbk编码互转。比如在utf8页面需要生成一个gbk的encodeURIComponent字符串,可以通过页面加载一个gbk的iframe,然后主页面与子页面通信的方式实现转换,这样就不用在页面上插入一个非常巨大的编码映射表文件了

        缺点:

                 1、在网页中使用框架结构最大的弊病是搜索引擎的”蜘蛛”程序无法解读这种页面。当”蜘蛛”程序遇到由数个框架组成的网页时,它们只看到框架而 无法找到链接,因此它们会以为该网站是个死站点,并且很快转身离去。对一个网站来说这无异于一场灾难。

              如果你想销售产品,你需要客户;如想得到客户,你首先要让人们访问你的网站,而要做到这一点,你就非求助于搜索引擎不可。你花费了大量的时间、 精力和金钱开设了一家网上商店,却又故意不让搜索引擎检索你,这就好象开家零售商店,却将窗户全部漆成黑色,而且还不挂任何招牌一样。

     

              2、框架结构有时会让人感到迷惑,特别是在几个框架中都出现上下、左右滚动条的时候。这些滚动条除了会挤占已经非常有限的页面空间外,还会分散 访问者的注意力。访问者遇到这种网站往往会立刻转身离开。他们会想,既然你的主页如此混乱,那么网站的其他部分也许更不值得浏览。

              3、链接导航问题。使用框架结构时,你必须保证正确设置所有的导航链接,如不然,会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架 内,这种情况下访问者便被陷住了,因为此时他没有其他地方可去。

    7、label的作用是什么?是怎么使用的?

        Label 中有两个属性是非常有用的,一个是FOR、另外一个就是ACCESSKEY了。

        FOR属性

         功能:表示Label标签要绑定的HTML元素,你点击这个标签的时候,所绑定的元素将获取焦点。

         用法:<Label FOR=”InputBox”>姓名</Label><input ID=”InputBox” type=”text”>

        ACCESSKEY属性:

         功能:表示访问Label标签所绑定的元素的热键,当您按下热键,所绑定的元素将获取焦点。

         用法:<Label FOR=”InputBox” ACCESSKEY=”N”>姓名</Label><input ID=”InputBox” type=”text”>

        局限性:accessKey属性所设置的快捷键不能与浏览器的快捷键冲突,否则将优先激活浏览器的快捷键。

    8、实现不使用border,画出1px高的线,在不同浏览器下的Quirksmode和CSSCompat模式下都能保持一致的效果?

    <div style=”height:1px;overflow:hidden;background:red”></div>

    9、网页验证码是干嘛的?是为了解决什么安全问题?

    网页验证码介绍:”验证码”的英文表示为CAPTCHA(Completely Automated Public Turing test to tell Computers and Humans Apart),翻译过来就是”全自动区分计算机和人类的图灵测试”,顾名思义,它是用来区分计算机和人类的。在 CAPTCHA 测试中,作为服务器的计算机会自动生成一个问题由用户来解答。这个问题可以由计算机生成并评判,但是必须只有人类才能解答。由于计算机无法解答 CAPTCHA 的问题,所以回答出问题的用户就可以被认为是人类。 CAPTCHA 是由计算机来考人类,而不是标准图灵测试中那样由人类来考计算机,因此人们有时称 CAPTCHA 是一种反向图灵测试。

    验证码的原理:服务器端随机生成验证码字符串,保存在内存中,并写入图片,发送给浏览器端显示,浏览器端输入验证码图片上字符,然后提交服务器端,提交的字符和服务器端保存的该字符比较是否一致,一致就继续,否则返回提示。攻击者编写的robot程序,很难识别验证码字符,顺利的完成自动注册,登录;而用户可以识别填写,所以这就实现了阻挡攻击的作用。而图片的字符识别,就是看图片上的干扰强度了。就实际的效果来说,验证码只是增加攻击者的难度,而不可能完全的防止。

    10、介绍一下标准的css的盒子模型?与低版本IE的盒子模型有什么不同?

        盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型

        W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分

        IE 盒子模型的范围也包括 margin、border、padding、content,和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 pading

    11、如何居中div,如何居中一个浮动元素?如何让绝对定位的div居中?

        a.margin:xpx auto;

        b.确定容器的宽高,这里宽度是必须的,高度可以不设,设置外层的上外边距和左外边距分别是宽高的一半。

         实现居中关键在于 margin设置与 position:relative.

        .div {

         width:500px ;

         height:300px;

         margin: -150px 0 0 -250px;

         position:relative;

         left:50%;

         top:50%;

    }

    c.position:absolute;

            top: 50%;

            left: 50%; 只能把div定位在以红色圈为起点的位置,加上margin:-100px 0px 0px -100

    12、display有哪些值?说明他们的作用?

        block :块对象的默认值。用该值为对象之后添加新行

        none :隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间

        inline :内联对象的默认值。用该值将从对象中删除行

        compact :分配对象为块对象或基于内容之上的内联对象

        marker :指定内容在容器对象之前或之后。要使用此参数,对象必须和:after及:before 伪元素一起使用

        inline-table :将表格显示为无前后换行的内联对象或内联容器

        list-item :将块对象指定为列表项目。并可以添加可选项目标志

        run-in :分配对象为块对象或基于内容之上的内联对象

        table :将对象作为块元素级的表格显示

    13、position的值relative和absolute的定位原点是什么?

    Absolute,CSS中的写法是:position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定。

     

    Relative,CSS中的写法是:position:relative; 他的意思是绝对相对定位,他是参照父级的原始点为原始点,无父级则以BODY的原始点为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。

    14、display设置为inline-block时,li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?

        行框的排列会受到中间空白(回车空格等等)的影响,这些空白也会被应用样式,占据空间,所以会有间隔

        解决:设置ul的font-size为0,缺陷是必须重新在li中去设置字体大小

     

    15、请解释下为什么会出现浮动和什么时候需要清除浮动?清除浮动的方式?

        a.添加新的元素 、应用 clear:both;

        b.父级定义 overflow: auto(注意:是父级div也就是这里的 div.outer) 一个对seo比较友好,另个hidden对seo不是太友好

            在IE6中还需要触发 hasLayout ,例如 zoom:1;

        c.据说是最高大上的方法 :after

            方法:(注意:作用于浮动元素的父亲)IE6-7不支持:after,

            使用 zoom:1触发 hasLayout

            {zoom:1;} /*==for IE6/7 Maxthon2==*/

            :after {clear:both;content:’.’;display:block;width: 0;height: 0;visibility:hidden;}

        d.使用 br标签和其自身的 html属性,<br clear=”all” /> clear=”all | left | right | none” 属性

        e.父元素也设置浮动

        f.父元素设置display:table 盒模型属性已经改变,由此造成的一系列问题,得不偿失,不推荐使用

    16、在网页中的应该使用奇数还是偶数的字体?为什么呢?

        偶数字号相对更容易和 web 设计的其他部分构成比例关系

        使用奇数号字体不好的地方是,文本段落无法对齐

    17、margin和padding分别适合什么场景使用?

        何时应当使用margin:

        (1)需要在border外侧添加空白时,

        (2)空白处不需要有背景(色)时,

        (3)上下相连的两个盒子之间的空白需要相互抵消时,比如15px+20px的margin,将得到20px的空白(注意地方见第三点)。

        何时应当使用padding

        (1)需要在border内侧添加空白时(往往是文字与边框距离的设置),

        (2)空白处需要背景(色)时,

        (3)上下相连的两个盒子之间的空白希望等于两者之和时,比如15px+20px的padding,将得到35px的空白。

        margin使用时应该注意的地方

        margin在垂直方向上相邻的值相同时会发生叠加,水平方向上相邻的值会相加。margin取负值时,在垂直方向上,两个元素的边界仍然会重叠。但是,此时一个为正值,一个为负值,并不是取其中较大的值,而是用正边界减去负边界的绝对值,也就是说,把正的边界值和负的边界值相加。

    18、元素竖向的百分比设定是相对于容器的高度吗?

        答:相对于父容器的宽度

    19、什么是响应式设计?响应式设计的基本原理是什么?如何兼容较低版本的IE?

        答:一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

            优点:

                面对不同分辨率设备灵活性强

                能够快捷解决多设备显示适应问题

            缺点:

                兼容各种设备工作量大,效率低下

                代码累赘,会出现隐藏无用的元素,加载时间加长

                其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果

                一定程度上改变了网站原有的布局结构,会出现用户混淆的情况

        respond.js和css3-mediaqueries-js

    20、设置元素浮动后,该元素的display值是多少?

        display:block;

    21、怎么让chrome支持小于12px的文字?

        chrome私有属性:-webkit-text-size-adjust:none;

        -webkit-transform:scale(0.8);

        行内元素设置:-webkit-transform:scale(0.8);display:inline-block

    22、display:inline-block什么时候会显示间隙?

        1.给 父元素 写font-size:0

        2.把标签写到一行,不要在编辑器里敲回车换行,但是这种写法对于标签很多的情况可读性太差,适用与例如<a></a><a></a>这样简单的结构

    23、有一个高度自适应的div。里面有2个div,一个高度100px,希望另一个填满剩下的高度?

        外层box-sizing: border-box; 同时设置padding: 100px 0 0;

        内层100像素高的元素向上移动100像素,或使用absolute定位防止占据空间;

        另一个元素直接height: 100%;

        外层position: relative;

        百分百自适应元素直接position: absolute; top: 100px; bottom: 0; left: 0

    24、什么是window对象?什么是document对象?

        window它是一个顶层对象,而不是另一个对象的属性即浏览器的窗口。

        document对象是window对象的一个对象属性

    25、null和undefined的区别?

        null是一个表示”无”的对象,转为数值时为0;undefined是一个表示”无”的原始值,转为数值时为NaN。

        null表示”没有对象”,即该处不应该有值

            (1) 作为函数的参数,表示该函数的参数不是对象。

            (2) 作为对象原型链的终点。

        undefined表示”缺少值”,就是此处应该有一个值,但是还没有定义

            (1)变量被声明了,但没有赋值时,就等于undefined。

            (2) 调用函数时,应该提供的参数没有提供,该参数等于undefined。

            (3)对象没有赋值的属性,该属性的值为undefined。

            (4)函数没有返回值时,默认返回undefined。

    26、什么是闭包(closure)?为什么要用它?

        闭包就是能够读取其他函数内部变量的函数

        由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成”定义在一个函数内部的函数”。

        所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。

        闭包的用途:

        闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中

        重用变量又不能造成全局污染

    27、js代码中”use strict”是什么意思?使用它区别是什么?

        进入”严格模式”的标志,老版本的浏览器会把它当作一行普通字符串,加以忽略

        将”use strict”放在脚本文件的第一行,则整个脚本都将以”严格模式”运行。如果这行语句不在第一行,则无效,整个脚本以”正常模式”运行。如果不同模式的代码文件合并成一个文件,这一点需要特别注意。

        (严格地说,只要前面不是产生实际运行结果的语句,”use strict”可以不在第一行,比如直接跟在一个空的分号后面。)

        将”use strict”放在函数体的第一行,则整个函数以”严格模式”运行

        因为第一种调用方法不利于文件合并,所以更好的做法是,借用第二种方法,将整个脚本文件放在一个立即执行的匿名函数之中

        – 消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;

        – 消除代码运行的一些不安全之处,保证代码运行的安全;

        – 提高编译器效率,增加运行速度;

        – 为未来新版本的Javascript做好铺垫。

    28、js中有一个函数,执行对象查找时,永远不会去查找原型,这个函数是什么?

        hasOwnProperty()函数用于指示一个对象自身(不包括原型链)是否具有指定名称的属性。如果有,返回true,否则返回false。该方法属于Object对象,由于所有的对象都”继承”了Object的对象实例,因此几乎所有的实例对象都可以使用该方法。

    29、js延迟加载的方式有哪些?

    js的延迟加载有助与提高页面的加载速度,以下是延迟加载的几种方法:

    1.使用setTimeout延迟方法的加载时间

    延迟加载js代码,给网页加载留出更多时间

    <script type=”text/javascript” >

    function A(){

    $.post(“/lord/login”,{name:username,pwd:password},function(){

    alert(“Hello”);

    });

    }

    $(function (){

    setTimeout(‘A()’, 1000); //延迟1秒

    })

    </script>

    2.让js最后加载

    例如引入外部js脚本文件时,如果放入html的head中,则页面加载前该js脚本就会被加载入页面,而放入body中,则会按照页面从上倒下的加载顺序来运行JavaScript的代码~~~ 所以我们可以把js外部引入的文件放到页面底部,来让js最后引入,从而加快页面加载速度

     

    3.上述方法2也会偶尔让你收到Google页面速度测试工具的”延迟加载javascript”警告。所以这里的解决方案将是来自Google帮助页面的推荐方案。

    //这些代码应被放置在</body>标签前(接近HTML文件底部)

    <script type=”text/javascript”>

    function downloadJSAtOnload() {

    var element = document.createElement(“script”);

    element.src = “defer.js”;

    document.body.appendChild(element);

    }

    if (window.addEventListener)

    window.addEventListener(“load”, downloadJSAtOnload, false);

    else if (window.attachEvent)

    window.attachEvent(“onload”, downloadJSAtOnload);

    else window.onload = downloadJSAtOnload;

    </script>

     

    这段代码意思是等到整个文档加载完后,再加载外部文件”defer.js”。

    使用此段代码的步骤:

    1).复制上面代码

    2).粘贴代码到HTML的标签前 (靠近HTML文件底部)

    3).修改”defer.js”为你的外部JS文件名

    4).确保你文件路径是正确的。例如:如果你仅输入”defer.js”,那么”defer.js”文件一定与HTML文件在同一文件夹下。

     

    注意:这段代码直到文档加载完才会加载指定的外部js文件。因此,不应该把那些页面正常加载需要依赖的javascript代码放在这里。而应该将JavaScript代码分成两组。一组是因页面需要而立即加载的javascript代码,另外一组是在页面加载后进行操作的javascript代码(例如添加click事件或其他东西)。这些需等到页面加载后再执行的JavaScript代码,应放在一个外部文件,然后再引进来。

    30、同步和异步的区别?

    同步就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去;异步是指进程不需要一直等下去,而是继续执行下面的操作,不管其他进程的状态。当有消息返回时系统会通知进程进行处理,这样可以提高执行的效率。

        举个浏览器例子:普通B/S模式(同步)AJAX技术(异步)

    同步:提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事

    异步: 请求通过事件触发->服务器处理(这是浏览器仍然可以作其他事情)->处理完毕

    再举个生活的例子:大家联系的时候如果使用手机通话,那么只能跟一个人联系,过程中做不了其他任何操作,如果使用短信或者聊天的方式,就可以同时跟很多人聊天,别人收到信息后会回复,在回复之前还可以跟另外的人进行聊天。

     

    31、document.write和innerHTML的区别?

        1.document.write是直接写入到页面的内容流,如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数,会导致页面被重写。

        2.innerHTML则是DOM页面元素的一个属性,代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容,则需要修改document.documentElement.innerElement。

        3.两者都可动态包含外部资源如JavaScript文件

        通过document.write插入<script></script>元素会自动执行其中的脚本;

        大多数浏览器中,通过innerHTML插入<script></script>元素并不会执行其中的脚本

        innerHTML很多情况下都优于document.write,其原因在于其允许更精确的控制要刷新页面的那一个部分。

    32、.call()和.apply()的含义和区别?

        1、call,apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,因为属于Function.prototype,所以每个Function对象实例(就是每个方法)都有call,apply属性。既然作为方法的属性,那它们的使用就当然是针对方法的了,这两个方法是容易混淆的,因为它们的作用一样,只是使用方式不同。

        2、语法:foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments) == this.foo(arg1, arg2, arg3);

        3、相同点:两个方法产生的作用是完全一样的。

        4、不同点:方法传递的参数不同,单个单数传入,另一个可以以数组方式传入

     

    33、JQ和JQUI有啥区别?

     

    jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是”write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

    jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。

    34、需求:实现一个页面操作不会整页刷新的网站,并且能在浏览器的前进,后退时正确响应。给出你的技术实现方案?

        用cookie或者localStorage来记录应用的状态即可,刷新页面时读取一下这个状态,然后发送相应ajax请求来改变页面即可

        HTML5里引用了新的API,就是history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的

        虽然ajax可以无刷新改变页面内容,但无法改变页面URL

        其次为了更好的可访问性,内容发生改变后,改变URL的hash。但是hash的方式不能很好的处理浏览器的前进、后退等问题

        有的浏览器引入了onhashchange的接口,不支持的浏览器只能定时去判断hash是否改变

        再有,ajax的使用对搜索引擎很不友好,往往蜘蛛爬到的区域是空的

        为了解决传统ajax带来的问题,HTML5里引入了新的API,即:history.pushState, history.replaceState

        可以通过pushState和replaceState接口操作浏览器历史,并且改变当前页面的URL。

        pushState是将指定的URL添加到浏览器历史里,replaceState是将指定的URL替换当前的URL。

        如何调用

        var state = {    title: title,    url: options.url,    otherkey: othervalue};window.history.pushState(state, document.title, url);

        state对象除了要title和url之外,也可以添加其他的数据,比如:还想将一些发送ajax的配置给保存起来。

        replaceState和pushState是相似的,不需要多做解释。

        如何响应浏览器的前进、后退操作

        window对象上提供了onpopstate事件,上面传递的state对象会成为event的子对象,这样就可以拿到存储的title和URL了。

        window.addEventListener(‘popstate’, function(e){ if (history.state){    var state = e.state; //do something(state.url, state.title); }}, false);

        这样就可以结合ajax和pushState完美的进行无刷新浏览了。

    35、js的数据类型都有哪些?

        字符串、数字、布尔、数组、对象、Null、Undefined

    36、已知ID的input输入框,希望获取这个输入框的输入值,怎么做?(不使用第三方框架)

        document.getElementById(id).value;

    37、希望获取到页面中所有的checkbox怎么做?(不使用第三方框架)

        document.getElementsByTagName(‘input’);

        遍历循环

    38、设置一个已知ID的div和html内容为xxx,字体颜色设置为黑色?(不使用第三方框架)

        var div = document.getElementById(id);

        div.innerHTML = ”;

        div.style.color = ”;

    39、当一个dom节点被点击时,我们需要能够执行一个函数,应该怎么做?

        直接在DOM里绑定事件:”<div οnclick=”test()”>xx</div>” …

         在JS里通过onclick绑定:xxx.onclick = test

         通过事件添加进行绑定:addEventListener(xxx, ‘click’, test)

          那么问题来了,Javascript的事件流模型都有什么?

        “事件冒泡”:事件开始由最具体的元素接受,然后逐级向上传播

        “事件捕捉”:事件由最不具体的节点先接收,然后逐级向下,一直到最具体的

        “DOM事件流”:三个阶段:事件捕捉,目标阶段,事件冒泡

    40、什么是Ajax和JSON,他们的优缺点?

        Ajax是异步JavaScript和XML,用于在Web页面中实现异步数据交互。

      优点:

            可以使得页面不重载全部内容的情况下加载局部内容,降低数据传输量

            避免用户不断刷新或者跳转页面,提高用户体验

        缺点:

            对搜索引擎不友好(

            要实现ajax下的前后退功能成本较大

            可能造成请求数的增加

            跨域问题限制

        JSON是一种轻量级的数据交换格式,ECMA的一个子集

          优点:轻量级、易于人的阅读和编写,便于机器(JavaScript)解析,支持复合数据类型(数组、对象、字符串、数字)

    41、请看下列代码输出什么?解释原因?

        var a;

        alert(typeof a); //undefined

        alert(b); //报错

        解释:Undefined是一个只有一个值的数据类型,这个值就是”undefined”,

        在使用var声明变量但并未对其赋值进行初始化时,这个变量的值就是undefined。而b由于未声明将报错。

        注意未申明的变量和声明了未赋值的是不一样的。

        ar a = null;

        alert(typeof a); //object

      解释:null是一个只有一个值的数据类型,这个值就是null。表示一个空指针对象,所以用typeof检测会返回”object”

     

    42、js的typeof返回哪些数据类型?

        有如下6种返回值:

    1)number;

    2)string;

    3)boolean;

    4)object

    5)function

    6)undefined;

    43、split() join()的区别?

        join() 方法用于把数组中的所有元素放入一个字符串。

        元素是通过指定的分隔符进行分隔的。

        指定分隔符方法join(“#”);其中#可以是任意

        与之相反的是split()方法:用于把一个字符串分割成字符串数组.

    44、数组方法pop() push() unshift() shift()?

        push和pop方法,这两个方法只会对数组从尾部进行压入或弹出,而且是在原数组进行操作,任何的改动都是会影响到操作的数组。push(args)可以每次压入多个元素,并返回更新后的数组长度。pop()函数每次只会弹出最后一个结尾的元素,并返回弹出的元素,如果是对空组数调用pop()则返回undefined。 如果参数是数组则是将整个数组当做一个元素压入到原来的数组当中。并不会产生类似concat合并数组时产生的”拆分现象”

        unshift和shift这两个方法都是通过对数组的头部进行的操作,其他基本跟push和pop类似

        shift:从集合中把第一个元素删除,并返回这个元素的值。

        unshift: 在集合开头添加一个或更多元素,并返回新的长度

        push:在集合中添加元素,并返回新的长度

        pop:从集合中把最后一个元素删除,并返回这个元素的值

    45、ajax请求时,如何解释json数据?

        1.$.JSON(url,params,fun);

        2.$.ajax({}); dataType:’json’

        都可以使用$each();进行遍历

        $.each(object,function(index,item){

        });

    46、js的本地对象,内置对象和宿主对象?

        本地对象:

            Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError官方定义好了的对象

        内置对象: Global 和 Math,内置对象是本地对象的一种

        宿主对象:所有的BOM和DOM对象都是宿主对象,是那些官方未定义,你自己构建的对象加上DOM和BOM对象组成的

    47、列举所了解的前端框架并简述?

    以下是常用的前端基础框架:

    以下是常见的前端构建框架:

    以下是场检的JS/CSS模块化开发的框架:

    48、对web标准以及w3c的理解与认识?

        (1)web标准规范要求,书写标签必须闭合、标签小写、不乱嵌套,可提高搜索机器人对网页内容的搜索几率。— SEO

        (2)建议使用外链css和js脚本,从而达到结构与行为、结构与表现的分离,提高页面的渲染速度,能更快地显示页面的内容。

        (3)样式与标签的分离,更合理的语义化标签,使内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件, 从而降低维护成本、改版更方便

        (4)不需要变动页面内容,便可提供打印版本而不需要复制内容,提高网站易用性

        遵循w3c制定的web标准,能够使用户浏览者更方便的阅读,使网页开发者之间更好的交流。

    49、xhtml和html有什么区别?

        XHTML是HTML 4.01和XML1.0的杂交,XHTML1.0是基于HTML4.01的

        HTML是一种基于标准通用标记语言(SGML)的应用,而XHTML则基于可扩展标记语言(XML),HTML和XHTML其实是平行发展的两个标准。本质上说,XHTML是一个过渡技术,结合了部分XML的强大功能及大多数HTML的简单特性。建立XHTML的目的就是实现HTML向XML的过渡

        1、XHTML要求正确嵌套

        2、XHTML所有元素必须关闭

        3、XHTML区分大小写

        4、XHTML属性值要加引号

        5、XHTML用id属性代替name属性

        6、属性值不能简写

     

     

     

    50、行内元素有哪些?块级元素有哪些?css和盒子模型?

        盒子模型:内容、填充(padding)、边框(border)、外边界(margin)

        box-sizing:border-box; box-sizing:content-box;

    51、css选择器有哪些?哪些属性可以继承?优先级算法如何计算?内联和import哪个级别更高?

        可继承的:font-size font-family color

        不可继承的:border padding margin background-color width height

        优先级:!important > [ id > class > tag ] important 比 内联优先级高

    52、前端页面有哪三层构成,分别是什么?作用是什么?

        结构层、表示层、行为层

    结构层(structural layer)

    由 HTML 或 XHTML之类的标记语言负责创建。标签,也就是那些出现在尖括号里的单词,对网页内容的语义含义做出了描述,但这些标签不包含任何关于如何显示有关内容的信息。例如,P标签表达了这样一种语义:”这是一个文本段。”

    表示层(presentation layer)

    由 CSS 负责创建。 CSS对”如何显示有关内容”的问题做出了回答。

    行为层(behaviorlayer)

    负责回答”内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域

    53、你如何对网站的文件和资源进行优化?期待的解决方法包括?

             A、文件合并,减少http请求,合并JavaScript和CSS文件、CSS Sprites、图像映射 (Image Map)和使用Data URI来编码图片

            B、文件最小化/文件压缩,减少文件下载的体积;常用的工具是YUI Compressor

            C、使用 CDN 托管,尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定

            D、缓存的使用(多个域名来提供缓存)

            E、GZIP 压缩你的 JS 和 CSS 文件

     

    54、看下列代码?输出什么?解释原因?

        var a = null;

        alert(typeof a);

    答案:输出为object, JS类型值是存在32 BIT 单元里,32位有1-3位表示TYPE TAG,其它位表示真实值

    而表示object的标记位正好是低三位都是0

    000: object. The data is a reference to an object.

    而js 里的Null 是机器码NULL空指针, (0x00 is most platforms).所以空指针引用 加上 对象标记还是0,最终体现的类型还是object..

    这也就是为什么Number(null)===0吧…

    The history of “typeof null”

    2. 曾经有提案 typeof null === ‘null’.但提案被拒绝

    harmony:typeof_null

    55、看代码给答案?并进行解释?

        var a = new Object();

        a.value=1;

        b = a;

        b.value=2;

        alert(a.value);

    56、var numberArray = [3,6,2,4,1,5];

        1) 实现对该数组的倒排,输出[5,1,4,2,6,3]

      2) 实现对该数组的降序排列,输出[6,5,4,3,2,1]

             var numberArray = [3,6,2,4,1,5];

             numberArray.reverse(); // 5,1,4,2,6,3

             numberArray.sort(function(a,b){ //6,5,4,3,2,1

             return b-a;

             })

    57、你能描述一下渐进增强和优雅降级之间的不同吗?

        如果提到了特性检测,可以加分。

        检测浏览器,渐进增强就是让牛b的浏览器的效果更好,优雅降级就是让2b的浏览器在功能ok的情况下效果一般。

    58、线程与进程的区别?

        一个程序至少有一个进程,一个进程至少有一个线程.

        线程的划分尺度小于进程,使得多线程程序的并发性高。

        另外,进程在执行过程中拥有独立的内存单元,而多个线程共享内存,从而极大地提高了程序的运行效率。

        线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行,必须依存在应用程序中,由应用程序提供多个线程执行控制。

        从逻辑角度来看,多线程的意义在于一个应用程序中,有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用,来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。

     

    59、请解释一下什么是”语义化的 HTML”?

         语义化的好处:

             1:去掉或样式丢失的时候能让页面呈现清晰的结构:

                html本身是没有表现的,我们看到例如<h1>是粗体,字体大小2em,加粗;<strong>是加粗的,不要认为这是html的表现,这些其实html默认的css样式在起作用,所以去掉或样式丢失的时候能让页面呈现清晰的结构不是

                的HTML结构的优点,但是浏览器都有有默认样式,默认样式的目的也是为了更好的表达html的语义,可以说浏览器的默认样式和语义化的HTML结构是不可分割的。

            2.屏幕阅读器(如果访客有视障)会完全根据你的标记来”读”你的网页.

            3.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页(通常是因为这些设备对CSS的支持较弱).

            4.搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重.

            5.你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,    而只注重语义标记.

            6.便于团队开发和维护

            语义化的HTML就是:标题用h1-h6,文字段落用p,列表用ul li,大致如此

     

    60、为什么利用多个域名来提供网站资源会更有效?

         浏览器同一时间可以从一个域名下载多少资源?你的浏览器能同时保持对一个域名的多少连接?

        三个最主流的原因:

         1. CDN缓存更方便

         2. 突破浏览器并发限制 (你随便挑一个 G家的 url: https://lh4.googleusercontent.com/- si4dh2myPWk/T81YkSi__AI/AAAAAAAAQ5o/LlwbBRpp58Q/w497-h373/IMG_20120603_163233.jpg, 把前面的 lh4换成 lh3,lh6 啥的,都照样能够访问,像地图之类的需要大量并发下载图片的站点,这个非常重要。)

         3. Cookieless, 节省带宽,尤其是上行带宽 一般比下行要慢。。。

        还有另外两个非常规原因:

         4. 对于UGC的内容和主站隔离,防止不必要的安全问题( 上传js窃取主站cookie之类的) 。

         正是这个原因要求用户内容的域名必须不是自己主站的子域名,而是一个完全独立的第三方域名。

        5. 数据做了划分,甚至切到了不同的物理集群,通过子域名来分流比较省事. ^_^ 这个可能被用的不多。

        PS: 关于Cookie的问题,带宽是次要的,安全隔离才是主要的。

         关于多域名,也不是越多越好,虽然服务器端可以做泛解释,浏览器做dns解释也是耗时间的,而且太多域名,如果要走 https的话,还有要多买证书和部署的问题,^_^。

     

    61、请说出三种减少页面加载时间的方法。(加载时间指感知的时间或者实际加载时间)

        1.优化图片

        2.图像格式的选择(GIF:提供的颜色较少,可用在一些对颜色要求不高的地方)

        3.优化CSS(压缩合并css,如margin-top,margin-left…)

        4.网址后加斜杠(如www.campr.com/目录,会判断这个”目录是什么文件类型,或者是目录。)

        5.标明高度和宽度(如果浏览器没有找到这两个参数,它需要一边下载图片一边计算大小,如果图片很多,浏览器需要不断地调整页面。这不但影响速度,也影响浏览体验。

        当浏览器知道了高度和宽度参数后,即使图片暂时无法显示,页面上也会腾出图片的空位,然后继续加载后面的内容。从而加载时间快了,浏览体验也更好了。)

        6.减少http请求(合并文件,合并图片)。

     

    62、如果你参与到一个项目中,发现他们使用 Tab 来缩进代码,但是你喜欢空格,你会怎么做?

        1.建议这个项目使用像 EditorConfig (http://editorconfig.org/) 之类的规范

        2.为了保持一致性,接受项目原有的风格

        3.直接使用 VIM 的 retab 命令

     

    63、请写一个简单的幻灯效果页面

        如果不使用JS来完成,可以加分。(如:纯CSS实现的幻灯片效果)

    可以采用CSS3的单选按钮radio来实现图片的切换

    64、你都使用哪些工具来测试代码的性能?

        Profiler, JSPerf(http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout), Dromaeo

     

    65、如果今年你打算熟练掌握一项新技术,那会是什么?

        nodejs,html5,css3,less

     

    66、请谈一下你对网页标准和标准制定机构重要性的理解?

        (google)w3c存在的意义就是让浏览器兼容性问题尽量小,首先是他们对浏览器开发者的约束,然后是对开发者的约束。

     

    67、什么是 FOUC(无样式内容闪烁)?你如何来避免 FOUC?

         FOUC – Flash Of Unstyled Content 文档样式闪烁

        <style type=”text/css” media=”all”>@import “../fouc.css”;</style>

        而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM,然后再去导入外部的CSS文件,因此,在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的,这段时间的长短跟网速,电脑速度都有关系。

        解决方法简单的出奇,只要在<head>之间加入一个<link>或者<script></script>元素就可以了。

     

    68、doctype(文档类型)的作用是什么?你知道多少种文档类型?

         此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

         该标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

        HTML 4.01 规定了三种文档类型:Strict、Transitional 以及 Frameset。

        XHTML 1.0 规定了三种 XML 文档类型:Strict、Transitional 以及 Frameset。

        Standards (标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,而 Quirks

    (包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页。

     

    69、浏览器标准模式和怪异模式之间的区别是什么?

        W3C标准推出以后,浏览器都开始采纳新标准,但存在一个问题就是如何保证旧的网页还能继续浏览,在标准出来以前,很多页面都是根据旧的渲染方法编写的,如果用的标准来渲染,将导致页面显示异常。为保持浏览器渲染的兼容性,使以前的页面能够正常浏览,浏览器都保留了旧的渲染方法(如:微软的IE)。这样浏览器渲染上就产生了Quircks mode和Standars mode,两种渲染方法共存在一个浏览器上。

     

         IE盒子模型和标准W3C盒子模型:ie的width包括:padding\border。 标准的width不包括:padding\border

        在js中如何判断当前浏览器正在以何种方式解析?

         document对象有个属性compatMode ,它有两个值:

        BackCompat 对应quirks mode

         CSS1Compat 对应strict mode

     

    70、使用 XHTML 的局限有哪些?

        xhtml要求严格,必须有head、body每个dom必须要闭合。

        如果页面使用’application/xhtml+xml’会有什么问题吗?

         一些老的浏览器并不兼容。

        十六、如果网页内容需要支持多语言,你会怎么做?

        编码UTF-8,空间域名需要支持多浏览地址。

        在设计和开发多语言网站时,有哪些问题你必须要考虑?

         1、应用字符集的选择 2、语言书写习惯&导航结构 3、数据库驱动型网站

     

    71、data-属性的作用是什么?

        data-为前端开发者提供自定义的属性,这些属性集可以通过对象的dataset属性获取,不支持该属性的浏览器可以通过 getAttribute方法获取

        <div data-author=”david” data-time=”2011-06-20″ data-comment-num=”10″>…</div>

        div.dataset.commentNum; // 10

     

        需要注意的是,data-之后的以连字符分割的多个单词组成的属性,获取的时候使用驼峰风格。

        并不是所有的浏览器都支持.dataset属性,测试的浏览器中只有Chrome和Opera支持。

     

    72、如果把 HTML5 看作做一个开放平台,那它的构建模块有哪些?

         <nav>, <header>,<section>, <footer>

     

    73、请描述一下 cookies,sessionStorage 和 localStorage 的区别?

        sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据。有了本地数据,就可以避免数据在浏览器和服务器间不必要地来回传递。

        sessionStorage、localStorage、cookie都是在浏览器端存储的数据,其中sessionStorage的概念很特别,引入了一个”浏览器窗口”的概念。sessionStorage是在同源的同窗口(或tab)中,始终存在的数据。也就是说只要这个浏览器窗口没有关闭,即使刷新页面或进入同源另一页面,数据仍然存在。关闭窗口后,sessionStorage即被销毁。同时”独立”打开的不同窗口,即使是同一页面,sessionStorage对象也是不同的

         cookies会发送到服务器端。其余两个不会。

         Microsoft指出InternetExplorer8增加cookie限制为每个域名50个,但IE7似乎也允许每个域名50个cookie。

          Firefox每个域名cookie限制为50个。

          Opera每个域名cookie限制为30个。

        Firefox和Safari允许cookie多达4097个字节,包括名(name)、值(value)和等号。

          Opera允许cookie多达4096个字节,包括:名(name)、值(value)和等号。

          InternetExplorer允许cookie多达4095个字节,包括:名(name)、值(value)和等号。

     

    74、描述下 “reset” CSS 文件的作用和使用它的好处。

         因为浏览器的品种很多,每个浏览器的默认样式也是不同的,所以定义一个css reset可以使各浏览器的默认样式统一。

     

    75、解释下浮动和它的工作原理?

        浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留

     

    76、列举不同的清除浮动的技巧,并指出它们各自适用的使用场景?

        1.使用空标签清除浮动。

            这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。

        2.使用overflow。

            给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。

        3.使用after伪对象清除浮动。

            该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0,否则该元素会比实际高出若干像素;二、content属性是必须的,但其值可以为空,蓝色理想讨论该方法的时候content属性的值设为”.”,但我发现为空亦是可以的。

        *{margin:0;padding:0;}

         body{font:36px bold; color:#F00; text-align:center;}

         #layout{background:#FF9;}

         #layout:after{display:block;clear:both;content:””;visibility:hidden;height:0;}

         #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}

         #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}

        <div id=”layout”>

         <div id=”left”>Left</div>

         <div id=”right”>Right</div>

        </div>

     

    77、解释下 CSS sprites,以及你要如何在页面或网站中使用它?

        CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的”background-image”,”background- repeat”,”background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。

     

    78、你最喜欢的图片替换方法是什么,你如何选择使用?

        <h2> <span 图片丢这里></span>Hello World </h2> 把span背景设成文字内容,这样又可以保证seo,也有图片的效果在上面。

        一般都是:alt,title,onerror

     

    79、讨论CSS hacks,条件引用或者其他?

        background-color:blue; 各个浏览器都认识,这里给firefox用;

         background-color:red\9;\9所有的ie浏览器可识别;

         background-color:yellow\0; \0 是留给ie8的

         +background-color:pink; + ie7定了;

         _background-color:orange; _专门留给神奇的ie6;

         :root #test { background-color:purple\9; } :root是给ie9的,

         @media all and (min-width:0px){ #test {background-color:black\0;} } 这个是老是跟ie抢着认\0的神奇的opera,必须加个\0,不然firefox,chrome,safari也都认识。。。

         @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后这个是浏览器新贵chrome和safari的。

     

    80、如何为有功能限制的浏览器提供网页?你会使用哪些技术和处理方法?

        百度 谷歌 SO SOGOU Bing

     

    81、如何视觉隐藏网页内容,只让它们在屏幕阅读器中可用?

         1.display:none;的缺陷

             搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略

             屏幕阅读器(是为视觉上有障碍的人设计的读取屏幕内容的程序)会忽略被隐藏的文字。

         2. visibility: hidden ;的缺陷

             这个大家应该比较熟悉就是隐藏的内容会占据他所应该占据物理空间

         3.overflow:hidden;一个比较合理的方法

             .texthidden { display:block;/*统一转化为块级元素*/ overflow: hidden; width: 0; height: 0; }

             就像上面的一段CSS所展示的方法,将宽度和高度设定为0,然后超过部分隐藏,就会弥补上述一、二方法中的缺陷,也达到了隐藏内容的目的。

     

    82、你用过栅格系统吗?如果使用过,你最喜欢哪种?

        比如:Bootstrap,流式栅格系统

    83、你用过媒体查询,或针对移动端的布局/CSS 吗?

        @media screen and (min-width: 400px) and (max-width: 700px) { … }

        @media handheld and (min-width: 20em), screen and (min-width: 20em) {….}

        媒体查询,就是响应式布局。

     

    84、你熟悉 SVG 样式的书写吗?

        <svg xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink”>

            <circle cx=”40″ cy=”40″ r=”24″ style=”stroke:#006600; fill:#00cc00″/>

            <text x=”250″ y=”150″ font-family=”Verdana” font-size=”10px” fill=”blue”>Hello, out there</text>

            <defs><style type=”text/css”> <![CDATA[.sample{stroke:blue;fill:#0080FF;opacity:1;}]]></style></defs>

            <use xlink:href=”#sample1″ class=”sample”/>

        </svg>

     

    85、如何优化网页的打印样式?

        <link rel=”stylesheet” type=”text/css” media=”screen” href=”xxx.css” />

         其中media指定的属性就是设备,显示器上就是screen,打印机则是print,电视是tv,投影仪是projection。

         <link rel=”stylesheet” type=”text/css” media=”print” href=”yyy.css” />

         但打印样式表也应有些注意事项:

         1、打印样式表中最好不要用背景图片,因为打印机不能打印CSS中的背景。如要显示图片,请使用html插入到页面中。

         2、最好不要使用像素作为单位,因为打印样式表要打印出来的会是实物,所以建议使用pt和cm。

         3、隐藏掉不必要的内容。(@print div{display:none;})

         4、打印样式表中最好少用浮动属性,因为它们会消失。

         如果想要知道打印样式表的效果如何,直接在浏览器上选择打印预览就可以了。

     

    86、在书写高效 CSS 时会有哪些问题需要考虑?

        1.样式是:从右向左的解析一个选择器

        2.ID最快,Universal最慢 有四种类型的key selector,解析速度由快到慢依次是:ID、class、tag和universal

        3.不要tag-qualify (永远不要这样做 ul#main-navigation { } ID已经是唯一的,不需要Tag来标识,这样做会让选择器变慢。)

        4.后代选择器最糟糕(换句话说,下面这个选择器是很低效的: html body ul li a { })

        5.想清楚你为什么这样写

        6.CSS3的效率问题(CSS3选择器(比如 :nth-child)能够漂亮的定位我们想要的元素,又能保证我们的CSS整洁易读。但是这些神奇的选择器会浪费很多的浏览器资源。)

        7.我们知道#ID速度是最快的,那么我们都用ID,是不是很快。但是我们不应该为了效率而牺牲可读性和可维护性

     

    87、使用 CSS 预处理器的优缺点有哪些?

        (SASS,Compass,Stylus,LESS)

        描述下你曾经使用过的 CSS 预处理的优缺点

     

    88、如果设计中使用了非标准的字体,你该如何去实现?

         Webfonts (字体服务例如:Google Webfonts,Typekit 等等。)

     

    89、解释下浏览器是如何判断元素是否匹配某个 CSS 选择器?

    浏览器先产生一个元素集合,这个集合往往由最后一个部分的索引产生(如果没有索引就是所有元素的集合)。然后向上匹配,如果不符合上一个部分,就把元素从集合中删除,直到真个选择器都匹配完,还在集合中的元素就匹配这个选择器了。

     

    举个例子,有选择器:

    body.ready #wrapper > .lol233

     

    先把所有 class 中有 lol233 的元素拿出来组成一个集合,然后上一层,对每一个集合中的元素,如果元素的 parent id 不为 #wrapper 则把元素从集合中删去。 再向上,从这个元素的父元素开始向上找,没有找到一个 tagName 为 body 且 class 中有 ready 的元素,就把原来的元素从集合中删去。

    至此这个选择器匹配结束,所有还在集合中的元素满足。

    大体就是这样,不过浏览器还会有一些奇怪的优化。

     

    为什么从后往前匹配因为效率和文档流的解析方向。效率不必说,找元素的父亲和之前的兄弟比遍历所哟儿子快而且方便。关于文档流的解析方向,是因为现在的 CSS,一个元素只要确定了这个元素在文档流之前出现过的所有元素,就能确定他的匹配情况。应用在即使 html 没有载入完成,浏览器也能根据已经载入的这一部分信息完全确定出现过的元素的属性。

     

    为什么是用集合主要也还是效率。基于 CSS Rule 数量远远小于元素数量的假设和索引的运用,遍历每一条 CSS Rule 通过集合筛选,比遍历每一个元素再遍历每一条 Rule 匹配要快得多。

    90、解释一下你对盒模型的理解,以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。

    所有HTML元素可以看作盒子,在CSS中,”box model”这一术语是用来设计和布局时使用。

    CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。

    盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

    下面的图片说明了盒子模型(Box Model):

    不同部分的说明:

    • Margin(外边距) – 清除边框外的区域,外边距是透明的。

    • Border(边框) – 围绕在内边距和内容外的边框。

    • Padding(内边距) – 清除内容周围的区域,内边距是透明的。

    • Content(内容) – 盒子的内容,显示文本和图像。

     

    91、解释下事件代理?

        JavaScript事件代理则是一种简单的技巧,通过它你可以把事件处理器添加到一个父级元素上,这样就避免了把事件处理器添加到多个子级元素上。

         当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制。

         事件代理用到了两个在JavaSciprt事件中常被忽略的特性:事件冒泡以及目标元素。

         function getEventTarget(e) {

             e = e || window.event;

             return e.target || e.srcElement;

         }

     

    92、解释下 JavaScript 中 this 是如何工作的?

        this 永远指向函数运行时所在的对象,而不是函数被创建时所在的对象。匿名函数或不处于任何对象中的函数指向 window

        1.如果是call,apply,with,指定的this是谁,就是谁

        2.普通的函数调用,函数被谁调用,this就是谁

     

    93、解释下原型继承的原理?

        function getProperty(obj, prop) {

     

            if (obj.hasOwnProperty(prop)) {

                return obj[prop];

            }else if (obj.__proto__ !== null) {

                return getProperty(obj.__proto__, prop);

            }else{

                return undefined;

            }

        }

     

    94、生成时间戳的两种方法?

    JavaScript 获取当前时间戳:

    第一种方法:

     

    var timestamp = Date.parse(new Date());

    结果:1280977330000

    第二种方法:

     

    var timestamp = (new Date()).valueOf();

    结果:1280977330748

     

    第三种方法:

     

    var timestamp=new Date().getTime();

    结果:1280977330748

     

    第一种:获取的时间戳是把毫秒改成000显示,

    第二种和第三种是获取了当前毫秒的时间戳。

     

    95、用原型链的方式给Array对象添加一个数组去重的方法?

    Array.prototype.delRepeat=function() {

    //tempRepeat保存重复数组项

    var tempRepeat = [];

    var obj = {}; //保存数组中每项,及其出现的次数

    //遍历数组

    for (var i = 0; i < this.length; i++) {

    if (obj[this[i]]) {

    if(obj[this[i]]==1) {

    tempRepeat.push(this[i]);

    obj[this[i]]++;

    delete(this[i]);

    }

    }

    else {

    obj[this[i]] = 1;

    }

    }

    this.filter(function(){ return true;});

    return tempRepeat;

    }

    var a=[1,3,”eirkgm”,4,6,”eirkgm”,3,3,”eirkgm”,3,3,3,”eirkgm”,4];

    alert(a.delRepeat());

    96、定义一个方法,对所有传入的数字参数的第三位小数进行

    四舍五入,使得返回值保留两位小数,不够的补0

     

    97、定义一个方法,实现阶乘

    function factorial(num) {

    if(num <= 1) {

    return 1;

    } else {

    return num * arguments.callee(num – 1);

    }

    }

    98、定义一段代码,页面载入完成1分钟后非缓存模式刷新当前页面

    window.οnlοad=function()

    {

    setTimeout(function(){

    location.reload();//要执行刷新的代码

    },60000);

    }

    99、document.getElementById(“HEAD”).οnclick=function(oEvent){

            var A = oEvent.type.B = oEvent.target

        }

        A和B的值是什么?

     

    100、阻止事件默认行为和事件冒泡的方法是什么

            默认行为:event.preventDefault();

            冒泡:event.stopPropregation();

                 event.cancelBubble();

     

     

    101、把Object的实例化对象A、B、C合并 赋值给对象C

     

     

    102、设置一个已知ID的DIV的html内容为xxx,字体颜色设置为黑色(不使用第三方框架)

     

    103、当一个DOM节点被点击的时候,我们希望能够执行一个函数,应该怎么做?

    直接在DOM里绑定事件:

    在JS里通过onclick绑定:xxx.onclick = test

    通过事件添加进行绑定:addEventListener(xxx, ‘click’, test)

    104、什么是Ajax和JSON,他们的优缺点?

    Ajax是一种异步提交数据的方法。

    通常在html中,要想重新获取页面的数据。更新某一个地方的数据时。就必须得刷新整个页面,才能重新刷新数据。那么问题来了,当我们仅仅只需要更新某一个小地方的数据时。我们也来刷新整个页面的话,就显得有点麻烦了,于是Ajax就帮我们完成了这个功能,让我们单独开辟一条道路来进行获取数据,然后页面不需要刷新,用JS把AJAX请求的数据显示到该显示的地方。AJAX叫 无刷新获取技术

     

    json 是一种数据的载体,可以把他想象成数组一样的东西,只不过,它有点牛,就是很多格式都可以自动支持。就差不多这样了。

    105、看下列代码输出为何?解释原因?

        var a;

        alert(typeof a);//undefined

        alert(b); //报错

     

    106、看下列代码,输出什么?解释原因?

        var a = null;

        alert(typeof a); //object

     

    107、看下列代码,输出什么?

        1.var undefined;

        2.undefined == null; //true

        3.3==true; // true

        4.2==true; //false

        5.0==false; //true

        6.0==”; //true

        7.NaN == NaN; //false

        8.[]==false; //true

        9.[] == ![]; //true

     

    108、看代码给答案?

        var a = new Object();

        a.value = 1;

        b = a;

        b.value = 2;

        alert(a.value); //2

     

    109、输出今天的日期,以YYYY-MM-DD的方式,比如今天是2016年4月12日,则     输出2016-04-12

    var d = new Date();

    // 获取年,getFullYear()返回4位的数字 //今年:2016

    var year = d.getFullYear();

    // 获取月,月份比较特殊,0是1月,11是12月

    var month = d.getMonth() + 1;

    // 变成两位

    month = month < 10 ? ‘0’ + month : month;

    // 获取日

    var day = d.getDate();

    day = day < 10 ? ‘0’ + day : day;

    alert(year + ‘-‘ + month + ‘-‘ + day);

    110、将字符串”<tr><td>{$id}</td><td>${name}</td></tr>”中的${id}替换成10,{$name}替换成Tony(使用正则表达式)

    答案:”<tr><td>{$id}</td><td>{$id}_{$name}</td></tr>”.replace(/{\$id}/g, ’10′).replace(/{\$name}/g, ‘Tony’);

    111、为了保证页面输出安全,我们经常需要对一些特殊的字符进行转义,请写出一个函数escapeHtml,将< , > & , ” 进行转义

     

    String.prototype.escapeHTML = function
    () {                                  

      return
    this.replace(/&/g,’&amp;’).replace(/>/g,’&gt;’).replace(/</g,’&lt;’).replace(/”/g,’&quot;’);

    };

     

    112、foo = foo || bar ,这行代码是什么意思?为什么要这样写?

     

    foo和bar应该都是bool型变量,||是表示 或 的意思,只要foo或者bar有一个为真,那么这个表达式的值就为真,并把它赋给foo

     

    113、看下列代码,将会输出什么?

        var foo = 1;

        function(){

            console.log(foo);

            var foo = 2;

            console.log(foo);

        }

    结果:undifined,2

    var foo=1; 它的作用域是window;但是函数体内有同名局部变量,在执行函数时,第一句会寻找体内变量。

    如果想调用该定义,需明确指定作用域,不指定则默认函数体本身。

    console.log(window.foo); //1

     

    114、用js实现随机选取10~100之间的10个数字,存入一个数组,并且排序

     

    function sortNumber(a,b){

        return a-b;//升序

        //return b-a;//降序

    }

     

    //js实现随机选取10–100之间的10个数字,存入一个数组,并排序

    var iArray =[];

    function getRandom(iStart,iEnd){

        var iChoice = iStart-iEnd+1;

        return Math.abs(Math.floor(Math.random()*iChoice))+iStart;

    }

    for(var i=0;i<10;i++){

        iArray.push(getRandom(10,100))

    }

    iArray.sort(sortNumber);

    alert(iArray);

    115、写一个function 清除字符串前后的空格(兼容所有浏览器)

    第一种:循环替换

     

    //供使用者调用

    function trim(s){

    return trimRight(trimLeft(s));

    }

    //去掉左边的空白

    function trimLeft(s){

    if(s == null) {

    return “”;

    }

    var whitespace = new String(” \t\n\r”);

    var str = new String(s);

    if (whitespace.indexOf(str.charAt(0)) != -1) {

    var j=0, i = str.length;

    while (j < i && whitespace.indexOf(str.charAt(j)) != -1){

    j++;

    }

    str = str.substring(j, i);

    }

    return str;

    }

     

    //去掉右边的空白 www.2cto.com

    function trimRight(s){

    if(s == null) return “”;

    var whitespace = new String(” \t\n\r”);

    var str = new String(s);

    if (whitespace.indexOf(str.charAt(str.length-1)) != -1){

    var i = str.length – 1;

    while (i >= 0 && whitespace.indexOf(str.charAt(i)) != -1){

    i–;

    }

    str = str.substring(0, i+1);

    }

    return str;

    }

    第二种:正则替换

    <SCRIPT LANGUAGE=”JavaScript”>

    <!–

    String.prototype.Trim = function()

    {

    return this.replace(/(^\s*)|(\s*$)/g, “”);

    }

    String.prototype.LTrim = function()

    {

    return this.replace(/(^\s*)/g, “”);

    }

    String.prototype.RTrim = function()

    {

    return this.replace(/(\s*$)/g, “”);

    }

    //–>

    </SCRIPT>

    //去左空格;

    function ltrim(s){

    return s.replace(/(^\s*)/g, “”);

    }

    //去右空格;

    function rtrim(s){

    return s.replace(/(\s*$)/g, “”);

    }

    //去左右空格;

    function trim(s){

    return s.replace(/(^\s*)|(\s*$)/g, “”);

    }

    第三种:使用jquery

    $().trim();

    jquery的内部实现为:

    function trim(str){

    return str.replace(/^(\s|\u00A0)+/,”).replace(/(\s|\u00A0)+$/,”);

    }

    第四种:使用motools

    function trim(str){

    return str.replace(/^(\s|\xA0)+|(\s|\xA0)+$/g, ”);

    }

    第五种:剪裁字符串方式

    function trim(str){

    str = str.replace(/^(\s|\u00A0)+/,”);

    for(var i=str.length-1; i>=0; i–){

    if(/\S/.test(str.charAt(i))){

    str = str.substring(0, i+1);

    break;

    }

    }

    return str;

    }

    //———————————————————-

    // 去掉字符串前后的空格

    // 返回值:

    // 去除空格后的字符串

    //———————————————————-

    function trim(param) {

    if ((vRet = param) == ”) { return vRet; }

    while (true) {

    if (vRet.indexOf (‘ ‘) == 0) {

    vRet = vRet.substring(1, parseInt(vRet.length));

    } else if ((parseInt(vRet.length) != 0) && (vRet.lastIndexOf (‘ ‘) == parseInt(vRet.length) – 1)) {

    vRet = vRet.substring(0, parseInt(vRet.length) – 1);

    } else {

    return vRet;

    }

    }

    }

    展开全文
  • baidu web前端笔试面试题目.doc
  • 360-2019校招笔试-Web前端开发工程师客观合集
  • web前端开发笔试题

    2021-06-24 11:15:02
    (至少20字以上) JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页 添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本 是通过嵌入在HTML中来实现自身的功能的...
  • Web前端笔试题目

    千次阅读 2018-04-06 11:58:26
     由上分析知道,@import url(style.css) 和@import url(“style.css”)是最优的选择,兼容的浏览器最多。  从字节优化的角度来看@import url(style.css)最值得推荐。 4、常见的浏览器内核有哪些? 使用Trident内核...
  • web前端笔试选择题

    2019-10-02 13:26:42
    选择一项) 。 (D )  A for(var i =0; i; i++)  B for(var i =0; i(3); i++)  C for(var i =0; i(); i++)  D for(var i =0; i; i++)    9.  制作级联菜单功能时调用的...
  • web 前端开发工程师笔试题 1.html 的含义是什么其主体部分由什么标记构成 Html 是一种标准一种规范它通过标记符号来标记要显示在网页中的各个部分被称为超文本标记语言 标记和之间的内容构成了 html 的主体部分网页...
  • 亚信笔试题,部分题目有答案
  • web前端笔试面试汇总

    热门讨论 2012-07-07 18:56:17
    该文档是汇总的web前端面试笔试常考的基础类和编程类,对面试笔试有帮助。
  • 2021年前端笔试题汇总 PDF.pdf
  • web前端笔试题整合

    千次阅读 2018-12-13 16:19:48
    1.一个200 * 200的格在不同分辨率屏幕上下左右居中,用CSS实现 div{ width: 200px; height: 200px; background-color: red; position:absolute; top:50%; ...
  • 1. 判断变量类型的几种方法,并谈谈这几种方法的差异或者局限。 1. 语法:typeof 变量名 / typeof(变量名) 返回值:返回数据类型的字符串:string、number、boolean、undefined、object(null也返回object)、 ...
  • 2022前端笔试面试

    2022-04-06 14:43:23
    一道关于辨析var和let和const的选择题: 7. slice和splice区别: 8.css选择器优先级 9.原型链最终指向NULL。 10.浏览器触发回流时,一定会触发重绘;但重绘不一定触发回流。 11. visibility:hidden 和 display:none...
  • 2011二月百度web前端笔试面试题目(一面二面).doc
  • 多益网络校招 —— web前端笔试题

    千次阅读 2020-11-20 23:16:05
    一、选择题 1、以下表达式哪一个可以产生0-7之间(含0,7)的随机数? A Math.ceil(Math.random()*7) B Math.floor(Math.random()*7) C Math.floor(Math.random()*8) D Math.ceil(Math.random()*8) /* Math.ceil是...
  • web前端综合笔试题.docx
  • 腾迅Web前端开发工程师笔试题及答案 1 请实现,鼠标点击页面中的任意标签,alert该标签的名称.(注意兼容性) function elementName(evt){ evt = evt|| window.event; // IE: window.event // IE用srcElement获取...
  • 2019年最新web前端笔试题

    千次阅读 多人点赞 2019-03-19 19:13:42
    { if (typeof name === 'undefined') { var name = 'Jack' console.log('Goodbye ' + name) } else { console.log('Hello ' + name) } })() 6.React性能优化,渲染20000多条checkbox组件,点击选择checkbox组件的...
  • 欢聚时代 2017 应届生笔试题目 web 前端类 C 卷 . 多选选择题 使用了 "use strict" 后以下哪些描述错误 "use strict; var x = 17; with (obj) { x; } // 会报 obj 未定义的错误 "use strict; var x; delete x; // ...
  • web前端笔试题-完善版

    千次阅读 多人点赞 2020-08-08 19:51:04
    web面试 1、定位有哪几种?分别简述其特点。 static:默认值,没有定位,元素出现在正常的文档流中 relative:生成相对定位的元素,不脱离文档流,相对于自身位置进行定位 absolute:生成绝对定位的元素,脱离文档...
  • web前端研发工程师笔试选择题带答案 web前端研发工程师笔试选择题带答案 web前端研发工程师笔试选择题带答案 1 要动态改变层中内容可以使用的方法有(AB ) a)innerHTML b)innerText c)通过设置层的隐藏与显示来...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,123
精华内容 2,449
关键字:

web前端笔试选择题

友情链接: vrlog.rar