标签： 面试

js css题

0311lc.com说：

 

  1. 获取随机数的方法：Math.random();
  2. js中将变量强制改为浮点类型的方法：parseFloat()
  3. 根据ID获取元素的原生的js的方法:document.getElementById(‘id’)
  4. 将文档声明为HTML5文档类型、需要头部添加 <!DOCTYPE html>
  5. chrome 浏览器私有样式前缀 -webkit
  6. css3 设置圆角属性名：border-radius
  7. form 标签特有属性 请列出3个 action  method name  target  autocomplete  novalidate
  8. 正则表达  $ 表示什么意思： 匹配输入字符串的结束位置
  9. typeof ‘123’  返回什么  string
  10. 自定义浏览器兼容事件绑定方法需要注意什么问题
    1.标准dom添加事件是用addEventListener，ie6-8则是attachEvent。
      2.事件的捕获方式不一致，标准浏览器是由外至内，而IE是由内到外，但是最后的结果是将IE的标准定为标准
     3.我们常说的事件处理时的event属性，在标准浏览器其是传入的，IE下由window.event获取的。并且获取目标元素的方法也不同，标准浏览器是event.target，而IE下是event.srcElement
  11. 设计一个方案、使得页面在pc和pad端  显示为一行三列 在手机端为一列三行。
    样式：
    <style>
.parent-fix {
margin-left:-20px;
}
.parent {
display:table;
width:100%;
table-layout:fixed;
}
.column {
display:table-cell;
padding-left:20px;
}
@media screen and (max-width:320px){
.parent-fix {
margin-left: 0;
}
.parent {
display:block;
width:100%;
}
.column {
display:block;
padding-left:0;
}
}
</style>
     
<div class="parent-fix">
         
  <div class="parent">
             
    <div class="column">
    </div>
             
    <div class="column">
    </div>
             
    <div class="column">
    </div>
         
  </div>
     
</div>
  12. jsonp 工作原理
    JSONP是处理跨域资源访问的。
        JSONP的原理是利用html页面中的script标签可跨域的原理，利用<script>标签向服务器端请求一段JS代码，
       然后，执行这段js代码，实现跨域的过程。
  13. （4）display和position都有哪些值？分别列举一下这些值的用途？
    display：block/inline/inline-block /table/table-cell/none
   position: relative/absolute/fixed/static
   display:block;/*当前元素以块级形式显示，默认宽度为父元素，可设定宽高，换行显示*/
   display:inline;/*当前元素以行内形式显示，默认宽度为内容宽度，不可设宽高，同行显示*/
   display:inline-block;/*显示时，默认宽度为内容宽度，可设宽高，同行显示*/
   display:table;/*显示规则和block相同，但是样式为table的样式*/
   display:table-cell;/*以table 单元格的样式显示*/
   display:none;/*元素小时，位置也不占*/
   position:relative;/*当前元素被设为相对定位，元素在文档流中，百分比的参照物是元素本身*/
   position:absolute;/*当前元素被设为绝对定位，元素脱离文档流，定位参照物：第一个定位祖先/根元素*/
   position:fixed;/*当前元素被设为固定定位，默认宽度为内容宽度，脱离文档流，参照物是视窗*/

     

    （5）地址栏输入一个地址后，输入回车，描述一下这是开始，浏览器做什么。
      1.在浏览器中输入要的网址：例如：facebook.com
      2.浏览器查找域名的IP地址
         导航的第一步是通过访问的域名找出其IP地址。DNS查找过程如下：
         浏览器缓存–浏览器会缓存DNS记录一段时间。但操作系统没有告诉浏览器存储的时间，这样各个浏览器会存储各自的
         一个固定的时间（2分钟到30分钟不等）。
         系统缓存–如果在浏览器缓存里没有找到需要的记录，浏览器会做一个系统调用（windows里是gethostbyname）。这样便能获得系统缓存中      的记录。
         路由器缓存–接着，前面的查询请求发向路由器，它一般有自己的DNS缓存。
         ISP（互联网服务提供商） DNS缓存–接下来要检测的就是ISP的缓存DNS的服务器。在这一般都能找到相应的缓存记录。
         递归搜索–你的ISP的DNS服务器从根域名服务器开始进行递归搜索，从.com顶级域名服务器到facebook的域名服务器。一般DNS的缓存
    中会有.com域名服务器中的域名，所以到顶级服务器的匹配过程不是那么必要了。
         但是，DNS有一点令人担忧，像wikipedia.org或者facebook.com这样的整个域名看上去就对应着一个单独的IP地址，还好有几种方法可以消除这个瓶颈：
        循环DNS：是DNS查找时返回多个IP时的解决方案。举例来说，facebook.com实际上就对应了4个IP地址。
        负载平衡器：是以一个特定IP地址进行侦听并将网络请求转发到集群服务器上的硬件设备。一些大型的站点一般都会使用这种昂贵的高性能复杂平衡器。
       地理DNS根据用户所处的地理位置，通过把域名映射到多个不同的IP地址提高可扩展性。这样不同的服务器不能够更新同步状态，但映射静态内容的话非常好。
      Anycast 是一个IP地址映射到多个物理主机的路由技术。美中不足，Anycast与TCP协议适应的不是很好，所以很少应用在那些方案中。
    大多数DNS服务器使用Anycast来请求高效低延迟的DNS查找。
    3.浏览器给web服务器发送一个HTTP请求
      因为像Facebook主页这样的动态页面，打开后在浏览器缓存中很快甚至马上就会过期，毫无疑问他们不能从缓存中读取，所以，浏览器将把一个请求发送到Facebook所在的服务器：
    4.facebook服务的永久重定向响应
    5.浏览器跟踪重定向地址
    6.服务器“处理”请求
    7.服务器发回一个HTML响应
    8.浏览器开始显示HTML
    9.浏览器发送获取嵌入在HTML中的对象
    10.浏览器发送异步（Ajax）请求
    5.应用题
    （1）创建一个js类，模拟实现方法的重载。
    function A(){
            this.a=null;
            this.b=null;
        }
        var pro = A.prototype;
        //模拟重载
        pro.add = function(){
            if(arguments.length==1){
                console.log(arguments[0]);
            }
            if(arguments.length==2){
                result = arguments[0]+arguments[1];
                console.log(result);
            }
        }
        var a = new A();
        a.add(1);
        a.add(1,2);

    (2)JS中会有排序的需求，用jS实现一个标准的排序算法，对一个数字数组进行由小到大的排列。

    var b = [2,3,8,3,1,5];
        sort1(b);
        console.log(b);
        function sort1(a){
            var i,j;
            for(i=0;i<a.length;i++){
                var temp;
                var flag=0;
                for(j=0;j<a.length;j++){
                    if(a[j]>a[j+1]){
                        temp = a[j+1];
                        a[j+1]=a[j];
                        a[j]=temp;
                        flag=1;
                    }
                }
                if(flag==0)break;
            }
            return a;
        }

    4.编程题

    用HTML、css和js魔力实现下拉框，使得下拉框在各个浏览器的样式和行为完全一致。说出你的设计方案，并且重点说明功能设计实现时要考虑的因素。

     

    1. 第二种方法css 法

       

      <!-- html 布局 -->
<div id="selectStyle">
 <select id="select">
  <option>option 1</option>
  <option>option 2</option>
  <option>option 3</option>
  <option>option 4</option>
  <option>option 5</option>
 </select>
</div>

      首先要去掉 #select 的默认样式：

      /* 去掉默认样式，设置新的样式 */
#select{
    display:block;
    width:100%;
    height:100%;
    box-sizing:border-box;
    background:none;
    border:1px solid #222;
    outline:none;
    -webkit-appearance:none;
    padding:0 5px;
    line-height:inherit;
    color:inherit;
    cursor:default;
    font-size:14px;
    position:relative;
    z-index:3;
}
#select option{
    color:#222;
}
#select option:hover{
    color:#fff;
}
#select option:checked{
    background:#535353;
    color:#fff; 
}

       

      然后在外层div#selectStyle设置自定义样式

      #selectStyle{
    display:block;
    margin:0 auto;
    overflow:hidden;
    height:30px;
    width:240px;
    border-radius:0;
    background:#535353 url("箭头图片地址") right center no-repeat;
    background-size:auto 80%;
    color:#fff;
    line-height:2;
    /* 如果不想加图片，
       则可以设置一个自己的三角形样式，
       如下的自定义方式，
       见代码1 */
    position:relative;
    z-index:1;
}
/* 代码1 */
#selectStyle:before{
    position:absolute;
    z-index:1;
    top:50%;
    right:10px;
    margin-top:-2.5px;
    display:block;
    width:0;
    height:0;
    border-style:solid;
    border-width:5px 5px 0 5px;
    border-color:#fff transparent transparent transparent;
    content:"";
}
/* 代码1 */
#selectStyle:after{
    position:absolute;
    z-index:1;
    top:50%;
    right:10px;
    margin-top:-3.5px;
    display:block;
    width:0;
    height:0;
    border-style:solid;
    border-width:5px 5px 0 5px;
    border-color:#535353 transparent transparent transparent;
    content:"";
}

       

      上面纯css法

    下面 是js法

    <ul class="select">
<li class="drop-down" onclick="selectShow()">
<span id="reasontxt" class="bgimg-down">请选择退款原因</span>
<ul class="drop-down-content">
<li class="fs14 c_999">不喜欢/不想要</li>
<li class="fs14 c_999">空包裹</li>
<li class="fs14 c_999">未按照约定时间发货</li>
<li class="fs14 c_999">快递物流一直未送达</li>
<li class="fs14 c_999">货物破损已拒签</li>
</ul>
</li>
</ul>


<style>


.reasonBox ul li span{

display: block;
text-decoration: none;
height: 30px;
width: 246px;
line-height: 30px;
border: 1px solid #DBDBDB;
border-radius: 4px;
padding-left: 10px;
background-color: #fff;
color: #999;
font-size: 14px;

}

.reasonBox .drop-down{

height: 30px;

width: 256px;

cursor: pointer;

}

.reasonBox .drop-down-content{

position: absolute;

display: none;

overflow: hidden;

width: 256px;

background-color: #fff;

box-shadow: 0 1px 6px 0 rgba(0,0,0,0.15);

border: 1px solid #ccc;

border-radius: 4px;

margin-top: 2px;

}

.reasonBox .drop-down-content li{

height: 30px;

line-height: 30px;

padding-left: 10px;

}

.reasonBox .drop-down-content li:hover{

background-color: #00D2C3;

color: #fff;

}

.reasonBox .drop-down .active{

display: block;

}

.reasonBox .bgimg-down{

background: url(../images/aftersale/i_down.png) no-repeat 234px 8px;

}

.reasonBox .bgimg-up{

background: url(../images/aftersale/i_up.png) no-repeat 234px 8px;

}

</style>





<script type="text/javascript">

//下拉框

var selectFlag=false;

function selectShow(){

var contentDom=document.getElementsByClassName("drop-down-content")[0];

var imgDOM=document.getElementById("reasontxt");

selectFlag=!selectFlag;

//展开

  if(selectFlag){

   contentDom.className=contentDom.className +" " + "active";

   imgDOM.className="bgimg-up";

  }else{

   contentDom.className="drop-down-content";
  
   imgDOM.className="bgimg-down";

 }
 
}

//监听选择退款原因点击事件

function selector() {
    var ul = document.querySelectorAll(".drop-down ul")[0];
    ul.addEventListener('click',
    function(e) {
        var el = e.target
        while (el.tagName !== 'LI') {
            if (el == ul) {
                el = null;
                break;
            }
            el = el.parentNode
        }
        if (el) {
            document.getElementById("reasontxt").innerHTML = el.innerHTML
        }
    },
    false);
}

window.onload=function(){

     selector()

}

</script>

    通过ID获取（getElementById）
    通过name属性（getElementsByName）
    通过标签名（getElementsByTagName）

    通过类名（getElementsByClassName）
    通过选择器获取一个元素（querySelector）
    通过选择器获取一组元素（querySelectorAll）
    获取html的方法（document.documentElement）
    document.documentElement是专门获取html这个标签的
    获取body的方法（document.body）
    document.body是专门获取body这个标签的。
    1.通过ID获取（getElementById）

    document.getElementByIdx_x('id')

    上下文必须是document。
    必须传参数，参数是string类型，是获取元素的id。
    返回值只获取到一个元素，没有找到返回null。
    2.通过name属性（getElementsByName）

    document.getElementsByName('name')

    上下文必须是document。内容
    必须传参数，参数是是获取元素的name属性。
    返回值是一个类数组，没有找到返回空数组。
    3.通过标签名（getElementsByTagName）

    var obj = document.getElementsByTagName_r('div');
for(let i = 0; i){
obj[i].onclick = function(e){
console.log(i)
}
}

    上下文可以是document，也可以是一个元素，注意这个元素一定要存在。
    参数是是获取元素的标签名属性，不区分大小写。
    返回值是一个类数组，没有找到返回空数组
    4.通过类名（getElementsByClassName

    var obj1 = document.getElementsByClassName('animated')
// console.log
0:div.app.animated
1:div#login.login.animated.rubberBand
2:div#reg.reg.animated.shake
3:div#kefu.kefu.animated.swing
4:div#LoginState.state.animated.bounce
5:div.loginState.animated
6:div.regState.animated
7:div.pop.animated

    上下文可以是document，也可以是一个元素。
    参数是元素的类名。
    返回值是一个类数组，没有找到返回空数组。
    5.通过选择器获取一个元素（querySelector）

    document.querySelector('.animated')

    上下文可以是document，也可以是一个元素。
    参数是选择器，如：”div .className”。
    返回值只获取到第一个元素。
    6.通过选择器获取一组元素（querySelectorAll）

    document.querySelector('.animated')

    上下文可以是document，也可以是一个元素。
    参数是选择器，如：”div .className”。
    返回值是一个类数组。


奇葩

0311lc.com说：

1、某办公室有三位工作人员：刘明、庄嫣和文虎。他们三人中，一人是博士，
一人是硕士，还有一人是本科毕业生。已知博士比刘明大两岁；庄嫣与本科
毕业生同岁，但是月份稍大；本科毕业生的年龄最小。

由此，可以推出( )
A. 刘明是本科毕业生、庄嫣是硕士、文虎是博士
B. 刘明是硕士、庄嫣是博士、文虎是本科毕业生
C. 刘明是本科毕业生、庄嫣是博士、文虎是硕士
D. 刘明是硕士、庄嫣是本科毕业生、文虎是博士

答案A

2、一个产品要畅销，产品的质量和经销商的诚信缺一不可。 以下各项都符合题干的断定，除了()。

A. 一个产品滞销，说明它或者质量不好，或者经销商缺乏诚信

B. 一个产品，只有质量高并且由诚信者经销，才能畅销

C. 一个产品畅销，说明它质量高并有诚信的经销商

D. 一个产品，除非有高的质量和诚信的经销商，否则不能畅销

答案：A

3、某中学举办了文学和科学两类讲座，并对学生参加讲座情况进行了统计。发现一年级学生中，有学生
参加了全部文学讲座，也有学生参加了全部科学讲座。
如果以上陈述为真，则以下哪项一定为真？( )
A . 有一年级学生参加了全部讲座
B . 每个一年级学生至少参加了一个讲座
C . 每个讲座都有一年级学生参加
D . 有的一年级学生没有参加任何讲座

答案：A

4、某个智能研究所目前只有三种实验机器人A、B和C。A不能识别颜色，B不能识别形状，C既不能识别颜色
也不能识别形状。智能研究所的大多数实验室里都要做识别颜色和识别形状的实验。
如果以上陈述为真，以下哪项陈述一定假？（）

A.有的实验室里三种机器人都有。
B.半数实验室里只有机器人A和B。
C.这个智能研究所正在开发新的实验机器人。
D.有的实验室还做其他实验。
E.半数实验室里只有机器人A和C。

答案：E

5、北大山鹰社的周、吴、郑、王四人中，有且只有一人登上过卓奥友峰。记者采访他们时：
周说：“登上卓奥友峰的是队员郑。”
郑说：“我还没有参加过任何登山活动。”
吴说：“我虽然也参加了那次登山活动，但没有登顶。”
王说：“我是队员吴的候补，如果他没登顶就是我登顶了。”
如果他们中只有一人说了假话，则以下哪项一定为真？（　　）
A 北大山鹰社的其他队员也登上过卓奥友峰
B 吴或者周登上过卓奥友峰
C 郑登上过卓奥友峰
D 王登上过卓奥友峰
【答案】
D
【解析】
题中周和郑的话是矛盾的，即不能同时成立，必有一假。
再由“他们中只有一人说了假话”可知，
说假话的人必为他俩中的一个。故吴和王说的都是真话，
由吴的话可知，吴没有登顶；由王的话可知，王登顶了。
又这四人中只有一人登上过卓奥友峰，故王登上过卓奥友峰。
因此D项正确。

6、ABCD四个人分别要到甲乙丙丁四个单位的一个单位去办事，已知甲单位星期一不接待，
乙单位星期三不接待，丙单位星期四不接待，丁单位只在星期二、四、六接待，星期日
四个单位都不办公。一天，他们议论起哪天去办事，
A说:你们可别像我前天那样，在人家不接待的日子去，
B说：我今天必须去，明天人家就不接待了。
C说：我和B正好相反，今天不能去，明天去。
D说：我从今天起连着四天那天去都行。 则这一天是星期几？

A星期一 B星期二 C 星期三 D 星期四

答案：C

7、在所知道的矿石中，金刚石是最硬的，其次是刚玉，
一种矿石只能被与它同样硬或更硬的矿石划出痕迹，
现有一种矿石能被刚玉划出痕迹，那么下面结论中错误的是：
A．这矿石不是金刚石
B．这矿石可能是刚玉
C．这矿石是金刚石或刚玉
D．这矿石可能不如刚玉硬

答案：C

8、老虎属猫科动物，是亚洲陆地上最强大的食肉动物之一。
老虎拥有猫科动物中最长的犬齿、最大号的爪子，集速度、力量、敏捷于一身，
前肢一次挥击力量可达1000公斤，爪刺入深度达11厘米，擅长跳跃，
一次跳跃的最长距离可达6米，且擅长捕食。 由此，可以推出：
A . 最凶猛的老虎也是最凶猛的猫科动物
B . 猫科动物都擅长捕食
C . 有些猫科动物不是食肉动物
D . 擅长跳跃的动物有些是猫科动物

答案：D

9、 一些恐龙的头骨和骨盆与所有现代鸟类的头骨和骨盆具有相同的特征。
但不是所有的恐龙都有这样的特征。有些科学家宣称：
所有具有这样特征的动物都是恐龙。
根据以上陈述和科学家的宣称，可以推出（　　）。
A . 与其他动物相比，鸟类与恐龙有更多的相似性
B . 一些古代的恐龙与现代的鸟类是没有区别的
C . 所有的恐龙都是鸟类
D . 现代的鸟类是恐龙

答案： D

10、曙光机械厂、华业机械厂、祥瑞机械厂都在新宁市辖区。它们既是同一工业局下属的兄弟厂，
又是市场上的竞争对手。在市场需求的五种机械产品中，曙光机械厂擅长生产产品1、产品2和产品4，华业机械厂擅长生产产品2、产品3和产品5，祥瑞机械厂擅长生产产品3和产品5。如果两个厂生产同样的产品，一方面是不经济，另一方面是会产生恶性竞争。如果一个厂生产三种产品，在人力和设备上也有问题。为了发挥好地区经济合作的优势，工业局召集三个厂的领导对各自生产的产品作了协调，提出最佳方案。
以下哪项最可能是这几个厂的生产方案?
A.曙光机械厂生产产品1和产品2，华业机械厂生产产品3和产品5
B.华业机械厂生产产品2和产品3，祥瑞机械厂只生产产品4
C.华业机械厂生产产品2和产品5，祥瑞机械厂生产产品3和产品4
D.祥瑞机械厂生产产品3和产品5，华业机械厂只生产产品2

答案: D


CSS浏览器兼容性常见问题总结大全(推荐)

0311lc.com说：

DIV＋CSS设计IE6、IE7、FF 兼容性

DIV＋CSS网页布局这是一种趋势,我也开始顺应这股趋势了,不过在使用DIV＋CSS网站设计的时候，应该注意css样式兼容不同浏览器问题，特别是对完全使用DIV+CSS设计的网页，就应该更注意IE6 IE7 FF对CSS样式的兼容.

什么是浏览器兼容：当我们使用不同的浏览器（Firefox IE7 IE6）访问同一个网站，或者页面的时候，会出现一些不兼容的问题，在这种浏览器下显示正常，在另一种下就乱了，我们在编写CSS的时候会很恼火，刚修复了这个浏览器的问题，结果另外一个浏览器却出了新问题。
一、!important (功能有限)

随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)

例如:

?
1
2
3
4
#example {
width: 100px !important; /* IE7+FF */
width: 103px; /* IE6 */
}

二、CSS HACK的方法

首先需要知道的是：

所有浏览器 通用 height: 100px;
IE6 专用 _height: 100px;
IE7 专用 *+height: 100px;
IE6、IE7 共用 *height: 100px;
IE7、FF 共用 height: 100px !important;

例如：
#example { height:100px; } /* FF */

* html #example { height:200px; } /* IE6 */

*+html #example { height:300px; } /* IE7 */

下面的这种方法比较简单

举几个例子：

1、IE6 – IE7+FF

?
1
2
3
4
#example {
height:100px; /* FF+IE7 */
_height:200px; /* IE6 */
}

其实这个用上面说的第一种方法也可以

?
1
2
3
4
#example {
height:100px !important; /* FF+IE7 */
height:200px; /* IE6 */
}

2、IE6+IE7 – FF 

?
1
2
3
4
#example {
height:100px; /* FF */
*height:200px; /* IE6+IE7 */
}

 3、IE6+FF – IE7 

?
1
2
3
4
#example {
height:100px; /* IE6+FF */
*+height:200px; /* IE7 */
}

 4、IE6 IE7 FF 各不相同 

?
1
2
3
4
5
#example {
height:100px; /* FF */
_height:200px; /* IE6 */
*+height:300px; /* IE7 */
}

或：

?
1
2
3
4
5
#example {
height:100px; /* FF */
*height:300px; /* IE7 */
_height:200px; /* IE6 */
}

需要注意的是，代码的顺序一定不能颠倒了，要不又前功尽弃了。因为浏览器在解释程序的时候，如果重名的话，会用后面的覆盖前面的，就象给变量赋值一个道理，所以我们把通用的放前面，越专用的越放后面

解释一下4的代码：

读代码的时候，第一行height:100px; 大家都通用，IE6 IE7 FF 都显示100px

到了第二行*height:300px; FF不认识这个属性，IE6 IE7都认，所以FF还显示100px，而IE6 IE7把第一行得到的height属性给覆盖了，都显示300px

到了第三行_height:200px;只有IE6认识，所以IE6就又覆盖了在第二行得到的height,最终显示200px

这样，三个浏览器都有自己的height属性了.

*+html 对IE7的兼容 必须保证HTML顶部有如下声明：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd"> 

三、使用IE专用的条件注释 

<!–其他浏览器 –>
<link rel=”stylesheet” type=”text/css” href=”css.css” />
<!–[if IE 7]>
<!– 适合于IE7 –>
<link rel=”stylesheet” type=”text/css” href=”ie7.css” />
<![endif]–>
<!–[if lte IE 6]>
<!– 适合于IE6及以下 –>
<link rel=”stylesheet” type=”text/css” href=”ie.css” />
<![endif]–>

IE的if条件Hack

1. <!–[if !IE]><!–> 除IE外都可识别 <!–<![endif]–>
2. <!–[if IE]> 所有的IE可识别 <![endif]–>
3. <!–[if IE 5.0]> 只有IE5.0可以识别 <![endif]–>
4. <!–[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]–>
5. <!–[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]–>
6. <!–[if IE 6]> 仅IE6可识别 <![endif]–>
7. <!–[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]–>
8. <!–[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]–>
9. <!–[if IE 7]> 仅IE7可识别 <![endif]–>
10. <!–[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]–>
11. <!–[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]–>注:gt = Great Then 大于
> = > 大于号
lt = Less Then 小于
< = < 小于号
gte = Great Then or Equal 大于或等于
lte = Less Then or Equal 小于或等于

四、css filter的办法

新建一个css样式如下：

?
1
2
3
4
5
6
7
8
9
#item {
 
width: 200px;
 
height: 200px;
 
background: red;
 
}

新建一个div,并使用前面定义的css的样式：

<div >some text here</div> 

在body表现这里加入lang属性,中文为zh：

<body lang="en"> 

现在对div元素再定义一个样式：

?
1
2
3
4
5
*:lang(en) #item{
 
background:green !important;
 
}

这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式：

?
1
2
3
4
5
#item:empty {
 
background: green !important；
 
}

:empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上。
五、FLOAT闭合（clearing float） 

网页在某些浏览器上显示错位很多时候都是因为使用了float浮动而没有真正闭合，这也是div无法自适应高度的一个原因。如果父div没有设float而其子div却设了float的话,父div无法包住整个子DIV，这种情况一般出现在一个父DIV下包含多个子DIV。解决办法：

１、给父DIV也设上float

2、在所有子DIV后新加一个空DIV(不推荐，有些浏览器可以看见空DIV产生的空隙) 

比如：

?
1
2
3
4
5
6
7
8
9
10
.parent{width:100px;}
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}
.clear{clear:both;margin:0;parding0;height:0px;font-size:0px;}
 
<div class="parent">
<div class="son1"></div>
<div class="son2"></div>
<div class="clear"></div>
</div>

 3、万能 float 闭合 

将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可

代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
/* Clear Fix */
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
</style>

 :after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。这种的最麻烦。

4、overflow:auto

只要在父DIV的CSS中加上overflow:auto就搞定。

举例：

?
1
2
3
4
5
6
7
8
.parent{width:100px;overflow:auto}
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}
 
<div class="parent">
<div class="son1"></div>
<div class="son2"></div>
</div>

作者原话：原理是，外围元素之所以不能很好的延伸，问题出在了overflow上，因为overflow不可见（见W3C的解释）。现在只要将给外围元素添 加一个“overflow:auto”，就可以解决问题，结果是除了IE，真的可以解决。下来就要解决IE的问题了，再加上“_height:1%”，这个问题就完全解决了。

我试了一下，其实不加”_height:1%“在IE下也行，留着吧。

六、需要注意的一些兼容细节 

1, FF下给 div 设置 padding 后会导致 width 和 height 增加(DIV的实际宽度=DIV宽+Padding), 但IE不会.

解决办法：给DIV设定IE、FF两个宽度，在IE的宽度前加上IE特有标记” * “号。

2, 页面居中问题.

body {TEXT-ALIGN: center;} 在IE下足够了，但FF下失效。

解决办法：加上"MARGIN-RIGHT: auto; MARGIN-LEFT: auto; "

3, 有的时候在IE6上看见一些奇怪的间隙，可我们高度明明设好了呀。

解决办法：试试在有空隙的DIV上加上”font-size:0px;”

4, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.

5, 浮动IE6产生的双倍距离

?
1
2
3
4
#box{ float:left;
width:100px;
margin:0 0 0 100px;
}

这种情况之下IE6会产生200px的距离

解决办法：加上display:inline，使浮动忽略

这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果

6 页面的最小宽度

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里 这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。

解决办法：为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类：
然后CSS这样设计：

?
1
2
3
4
#container{
min-width: 600px;
width:e-xpression(document.body.clientWidth < 600? “600px”: “auto” );
}

第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

7、UL和FORM标签的padding与margin

ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值。FORM标签在IE中,将会自动margin一些边距,而在FF中margin则是0；

解决办法：css中首先都使用这样的样式ul,form{margin:0;padding:0;}.

8 ,DIV浮动IE文本产生3象素的bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
#box{
float:left;
width:800px;}
#left{
float:left;
width:50%;}
#right{
width:50%;
}
*html #left{
margin-right:-3px;
//这句是关键
}

HTML代码

?
1
2
3
4
<DIV id=box>
<DIV id=left></DIV>
<DIV id=right></DIV>
</DIV>

针对上面这段代码，下面说一下我的理解：

第一、只要right定义了width属性，在FF下绝对就会两行显示

第二、两个width都定义为百分比的话，就算都为100%在IE下也会一行显示。所以上面那句所谓“这句是关键”根本没用，不加也在一行，除非你width定义的是数值才用得上。

所以说上面这段代码其实用处不大，至少在FF下不行。其实只要只定义left的width就行了，right不定义width就不管在IE还是FF下都能成功，但这样的话父DIV BOX并没有真正的包含LEFT和RIGHT两子DIV,可以用我上面说的第5种办法解决。最简单的办法就是在RIGHT中加上float:left就OK了

9,截字省略号

?
1
2
3
4
5
.hh { -o-text-overflow:ellipsis;
text-overflow:ellipsis;
white-space:
nowrapoverflow:hidden;
}

这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾。技术是好技术，很多人都喜欢乱用，但注意Firefox并不支持

CSS技巧

1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行

2. margin加倍的问题     设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上 display:inline; 例如： <#div id=”imfloat”> 相应的css为 #IamFloat{ float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/}

3.浮动ie产生的双倍距离     #box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略} 这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline 元素的特点是,和其他元素在同一行上,不可控制(内嵌元素); #box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table;

4 IE与宽度和高度的问题 IE 不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。 比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样： #box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

5.页面的最小宽度     min -width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类, 然后CSS这样设计： #container{ min-width: 600px; width:e-xpression(document.body.clientWidth < 600? “600px”: “auto” );} 第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

6.DIV浮动IE文本产生3象素的bug 左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距. #box{ float:left; width:800px;} #left{ float:left; width:50%;} #right{ width:50%;} *html #left{ margin-right:-3px; //这句是关键} <div id=”box”> <div id=”left”></div> <div id=”right”></div> </div>

7.IE捉迷藏的问题 当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。 有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。 解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。

8.float的div闭合;清除浮动;自适应高度;

① 例如：<#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” >这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为 float:left;) 这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。在 <#div class=”floatB”> <#div class=”NOTfloatC”>之间加上 < #div class=”clear”>这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。并且将clear这种样式定义为为如下即可： .clear{ clear:both;}

②作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应，要在wrapper里面加上overflow:hidden; 当包含float的 box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有,属性用zoom:1;可以做到，这样就达到了兼容。 例如某一个wrapper如下定义： .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}

③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n 栏的float div后面做一个统一的背景,譬如: <div id=”page”> <div id=”left”></div> <div id=”center”></div> <div id=”right”></div> </div> 比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right的向下拉长,而 page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决 <div id=”page”> <div id=”bg” style=”float:left;width:100%”> <div id=”left”></div> <div id=”center”></div> <div id=”right”></div> </div> </div> 再嵌入一个float left而宽度是100%的DIV解决之

④万能float 闭合(非常重要!) 关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可,屡试不爽. /* Clear Fix */ .clearfix:after { content:”.”; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac */ .clearfix {display:block;} /* End hide from IE Mac */ /* end of clearfix */ 或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显示}
11.高度不适应 高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign 时。 例： #box {background-color:#eee; }     #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }     <div id=”box”>     <p>p对象中的内容</p>     </div>     解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上 border属性。

12 .IE6下为什么图片下有空隙产生解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决.
13.如何对齐文本与文本输入框 加上 vertical-align:middle; <style type=”text/css”> <!– input {    width:200px;    height:30px;    border:1px solid red;    vertical-align:middle; } –> </style>
14.web标准中定义id与class有什么区别吗一.web标准中是不容许重复ID的,比如 div id=”aa” 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他. 二.属性的优先级问题 ID 的优先级要高于class,看上面的例子三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.
15. LI中内容超过长度后以省略号显示的方法 此方法适用与IE与OP浏览器 <style type=”text/css”> <!– li {    width:200px;    white-space:nowrap;    text-overflow:ellipsis;    -o-text-overflow:ellipsis;    overflow: hidden;    } –> </style>

16.为什么web标准中IE无法设置滚动条颜色了 解决办法是将body换成html <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“> <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /> <style type=”text/css”> <!– html {    scrollbar-face-color:#f6f6f6;    scrollbar-highlight-color:#fff;    scrollbar-shadow-color:#eeeeee;    scrollbar-3dlight-color:#eeeeee;    scrollbar-arrow-color:#000;    scrollbar-track-color:#fff;    scrollbar-darkshadow-color:#fff;    } –> </style>
17.为什么无法定义1px左右高度的容器 IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如 verflow:hidden | zoom:0.08 | line-height:1px
18.怎么样才能让层显示在FLASH之上呢 解决的办法是给FLASH设置透明 <param name=”wmode” value=”transparent” />

19.怎样使一个层垂直居中于浏览器中这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二 <style type=”text/css”> <!– div {    position:absolute;    top:50%;    lef:50%;    margin:-100px 0 0 -100px;    width:200px;    height:200px;    border:1px solid red;    } –> </style>

FF与IE  

1. Div居中问题 div设置 margin-left, margin-right 为 auto 时已经居中，IE 不行，IE需要设定body居中，首先在父级元素定义text-algin: center;这个的意思就是在父级元素内的内容居中。

2.链接(a标签)的边框与背景 a 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。

3.超链接访问过后hover样式就不出现的问题被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A Code: <style type=”text/css”> <!– a:link {} a:visited {} a:hover {} a:active {} –> </style>

4. 游标手指cursor cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以

5.UL的padding与margin ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值,所以先定义 ul{margin:0;padding:0;}就能解决大部分问题
6. FORM标签 这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了,所以后面就不会为这个头疼了.
7. BOX模型解释不一致问题 在FF和IE 中的BOX模型解释不一致导致相差2px解决方法：div{margin:30px!important;margin:28px;} 注意这两个 margin的顺序一定不能写反， important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样： div {maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写margin:xx px!important;     #box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0} #box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}
8.属性选择器(这个不能算是兼容,是隐藏css的一个bug) p[id]{}div[id]{} 这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用.属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.
9.最狠的手段 – !important; 如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略.如下 .tabd1{ background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/ background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */} 值得注意的是，一定要将xxxx !important 这句放置在另一句之上，上面已经提过

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持!


面 1

0311lc.com说：

———————

js 乘法口诀
function nine (num) {
for(var i = 1; i <= num; i++){
var str = ”;
for(var k = 1; k <= num; k++){ if(i >= k){
str += k + ‘x’ + i + ‘=’ + i*k + ‘ ‘;
}
}
console.log(str)
}
}
nine(9)

递归实现方法：
function nine (num) {
if(num == 1) {
console.log(‘1×1=1’)
} else {
nine(num – 1);
for(var i = 1, str = ”; i <= num; i++){
str += i + ‘x’ + num + ‘=’ + i*num + ‘ ‘
}
console.log(str)
}
}
nine(9)

JS递归算法1+ 2+3…..100的和

function num(n){
if(n==1) return 1;
return num(n-1)+n;
}
num(100);


笔 vue

0311lc.com说：

v-bind:class=

v-for =”(item,key) in list” :class”‘red’:key==0,’bule’:key==1″

<div v-bind:class=”{ active: isActive }”></div>

“data: {
isActive: true,
hasError: false
}”

v-bind:style

<div v-bind:style=”{ color: activeColor, fontSize: fontSize + ‘px’ }”></div>

“data: {
activeColor: ‘red’,
fontSize: 30
}”

双向数据绑定 表单
v-model
v-on:click = “getMsg”

menthods
getMsg

获取dom节点

ref = “luxilang”

this.$refs.luxilang dom

this.$refs.luxilang.value

@click 跟 v-on:click 相同

todolist 实现

增加 this.list.push(this.todolist)
删除 this.list.splice(key,1)

v-if(!item.key)

@keydown=”add($event)”

add(e){
e.keyCode=13

增加 删除 都要 保存 list 数字
localStorage.setItem(‘list’,json.stringify(this.list))

mounted 方法生命周期函数 刷新 就加载 时候
let list =JSON.parse(localStorage.getItem(‘list’)) 反序列化
if (list){
this.list = list;
}

@chage() 改变 就保 list

model/storge.vue 模块化 暴露方法 explode deadef storge
组件讲解
编写 组件页面 import Home from ‘**/’;
components : {
‘v=heard’:Home

生命周期
实例创建 create 都可以加入 before 前缀
模板编译 mounet
数据更新 updated
数据销毁 destroyed

父组件 可以
销毁 （就是隐藏）子组件 v-if flag

vue-resource
npm install vue-resource –save-dev https://github.com/pagekit/vue-resource
axios 第三房 https://github.com/axios/axios
cnpm install axios save
fetch-jsonp 支持jsonp https://github.com/camsong/fetch-jsonp

父给子 传值
调用子组件标签上绑定 数据 :title=”title”
子组件接收数据 props:[‘title’,’msg’] 子有msg那么父优先
父组件传到子组件方法 :run=”run” run() ｛alert(222)｝
子组件 props:[‘title’,’run’] @click=’run()’
验证父组件合法性 props:{“title”:string}
子组件 给父组件 传值
父主动获取子
在父页面子组件标签 ref=‘hread’ this.$refs.hread.属性或方法
子主动获取父
在子页面 this.$parent.属性或方法

非父组件 传值 兄弟组件传值方式
广播的方式
定义一个模块 vueEvent.Vue 定义一个 空的vue 实例 暴露出来

在一个兄弟页面 引入 vueEvent.vue

vueEvent.$emit(‘tonew’,this.mgs)
在另一个兄弟页面 引入 vueEvent.vue
vueEvent.$on(‘tonew’,functon(data){})

路由 （自动挂着 组件的意思） https://github.com/vuejs/vue-router

npm install vue-router –save

main.js
“import Vue from ‘vue’
import VueRouter from ‘vue-router’

Vue.use(VueRouter)”
main.js 中
创建组件 引入组件
import Home from ‘**/’;
定义路由 “const routes = [
{ path: ‘/home’, component: Home },
{ path: ‘/news’, component: News }，
{ path:’*’, redirect:’/home’} 默认跳转 home
]”

实例化vueRounte
“const router = new VueRouter({
routes // short for `routes: routes`
})”
实例挂载 main.js 加入 router

” new Vue({
router
})”

5加载 标签
<router-view></router-view> 显示路由组件位置

地址 #/home 显示了

在vue中加入
<router-link to=”/new” >新闻</router-link>

<router-link to=”/newdetail/123″ >新闻详情</router-link>
配置路由
{ path: ‘/newdetail/:aid’, component: newdetail } 动态路由

获取参数
在 newdetail 组件里 this.$router.params 获取值

get传值 /newdetail?aid=123
get传值 this.$route.query

移动端 index.html
视口 viewport <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″>
css 在assets 下值建立css
可以css 也可以是 scss 加入重置样式 https://blog.csdn.net/qq_42329594/article/details/82963562

在 main.js 中引入 必须是scss 后缀
import “./assets/css/base.scss”

某组件 <style lang=scss >

链接跳转 默认hash模式
this.$router.push({path:’/***/fa’})

history模式
实例化路由时候该为history模式 就没有#好了url

“const router = new VueRouter({
mode:history
routes // short for `routes: routes`
})”
结合后端 配置模式
nginx “location / {
try_files $uri $uri/ /index.html;
}”
apache “<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>”

用户中心 路由嵌套 父子路由

import user from ‘**/’;
{ path: ‘/user’, component: user }

div ｛display:Flex ｝ display:Flex
.left
.right{Flex:1}

配置子路由 import adduser from ‘**/’;
import listuser from ‘**/’;
” {
path: ‘/user’, component: User,
children: [

{ path: ‘/adduser’, component: adduser },
{ path: ‘/listuser’, component: listuser },
]
}”

右侧div 加入 <router-view></router-view>

<router-link to=”/user/adduser” >添加用户</router-link>
<router-link to=”/user/listuser” >添加用户</router-link>

mint UI
cnpm install mint-ui –save

官网文档 引入
“import Vue from ‘vue’
import MintUI from ‘mint-ui’
import ‘mint-ui/lib/style.css’
import App from ‘./App.vue’

Vue.use(MintUI)”

不会 https://github.com/ElemeFE/mint-ui/tree/master/example/pages 注册组件

vuex 解决不同组件数据共享 和 数据持久化

npm install vuex –save
“const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state) {
// 变更状态
state.count++
}
}
})”
import store from store 直接跟data,mothed同级
某页面触发 this.$store.commit(‘increment’, 10)
模板 {{this.$store.state.count}}

1. sessionStorage
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

用法：

储存： 1. 点（.）运算符 sessionStorage.lastname = ‘JSAnntQ’;

2. 方括号（[ ]）运算符 sessionStorage[‘lastname’] = ‘JSAnntQ’;

3. localStorage.setItem　　　　 sessionStorage.setItem(“lastname”, “JSAnntQ”);

储存： 1. 点（.）运算符 sessionStorage.lastname

2. 方括号（[ ]）运算符 sessionStorage[‘lastname’]

3. localStorage.getItem sessionStorage.getItem(“lastname”);

2. localStorage
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

用法：

储存： 1. 点（.）运算符 localStorage.lastname = ‘JSAnntQ’;

2. 方括号（[ ]）运算符 localStorage[‘lastname’] = ‘JSAnntQ’;

3. localStorage.setItem　　　　 localStorage.setItem(“lastname”, “JSAnntQ”);

储存： 1. 点（.）运算符 localStorage.lastname

2. 方括号（[ ]）运算符 localStorage[‘lastname’]

3. localStorage.getItem localStorage.getItem(“lastname”);

3. vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

用法： https://vuex.vuejs.org/zh/

VUE 父子组件的传递 props、$ref 、 $emit、$parent、$children、$root

1.父向子 通过 props 传递数据
parent.vue

<template>
<div class=”parent”>
父亲：{{message}}
<child :my-message=”message” mm=”123″></child>
// 注意传递参数时要用—代替驼峰命名，HTML不区分大小写
// 通过属性传递 可传递动态属性 也可以传递静态属性 可传递数字、布尔值、数组、对象等任何类型的值
</div>
</template>

<script>
import child from ‘../base/child’

export default {
data(){ // 组件的data必须是函数
return {
message:’好好学习’
}
},
components:{
child
}
}
</script>

<!– Add “scoped” attribute to limit CSS to this component only –>
<style scoped>

</style>

child.vue

<template>
<div class=”child”>
儿子：{{myMessage}}+{{mm}}
</div>
</template>

<script>

export default {
props:[‘myMessage’,’mm’],// 方式一
// 方式二
// props: {
// myMessage: Array //指定传入的类型，如果类型不对，会警告
// },
// // 方式三
// props: {
// myMessage: {
// type: Array,
// default: [5,6,7] //指定默认的值
// }
// }
}
</script>

<!– Add “scoped” attribute to limit CSS to this component only –>
<style scoped>

</style>

2.父向子 通过 $ref 获取子组件数据 调用子组件方法
parent.vue

<template>
<div class=”parent”>
<div class=”todo” @click=’todo’></div>
<child ref=’child’></child>// ref 作用在组件上 指向的是组件的实例 实例上的方法都可以调用
</div>
</template>

<script>
import child from ‘../base/child’

export default {
data(){ // 组件的data必须是函数
return {
}
},
methods:{
todo(){
console.log(this.$refs.child.msg)
this.$refs.child.do()
}
},
components:{
child
}
}
</script>

<!– Add “scoped” attribute to limit CSS to this component only –>
<style scoped>
.todo{
width: 100px;
height: 100px;
background-color: red;
}
</style>

child.vue

<template>
<div class=”child”>
</div>
</template>

<script>

export default {
data() {
return {
msg: ‘我是子组件传递过来的数据’
}
},
methods:{
do(){
alert(‘我是子组件的方法’)
}
}
}
</script>

<!– Add “scoped” attribute to limit CSS to this component only –>
<style scoped>

</style>

3.父向子 通过 $children 获取子组件数据和调用子组件方法
parent.vue

<template>
<div class=”parent” @click=’fatherMethod’>
<child></child>// ref 作用在组件上 指向的是组件的实例 实例上的方法都可以调用
</div>
</template>

<script>
import child from ‘../base/child’

export default {
methods:{
fatherMethod() {
this.$children[0].childClick() // $children获取的是子组件的数组 通过索引找到对应的子组件的实例
console.log(this.$children[0].msg)
}
},
components:{
child
}
}
</script>

<!– Add “scoped” attribute to limit CSS to this component only –>
<style scoped>

.parent{
width: 100px;
height: 100px;
background-color: blue;
}

</style>

child.vue

<template>
<div class=”child” @click=’childClick’>
</div>
</template>

<script>

export default {
data() {
return {
msg: ‘我是子组件传递过来的数据’
}
},
methods:{
childClick(){
this.$children.fatherMethod()
console.log(this.$children.msg)
}
}
}
</script>

<!– Add “scoped” attribute to limit CSS to this component only –>
<style scoped>

.child{
width: 100px;
height: 100px;
background-color: blue;
}

</style>

1.子向父 通过 $emit 向父组件派发事件，父组件调用获取子组件参数
parent.vue

<template>
<div class=”parent”>
<child @tell=’know’></child>// ref 作用在组件上 指向的是组件的实例 实例上的方法都可以调用
</div>
</template>

<script>
import child from ‘../base/child’

export default {
data(){ // 组件的data必须是函数
return {
}
},
methods:{
know(msg) {
alert(msg);
}
},
components:{
child
}
}
</script>

<!– Add “scoped” attribute to limit CSS to this component only –>
<style scoped>

</style>

child.vue

<template>
<div class=”child” @click=’childClick’>
</div>
</template>

<script>

export default {
data() {
return {
msg: ‘我是子组件传递过来的数据’
}
},
methods:{
childClick(){
this.$emit(‘tell’,this.msg) // 向父组件派发事件，this.msg为向父组件传递的数据
}
}
}
</script>

<!– Add “scoped” attribute to limit CSS to this component only –>
<style scoped>

.child{
width: 100px;
height: 100px;
background-color: blue;
}

</style>

2.子向父 通过 $emit 向父组件触发一个事件 子组件就可以调用父组件的方法
parent.vue

<template>
<div class=”parent”>
<child @tell=’fatherMethod’></child>// 父组件中 在子组件上监听子组件派发的tell方法 然后调用函数 就能调用子组件的方法
</div>
</template>

<script>
import child from ‘../base/child’

export default {
data(){ // 组件的data必须是函数
return {
}
},
methods:{
fatherMethod() {
alert(‘我是父组件的know方法’);
}
},
components:{
child
}
}
</script>

<!– Add “scoped” attribute to limit CSS to this component only –>
<style scoped>

</style>

child.vue

<template>
<div class=”child” @click=’childClick’>
</div>
</template>

<script>

export default {
data() {
return {
msg: ‘我是子组件传递过来的数据’
}
},
methods:{
childClick(){
this.$emit(‘tell’) // 向父组件派发事件
}
}
}
</script>

<!– Add “scoped” attribute to limit CSS to this component only –>
<style scoped>

.child{
width: 100px;
height: 100px;
background-color: blue;
}

</style>

3.子向父 父组件把方法传入子组件中 在子组件里直接调用这个方法
parent.vue

<template>
<div class=”parent”>
<child :fatherMethod=’fatherMethod’></child>// 父组件把方法传入子组件中，在子组件里直接调用这个方法
</div>
</template>

<script>
import child from ‘../base/child’

export default {
methods:{
fatherMethod() {
alert(‘我是父组件的know方法’);
}
},
components:{
child
}
}
</script>

<!– Add “scoped” attribute to limit CSS to this component only –>
<style scoped>

</style>

child.vue

<template>
<div class=”child” @click=’childClick’>
</div>
</template>

<script>

export default {
props:{
fatherMethod: {
type: Function,
default: null
}
},
methods:{
childClick(){
this.fatherMethod()
}
}
}
</script>

<!– Add “scoped” attribute to limit CSS to this component only –>
<style scoped>

.child{
width: 100px;
height: 100px;
background-color: blue;
}

</style>

4.子向父 通过 $parent 获取父组件数据和调用父组件方法
$root 和 $parent 都能够实现访问父组件的属性和方法，两者的区别在于，如果存在多级子组件，通过parent 访问得到的是它最近一级的父组件，通过root 访问得到的是根父组件(App.vue) 所以存在组件嵌套的情况下 不要使用 $root

parent.vue

<template>
<div class=”parent”>
<child></child>// ref 作用在组件上 指向的是组件的实例 实例上的方法都可以调用
</div>
</template>

<script>
import child from ‘../base/child’

export default {
data() { // 组件的data必须是函数
return {
msg:’父组件数据测试’
}
},
methods:{
fatherMethod() {
alert(‘我是父组件的方法’)
}
},
components:{
child
}
}
</script>

<!– Add “scoped” attribute to limit CSS to this component only –>
<style scoped>

</style>

child.vue

<template>
<div class=”child” @click=’childClick’>
</div>
</template>

<script>

export default {
data() {
return {
msg: ‘我是子组件传递过来的数据’
}
},
methods:{
childClick(){
this.$parent.fatherMethod()
console.log(this.$parent.msg)
}
}
}
</script>

<!– Add “scoped” attribute to limit CSS to this component only –>
<style scoped>

.child{
width: 100px;
height: 100px;
background-color: blue;
}

</style>


笔记 微小

0311lc.com说：

<pre>
rpx 适配 大小
====================
var that = this

接口图片

图片 反斜杠 replace(/\\/g,’/’)

==================wxParse=====================================
解析 html 信息
微信可以 用 webview 但是 有限制

个人类型 和海外类型不能支持 琐碎又用

wxParse https://github.com/icindy/wxParse

把 下载的wxParse目录 复制下面了
在页面引入 wxparse

//在使用的View中引入WxParse模块
var WxParse = require(‘../../wxParse/wxParse.js’);
//在使用的Wxss中引入WxParse.css,可以在app.wxss
@import “/wxParse/wxParse.wxss”;

可以 app.wxss
一如

引入模板
var article = ‘<div>我是HTML代码</div>’;
/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/
var that = this;
WxParse.wxParse(‘article’, ‘html’, article, that, 5);

=============

// 引入模板
<import src=”你的路径/wxParse/wxParse.wxml”/>
//这里data中article为bindName
<template is=”wxParse” data=”{{wxParseData:article.nodes}}”/>
=========模块化=========================================

比如 要换 域名 怎么办 不能每个页 都要 换host

公共功能 封装 模块

utils config.js

var config = {
host:’http://baidu.com’
}

module.exports = config

其他页面
var config = require(‘../../config.js’)

==========全局===============
如果 app.js 写入方法
其他页面方法调用 可以
可以在其他页面 中写入
var app = getApp();

==========wxs===================

可以 模板里 调用自定义方法 那就用wxs

WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致
wxs 是隔离的 单独了 不能 到处调用

就是 smarty 的 自定义模板标签

建立 wxs 目录 tool.wxs
里面不能用 es6语法 只能 js 语法
=============微信小程序自定义组件===================

建立 components 建立组件br目录右击建立组件

在 某个页面 目录 下 该页面.json 加入
引入 br
{
“usingComponents”: {
‘br’: ‘../components/br/br’
}
}
在 该页面 的 wxml 里 加入 <br /> 就是 现实 组件的页面了 厉害
=============父子组件传值=====

title 不同传值 传给子组件 hearder
1.在hearder 组件目录 力度额 hearder.js properties 里加入title

title:String

2.在 父页面 <header title=”{{title}}”></header>
父页面 data 中 加入 title:’某某值’; 这样 就把 title 传递给了 header;

========子组调用父组件–父组件调用子组件=======

父给子传值
建立foot组件 加入 <slot></slot>

然后 某页面 加入.js 加入组件
软后页面 加入 <foot></foot>
然后 在 <foot><button>把button标签传给slot里了</button></foot>

—————–
父组件主动调用子组件 方法
<button >调用子组件方法</button>
1.定义一个ID <hearder id=’hh’></hearder>

2.用 this.selectComponents
var hh = this.selectComponents(‘#header’);
hh.run(); //父执行 子组件 的run的方法
————–
子组件调用父组件的方法 通过 triggerEvent

Component({
properties: {},
methods: {
onTap: function(){
var myEventDetail = {} // detail对象，提供给事件监听函数
var myEventOption = {} // 触发事件的选项
this.triggerEvent(‘myevent’, myEventDetail, myEventOption)
}
}
})

点击 子组件foot 按钮 触发父组件 run()
1. 父组件 有 user页面 run() 方法 bindfu = ‘getrun’
2. 底部组件 foot 子组件 触发 父组件的 run方法
bindtap = ‘getrun’

getrun(){
this.triggerEvent(‘fu’, “传给父组件的数据”)
}
=======================================

微信小程序 toast 组件 自己的玩的
============

scroll-view
设备 里 基础 getsystemInfo

<scroll-view scroll-y style=”height: 200px;” bindscrolltolower=”loadMore” >
<view class=”list”>
<view class=”item” wx:for=”{{list}}”>
{{item.title}}
</view>
</view>
</scroll-view>

1.
data:{
windowHeight:400,
page:1
list:[]
flag:true;
},
onload:function(){
var that = this;
wx.getSystemInfo({
success (res) {
that.setdata(
windowHeight:res.windowHeight
) ;
}
})

}
2. <scroll-view scroll-y style=”height: 200px;” bindscrolltolower=”loadMore” >
改 <scroll-view scroll-y style=”height:{{windowHeight}}px;” bindscrolltolower=”loadMore” >

loadMore(){

this.reqdata();
}

reqdata(){

aja请求成功–res-
url + page;
var that = this;

var list = that.data.list.concat(res.data.result)

var page = ++ that.page;

that.setdata(
page:page
list:list
) ;
——-
}

===bug 请求出现重复请求 要加 flag 开关

loadMore(){
if(this.data.flag){
this.reqdata();
}
}

reqdata(){

this.setdata({
flag:false;
})

aja请求成功–res-
url + page;
var that = this;

if(res.data.result.length <20){
var f= false;
}else{
var f= true;
}

var list = that.data.list.concat(res.data.result)

var page = ++ that.page;

that.setdata(
page:page
list:list
flag:f
) ;

——-
}
==========================================

cover-view 覆盖物 简化导航

icon 阿里图标

拍照
</pre>


面

0311lc.com说：
技术题
1、如何解决跨域的问题?
    1、 通过jsonp跨域
    2、 document.domain + iframe跨域
    3、 location.hash + iframe
    4、 window.name + iframe跨域
    5、 postMessage跨域
    6、 跨域资源共享（CORS）
    7、 nginx代理跨域
    8、 nodejs中间件代理跨域
    9、 WebSocket协议跨域
2、介绍js的基本数据类型
   字符串值，数值，布尔值，数组，对象
3、谈谈前端的性能优化问题
    1、网络方面     
       1.减少http请求   合并js文件   合并css文件 雪碧图的使用(css sprite) 使用base64表示简单的图片
       2.减小资源体积  gzip压缩  js混淆  css压缩  图片压缩
       3. 缓存  DNS缓存  CDN部署与缓存  http缓存
       4. 移动端优化  使用长cache，减少重定向  首屏优化，保证首屏加载数据小于14kb   不滥用web字体
   2. 渲染和DOM操作方面
      1.优化网页渲染  css的文件放在头部，js文件放在尾部或者异  尽量避免內联样式
      2.DOM操作优化：
            避免在document上直接进行频繁的DOM操作
            使用classname代替大量的内联样式修改
            对于复杂的UI元素，设置position为absolute或fixed
            尽量使用css动画
            使用requestAnimationFrame代替setInterval操作
            适当使用canvas
            尽量减少css表达式的使用
            使用事件代理
       3.操作细节注意：
          避免图片或者frame使用空src
          在css属性为0时，去掉单位
           禁止图像缩放
           正确的css前缀的使用
          移除空的css规则
          对于css中可继承的属性，如font-size，尽量使用继承，少一点设置
          缩短css选择器，多使用伪元素等帮助定位
        4.移动端优化：
            长列表滚动优化
            函数防抖和函数节流
            使用touchstart、touchend代替click
            HTML的viewport设置
            开启GPU渲染加速
    3.数据方面
           图片加载处理  图片预加载  图片懒加载  首屏加载时进度条的显示
           异步请求的优化  使用正常的json数据格式进行交互  部分常用数据的缓存  数据埋点和统计
          还有就是大量数据的运算。对于javascript语言来说，本身的单线程就限制了它并不能计算大量的数据，
          往往会造成页面的卡顿。而可能业务中有些复杂的UI需要去运行大量的运算，
          所以，webWorker的使用是至关重要的。
           或许，前端标准普及的落后，会导致大家对于这些新生事物的短暂缺失吧



1、jquery的$(function(){})和$(document).ready(function(){}) 的区别

document.ready和onload的区别——JavaScript文档加载完成事件
回答：onload()和document.ready()的区别有以下两点：

1、我们可以在页面中使用多个document.ready()，但只能使用一次onload()。

2、document.ready()函数在页面DOM元素加载完以后就会被调用，而onload()函数则要在所有的关联资源（包括图像、音频）加载完毕后才会调用。

5、jquery中有哪几种类型的选择器?
   什么是#id，element，.class，*，selector1, selector2, selectorN？
6、怎样用 jQuery编码和解码URlL?
回答：在jQuery中，我们可以使用以下方法实现URL的编码和解码。

encodeURIComponent(url) and decodeURIComponent(url)
//escape()不能直接用于URL编码，它的真正作用是返回一个字符的Unicode编码值。比如"春节"的返回结果是%u6625%u8282，escape()不对"+"编码 主要用于汉字编码。
alert(escape("春节"));
alert(unescape(escape("春节")));
//encodeURI()是用来对URL编码的函数。 编码整个url地址，但对特殊含义的符号"; / ? : @ & = + $ , #"不进行编码。对应的解码函数是：decodeURI()。
alert(encodeURI('http://baidu.com?hello=您好&word=文档'));
alert(decodeURI(encodeURI('http://baidu.com?hello=您好&word=文档')));
//encodeURIComponent() 能编码"; / ? : @ & = + $ , #"这些特殊字符。对应的解码函数是decodeURIComponent()。
alert(encodeURIComponent('http://baidu.com?hello=您好&word=文档'));
alert(decodeURIComponent(encodeURIComponent('http://baidu.com?hello=您好&word=文档')));


7、如何找到所有 HTML select标签的选中项?
方法有两种。

第一种通过标签选中项文本的js代码为:
var  val = document.all.Item.options[document.all.Item.selectedIndex].text
var  i=document.getElementById( 'sel' ).options[document.getElementById( 'sel' ).selectedIndex].value
------------------------动态创建select
function  createSelect(){
var  mySelect = document.createElement( "select" );
mySelect.id =  "mySelect" ;
document.body.appendChild(mySelect);
}
添加选项option
function  addOption(){
//根据id查找对象，
var  obj=document.getElementById( 'mySelect' );
//添加一个选项
obj.add( new  Option( "文本" , "值" ));
}
)删除所有选项option
function  removeAll(){
var  obj=document.getElementById( 'mySelect' );
obj.options.length=0;
}

删除一个选项option
function  removeOne(){
var  obj=document.getElementById( 'mySelect' );
//index,要删除选项的序号，这里取当前选中选项的序号
var  index=obj.selectedIndex;
obj.options.remove(index);
}
获得选项option的值
var  obj=document.getElementById( 'mySelect' );
var  index=obj.selectedIndex;  //序号，取当前选中选项的序号
var  val = obj.options[index].value;
)获得选项option的文本
var  obj=document.getElementById( 'mySelect' );
var  index=obj.selectedIndex;  //序号，取当前选中选项的序号
var  val = obj.options[index].text;
修改选项option
var  obj=document.getElementById( 'mySelect' );
var  index=obj.selectedIndex;  //序号，取当前选中选项的序号
var  val = obj.options[index]= new  Option( "新文本" , "新值" );
删除select
function  removeSelect(){
var  mySelect = document.getElementById( "mySelect" );
mySelect.parentNode.removeChild(mySelect);
}

8. jquery怎么实现点击一个按钮控制一个dv的显示和隐藏?
示例html:



最简单的方法：


或者 

9、当CDN上的 jQuery文件不可用时,该怎么办?
回答：为了节省带宽和脚本引用的稳定性，我们会使用CDN上的jQuery文件，例如google的jquery cdn服务。但是如果这些CDN上的jQuery服务不可用，我们还可以通过以下代码来切换到本地服务器的jQuery版本：

 



10、如何使用 jQuery实现点击按钮弹出一个对话框?
HTML：


jQuery：


11、解释下什么是$root Scrope以及和$scope的区别?
1.Angular解析ng-app然后在内存中创建$rootScope。

2.angular回继续解析，找到{{}}表达式，并解析成变量。

3.接着会解析带有ng-controller的div然后指向到某个controller函数。这个时候在这个controller函数变成一个$scope对象实例。


12、ng-if跟ng-show/hide的区别有哪些?
13、表达式{{ yourModel}是如何工作的?
它依赖于 $interpolation服务，在初始化页面html后，它会找到这些表达式，并且进行标记，于是每遇见一个{{}}，则会设置一个$watch。而$interpolation会返回一个带有上下文参数的函数，最后该函数执行，则算是表达式$parse到那个作用域上。
14、列出至少三种 ANGULARJS实现不同模块之间通信方式?
15、ng- repeat迭代数组的时候,如果数组中有相同值,会有什么间题,如何解决?
16、请说下 bootstrap的特点?
      1.跨设备，跨浏览器可以兼容所有现代浏览器，包括比较诟病的IE7、8
      2.响应布局不但支持PC端的各种分辨率，还支持移动端pad,手机登屏幕的响应式切换显示。
      3.提供的全面的组件bootstrap提供了实用性很强的组件，包括：导航，标签，工具条，按钮等供开发者使用
      4.内置jquery插件 Bootstrap提供了很多实用性的JQuery插件，这些插件方便开发者实现WEB中各种常规特效。所以Bootstrap依赖于      JQuery
      5.支持html5 css3 HTML5语义化标签和CSS3属性，都可以很好的支持。
      6.支持less动态样式(4.0版本使用的是SASS 2015年8月下旬)
17、什么是 bootstrap栅格系统?
Bootstrap栅格系统工作原理：
1、数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。如：






2、在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数，比如12。如：








3、具体内容应当放置在列容器（column）之内，而且只有列（column）才可以作为行容器(.row)的直接子元素
4、通过设置内距（padding）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距（margin）来抵消内距(padding)的影响
默认class="container"是固定宽度











...




....
流式class=".container-fluid"是将固定宽度的栅格布局转换为 100% 宽度的布局。
列偏移
有的时候，我们不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移（offset）功能来实现。使用列偏移也非常简单，只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素上添加“col-md-offset-4”，表示该列向右移动4个列的宽度。


18、什么是ajax,为什么要使用Ajax(请谈一下你对AJax的认识)
   Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
19、CSS3有哪些新特性?
   1. CSS3实现圆角（border-radius），阴影（box-shadow），
   2. 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
   3.transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
   4. 增加了更多的CSS选择器  多背景 rgba
   5. 在CSS3中唯一引入的伪元素是 ::selection.
   6. 媒体查询，多栏布局
   7. border-image

20、HTML5为什么只需要写?
HTML 4.01 中的 doctype 需要对 DTD 进行引用，因为 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为。其中，SGML是标准通用标记语言,简单的说，就是比HTML,XML更老的标准，这两者都是由SGML发展而来的。BUT，HTML5不是的。

声明位于位于HTML文档中的第一行，处于  标签之前。作用：告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以怪异模式呈现。
21、HTML5的离线储存怎么使用,工作原理能不能解释一下?
如何使用：
1、页面头部像下面一样加入一个manifest的属性；
2、在cache.manifest文件的编写离线存储的资源；
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
22、px和em的区别?
两者都是制作web页面时用到的单位，PX实际上就是像素，用PX设置字体大小时，比较稳定和精确。但如果改变浏览器的缩放，原本的布局就会被打破，这时候就可以使用em定义页面的字体大小，em是相对于父元素的，1em等于一倍的父元素字体大小。
EM是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，也比较麻烦。而Rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值，所以rem用的更广泛。
IE6-IE8，不支持em和rem属性，px是所有浏览器都支持。
因此为了浏览器的兼容性，可“px”和“rem”一起使用，用"px"来实现IE6-8下的效果，然后使用“Rem”来实现代浏览器的效果。
23、什么是 Web Workers?为什么我们需要他们?
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
二、简要阐述您对前端开发的理解和看法?
WEB前端是由网页设计与制作发展而来的，随着工作的细化，需要有人完成美工图到网页的制作，从而出现了WEB前端开发这个词。WEB前端开发主要是使用HTML、CSS、JavaScript技术，将美工提供的美工图转化为网页。同时，需要顾及SEO以及后台的数据。WEB前端，相当于是一个连接美工、后台以及用户的中间平台。
问题：如何用jQuery禁用浏览器的前进后退按钮？
回答：实现代码如下：

vue 面

0311lc.com说：

一、对于MVVM的理解？

MVVM 是 Model-View-ViewModel 的缩写。
Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。
View 代表UI 组件，它负责将数据模型转化成UI 展现出来。
ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。
在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

二、Vue的生命周期

beforeCreate（创建前） 在数据观测和初始化事件还未开始
created（创建后） 完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来
beforeMount（载入前） 在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
mounted（载入后） 在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
beforeUpdate（更新前） 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
updated（更新后） 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy（销毁前） 在实例销毁之前调用。实例仍然完全可用。
destroyed（销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
1.什么是vue生命周期？
答： Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。

2.vue生命周期的作用是什么？
答：它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

3.vue生命周期总共有几个阶段？
答：它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后。

4.第一次页面加载会触发哪几个钩子？
答：会触发 下面这几个beforeCreate, created, beforeMount, mounted 。

5.DOM 渲染在 哪个周期中就已经完成？
答：DOM 渲染在 mounted 中就已经完成了。

Vue的路由实现：hash模式 和 history模式

hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取；
特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。
hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

history模式：history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。
history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”

 

y1.css只在当前组件起作用
答：在style标签中写入scoped即可 例如：<style scoped></style>

2.v-if 和 v-show 区别
答：v-if按照条件是否渲染，v-show是display的block或none；

3.$route和$router的区别
答：$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

4.vue.js的两个核心是什么？
答：数据驱动、组件系统

5.vue几种常用的指令
答：v-for 、 v-if 、v-bind、v-on、v-show、v-else

6.vue常用的修饰符？
答：.prevent: 提交事件不再重载页面；.stop: 阻止单击事件冒泡；.self: 当事件发生在该元素本身而不是子元素的时候会触发；.capture: 事件侦听，事件发生的时候会调用

7.v-on 可以绑定多个方法吗？
答：可以

8.vue中 key 值的作用？
答：当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM。

9.什么是vue的计算属性？
答：在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式。好处：①使得数据处理结构清晰；②依赖于数据，数据更新，处理结果自动更新；③计算属性内部this指向vm实例；④在template调用时，直接写计算属性名即可；⑤常用的是getter方法，获取数据，也可以使用set方法改变数据；⑥相较于methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候computed从缓存中获取，不会重新计算。

10.vue等单页面应用及其优缺点
答：优点：Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。
缺点：不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。

11.怎么定义 vue-router 的动态路由? 怎么获取传过来的值
答：在 router 目录下的 index.js 文件中，对 path 属性加上 /:id，使用 router 对象的 params.id 获取。

 

 

 


深入理解Vue 组件之间传值

0311lc.com说：

一、父组件向子组件传递数据

在 Vue 中，可以使用props向子组件传递数据。

子组件部分：

这是 header.vue 的 HTML 部分，logo 是在 data 中定义的变量。

如果需要从父组件获取 logo 的值，就需要使用props: [‘logo’]

在 props 中添加了元素之后，就不需要在 data 中再添加变量了

父组件部分：

在调用组件的时候，使用 v-bind 将 logo 的值绑定为 App.vue 中定义的变量 logoMsg

然后就能将App.vue中 logoMsg 的值传给 header.vue 了：

二、子组件向父组件传递数据

子组件主要通过事件传递数据给父组件

子组件部分：

这是 login.vue 的 HTML 部分，当<input>的值发生变化的时候，将 username 传递给 App.vue

首先声明一个了方法setUser，用 change 事件来调用 setUser

在 setUser 中，使用了$emit来遍历transferUser事件，并返回 this.username

其中transferUser是一个自定义的事件，功能类似于一个中转，this.username将通过这个事件传递给父组件

父组件部分：

在父组件 App.vue 中，声明了一个方法 getUser，用 transferUser 事件调用 getUser 方法，获取到从子组件传递过来的参数 username

getUser 方法中的参数 msg 就是从子组件传递过来的参数 username

三、子组件向子组件传递数据

Vue 没有直接子对子传参的方法，建议将需要传递数据的子组件，都合并为一个组件。如果一定需要子对子传参，可以先从传到父组件，再传到子组件。

为了便于开发，Vue 推出了一个状态管理工具 Vuex，可以很方便实现组件之间的参数传递


闭包

0311lc.com说：
闭包
因为JavaScript语言的特殊性，JavaScript并没有类的概念，如何让一个数据封装成private变量就成了一个大问题。用var定义的是全局变量，内部的函数都会访问到同一地址。举个例子

var book = (function(){
var page = 100;
return function(){
this.auther = ‘dava’;
this.price = 200;
this._page = function(){
alert(page);
}
}
})();

var a = new book();
a.auther//”dava”
a.price//   200
a.page//”wrong”
a._page()//   100