• 前端面试简单整理


    css属性标签有哪些?
    id选择器,类选择器,标签选择器,相邻选择器,子选择器,后代选择器,通配符选择器,属性选择器,伪类选择器
    伪类选择器
    a:hover,li:nth-child
    可继承的样式:font-size,font-family,color,ul,li,dl,dd,dt
    不可继承的样式:border,padding,margin,width,height
    优先级:
    !important>id>class>tag
    css3新增的伪类
    p:first-of-type 选择其父元素的首个p元素
    p:last-of-type
    p:only-of-type
    p:nth-child(2)
    p:only-child
    :enabled
    :disabled
    :checked

    如何居中div
    .div{200px;margin:0 auto;}
    居中一个浮动元素
    .div{300px;height:200px;margin:-250px 0 0 250px;position:relation}
    margin:13px 13px 12px 12px 上右下左
    positon:
    relative、absolute、fixed,static,inherit
    初始化css?
    浏览器的兼容问题,不同浏览器对标签的默认值不同,防止出现页面差异需要进行初始化

    css3新特性
    border-radius圆角
    阴影box-shadow
    文字特写 text-shadow
    线性渐变 gradient
    旋转transform
    多背景rgba

    块级元素:
    div,p,h1..h4 form ul
    行内元素:
    a,b,br,i,span,select,input
    css盒子模型:
    content内容,padding填充,margin边界,border边框

    css引入方式:
    内链(行内式直接加style属性),外联(link),内嵌(直接在style页面写),导入@import

    link同时加载,@import后加载
    link是xml标签,@import是html

    前端页面包含三层为:结构层html,表示层css,行为层js

    alt当图片不显示时用文字表示
    title为该属性提供信息

    css的reset重置浏览器的css默认属性,浏览器的品种不同,样式不同,重置让他们统一

    css的sprites:将细小的图片整合到一张大图上,减少服务器对图片的的请求数量

    csshack:针对不同的浏览器写兼容的css文件
    _marging ie6
    +margin ie7
    marging:0 auto ie9
    margin:0 ie8

    js中typeof返回哪些数据类型
    object/number/string/boolean/undefiend/function

    强制类型转换
    parseInt/parseFloat/number
    隐式转换
    ==/-/===
    split()和join()的区别
    split()是分割成数组的形式
    join()是将数组转换成字符串

    IE和DOM事件流的区别:
    <body>
    <div>
    <button>fsf<button/>
    <div/>
    <body/>
    1.执行顺序不一样
    ie冒泡型事件:button>div>body
    netscape(捕获型事件):body>div>button
    dom事件流先捕获再冒泡事件
    body>div>button>button>div>body
    2.事件侦听函数的区别
    ie:
    [object].attachevent("",handler);绑定函数
    [object].detachevent("",handler);
    dom:
    [object].addeventlistener("",handler,capture);绑定函数
    [object].removeeventlistener("",handler,capture);移除函数

    ie和标准下兼容性写法:
    var ev=ev||window.event;
    document.documentelement.clientwidth||document.body.clientwidth
    var target=ev.srcelement||ev.target;

    js中的this指针,闭包,作用域
    js作用域:内部函数可以访问外部函数的变量,但外部函数不能访问内部函数的变量
    this指针:
    1.有对象就指向调用对象
    2.没调用对象就指向全局对象
    3.new构造新对象
    4.通过apply或call或bind来改变this所指
    闭包:
    1.使外部函数可以突破作用域访问内部函数的变量
    2.让变量的值始终保存在内存中,当在一个函数中定义另个函数就会产生闭包

    事件委托的含义:
    利用冒泡的原理,把事件加到父级上,触发执行效果
    好处:
    1.提高性能
    2.添加新的元素保持之前的事件
    阻止时间冒泡和默认事件?
    cancelbubble停止事件
    window.event.cancelbubble=true;
    默认事件
    window.event.returnValue=false;


    数据去重方法:
    function a(arr){
    var n=[];
    for(var i=0;i<arr.length;i++)
    {
    if(n.indexof(arr[i])==-1)
    {
    n.push(arr[i]);
    }
    return n;
    }
    }
    类的定义
    var a=function(){}
    a.prototype={}
    new a();

    this指向:
    1.有对象就指向调用对象
    2.没有调用对象就指向全局对象
    3.new创建新对象
    4.apply,call,bind指向新对象


    ajax异步的优缺点?
    优点:
    相对于同步ajax:不会造成ui卡死,用户体验好;相对于刷新页面省流量
    缺点:
    后退按钮无效
    多个请求同时触发时,由于回调时间不一致,会造成混乱,避免这种混乱需要复杂的判断机制
    搜索引擎不友好
    数据安全


    判断一个对象是否属于某个类
    if(a instanceof person)
    {
    alert('yes');
    }

    https://shop130162651.taobao.com/ 店铺冬装新款到位,价格实惠还能在哪里找到呢?


    json是一个轻量级的数据交换格式,易于读写,占用宽带小

    html三个层
    行为层js,结构层html,表示层css


    盒子模型
    内容content,填充padding,边距margin,边框border

    行内标签
    a,select,input,strong,b,span,lable,button
    块级元素:p,div,dl,dd,ul,li,h1,h5
    空元素:br,meta,hr,link,input,img
    br,meta,hr,link,input,img

    css垂直居中
    <div class="warapp">
    <div class="content"><div/>
    <div/>

    .warapp{
    position:relative;
    }
    .content{
    position:absolute;
    top:50%;
    left:50%;
    magin-top:100px;
    margin-left:-100px;
    background:green;
    200px;
    height:200px;
    }
    html中的src和href的区别:
    href标识的超文本引用,用在link和a等元素上。
    src引用资源,表示替换当前元素。用在img,script,iframe上
    src引入文件
    href链接

    css垂直居中
    <div class="head">
    <div class="content"><div/>
    <div/>

    .head{
    position:relative;
    }
    .content{
    position:absolute;
    200px;
    height:200px;
    top:50%;
    left:50%;
    margin-top:100px;
    margin-left:-100px;
    }


    CSShack分为三种:
    条件hack,属性级hack,选择符hack
    条件:<![if ie]><!endif>
    属性:.test{color:#0909;ie8以上
    *color:#f00;ie7
    _color:#ff0;ie6
    }
    选择符:
    *html .test{color:#090;} ie6以下版本
    * +html .test{color:#ff0;}ie7


    同步和异步的区别:
    同步传输是以数据块为传输单位,数据块与数据块之间的时间间隔是固定的,必须严格的规定他们的时间关系
    异步传输是以字符为传输单位,其优点是简单、可靠,适用于面向字符的、低速的异步通信场合。它的缺点是通信开销大。

    em是相对长度单位,会继承父级元素的字体大小
    px是绝对长度单位

    渐进增强:
    针对低版本浏览器进行构建页面,保证最基本的功能,然后针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
    优雅降级:
    一开始就构建完整的功能,然后再针对低版本浏览器进行兼容


    创建新节点:
    createDocumentFragment() 创建dom片段
    createElement()创建具体的元素
    crateTextNode()创建文本节点

    添加、移除、替换、插入
    appendChild()
    removeChild()
    replaceChild()
    insertBefore()
    查找
    getElementsByTagName()通过标签名称
    getElementByName() 通过元素的name属性的值
    getElementById()通过元素id,唯一性

    function clone(obj){
    var buf;
    switch(typeof obj){
    case "undefiend":
    break;
    case "string":
    buf=obj+"";
    break;
    case "number":
    buf=obj-0;
    break;
    case "boolean":
    buf=obj;
    break;
    case "object":
    if(obj==null)
    {
    buf=bull;
    }
    else{
    if(Object.prototype.toString.call(obj).slice(8,-1)=="Array")
    {
    buf=[];
    for(var i=0;i<obj.length;i++){
    buf.push(clone(obj[i]));
    }
    }else{
    buf={};
    for(var k in obj){
    buf[k]=clone(obj[k]);
    }
    }
    }
    break;
    default:
    buf=obj;
    break;
    }
    return obj;
    }

    var arr1=[1,1,2,34,2];
    var arr2=[];
    for(var i=0;i<arr1.length;i++){
    if(arr2.indexof(arr1[i])<0){
    arr2.push(arr1[i]);
    }
    }
    alert(arr2);

    var arr=[1,2,1];
    var arr1=[];
    for(var i=0;i<arr.length:i++){
    if(arr1.indexof(arr[i])<0){
    arr1.push(arr[i]);
    }
    }


    caller是返回一个对函数得引用,该函数调用了当前函数
    callee是返回正在被执行得function函数


    统计字母出现最多的次数
    var str="aaabbff";
    var obj={};
    for(var i=0;i<str.length;i++)
    {
    var v=str.charAt(i);
    if(obj[v]&& obj[v].value==v)
    {
    obj[v].count=++obj[v].count;
    }else{
    obj[v]={};
    obj[v].count=1;
    obj[v].value=v;
    }
    }
    for(key in obj)
    {
    document.write(obj[key].value+'='+obj[v].count+',');
    }


    去除前后空格
    function trime(arr)
    {
    if(str&& typeof(str)=="string"){
    return str.replace(/(^s*)|(s*)$/g,"");
    }
    }

  • 相关阅读:
    PAT-A 1004. Counting Leaves
    PAT-A 1094. The Largest Generation
    图的邻接表表示及其BFS遍历
    图的邻接表表示及其遍历
    PAT-A 1024. Palindromic Number
    PAT-A 1019. General Palindromic Number
    PAT-B 1007.素数对猜想
    PAT-A 1048. Find Coins
    PAT-A 1037. Magic Coupon
    PAT-A 1099.Build A Binary Search Tree
  • 原文地址:https://www.cnblogs.com/xphdy/p/6061954.html
Copyright © 2020-2023  润新知