Web前端常见问题，以及相关知识

1-解决第一次点击或轮播时，没有transition效果

    /* left=0解决第一次点击没有轮播效果

    （原因:未设置的话，初始left未知，

    点击按钮后相当于给#Photo1-1添加imgList.style.left=-1200*i +"px"，

    只有修改left属性才会产生transition效果）*/

 

2-解决a标签跳转链接为空时，取消自动刷新页面

    <!-- 一个#会滚到顶部,改成###则不会 -->

    <!-- <a href='javascriptL:;'></a> -->

 

3-解决var声明后，后续的js事件，i不被保存

    改成let i;产生块级作用域，此时i存在局部变量的块级作用域i

 

4-解决多个js中，只有最后一个js才生效

    1.如果放在head中，则把所有js代码统一放到一个js中(放head中，js内部要写...window.onload()=funciton(){})

    2.如果放在body中，则成立（js内部不需要加....window.onload....）

    3.使用jquery

5- function Phone(){   //函数对象

}  

    方法和属性添加在Phone中，但不在显式原型prototype

    Phone.name='手机'

    Phone.change=function(){}

    let nokia=new Phone()

    console.log(nokia.name) xxxx实例对象无，

    nokia.change()          xxxx实例对象无,

    运用class类

    class Person{

        static name1='手机1'    //函数对象有,可以直接访问,放在函数对象原型的constructor里

        name2='手机2'           //实例对象可以直接访问

        constructor(){

            this.d='111'        //等价于上面的name2='手机2'

        }

    }

    Person.name3='手机3' 等价于 上面的static .....

    X1.__proto__.constructor    //实例对象X1可以通过隐式原型->函数对象的原型，

                                //再访问构造器，获取函数对象的属性

 

6-一般子类继承函数对象的方法后，要将子类的原型链用constructor指向自己

    SmartPhone.prototype=new Phone()

    SmartPhone.prototype.constructor=SmartPhone

7-（===与Object.is(),两种比较两个值是否完全相等的方法）

    Object.is()类似于===，

        但是，===不能比较NaN，NaN===NaN->false(NaN于任意数值用===比较都为false)

        而Objec.is(NaN,NaN)->true

9-“./”代表当前路径     "../"代表上级目录      "/"代表根目录

10-获取和设置元素的top和left值

    第一种方法，比较简单，就是直接通过obj.style.left和obj.style.top，

    但是有局限性，这种获取的方法只能获取到行内样式的left和top的属性值，不能获取到style标签和link 外部引用的left和top属性值

    第二种方法 只读，可以获取所有style样式，存在兼容性问题，在标准浏览器中可以通过window.getComputedStyle(对象，null).left方法来获取元素的left和top的属性值。而在IE浏览器上则是采用obj.currentStyle.left方法来获取属性值。这两种方式都是只读的。

11-在js中获取元素注意事项

    通过let box1=document.getElementsByClassName('box1')  获取的是一个伪数组对象

        注意：类不唯一，可能多个元素使用,所以使用时先确定

        例如只有一个时

        let box1=document.getElementsByClassName('box1')[0]===let box1=document.getElementById('bb')

    通过let box1=document.getElementById('bb')是一个document对象的方法，可以通过它来获得指定id的html元素。

12-obj[key].obj['key'],obj.key的区别

    1.obj[key] : key代表的是循环中的一个(变量)

    2.obj['key'] : key代表的是obj的一个属性，obj['key']即代表的是取obj的key(属性值)

    3.obj.key : 此时obj.key相当于obj['key'],key代表的是obj的一个(属性)

   

13-mouseleave 与mouseout

    mouseleave事件是各元素各自触发，不是由子元素冒泡而来

    而mouseout是由子元素冒泡而来(阻止冒泡false)

14-原型链

    1.实例对象的隐式原型->函数对象的显式原型

    2.每一个函数function x（）｛｝都是Funtion的实例对象

    3.每一个函数的显式原型X.prototype都是对象(Object)的实例

    4.隐式原型是由低向高寻找

    5.（而Function自身循环）Function的隐式原型指向Function显式原型=Function原型

 

 

绿色：指向实例对象

蓝色：指向原型对象（显式原型对象）

黑色：指向隐式原型对象