js基础篇2

获取dom节点尺寸

var omw=document.querySelector('#box')
// 获取宽高
console.log(omw.offsetWidth,omw.offsetHeight)

// 获取宽高（不计算边框）
console.log(omw.clientWidth,omw.clientHeight)

获取dom节点偏移量

var a=document.querySelector('.box')

// 获取节点相对于父节点的偏移量（要求父节点要设置position），否则根据整个页面进行计算
console.log(a.offsetLeft,a.offsetTop)

获取可视窗口尺寸

// 包括滚动条
console.log(innerWidth,innerHeight)

// 不包括滚动条
console.log(window.document.documentElement.clientWidth,document.documentElement.clientHeight)

基本事件类型

1. 单击：click
2. 双击：dblclick
3. 右键：contextmenu
4. 鼠标按下：mousedown
5. 鼠标抬起：mouseup
6. 鼠标移动：mousemove
7. 移入（包括子节点）：mouseover
8. 移入（不包括子节点）：mouseenter
9. 移出（包括子节点）：mouseout
10. 移出（不包括子节点）：mouseleave
11. 键盘按下：keydown
12. 键盘抬起：keyup
13. 得到焦点：focus
14. 失去焦点：blur
15. 内容改变：input
16. 前后内容不一致：change
17. 重置：reset
18. 提交：submit
19. 触摸开始：touchstart
20. 触摸结束：touchend
21. 触摸移动：touchmove

常用鼠标事件对象（event）

box.onclick = function (evt) {
    //距离可视窗口的位置
    console.log(evt.clientX, evt.clientY) 
    //距离整个页面的位置，不受滚动条影响
    console.log(evt.pageX, evt.pageY) 
    //距离自己左上角的位置
    console.log(evt.offsetX, evt.offsetY)  
}

阻止事件传播

ob.onclick=function(evt){
    evt.stopPropagation()  //阻止这个按钮事件往下传播
}

阻止默认行为

// dom0的方式
// document.oncontextmenu=function(){
//     console.log("自定义右键菜单")
//     return false
// }


//dom2的方式
document.addEventListener('contextmenu',function(evt){
    console.log("自定义右键菜单")
    evt.preventDefault()
})

正则表达式

基本元字符

1. \d 数字
2. \D 非数字
3. \s 空白（空格、缩进、换行）
4. \S 非空白
5. \w 字母、数字或下划线
6. \W 非字母、数字或下划线
7. . 任意内容
8. \ 转义字符

边界符

1. ^ 开头
2. $ 结尾

限定符

1. * 0~多次
2. + 1~多次
3. ? 0~1
4. {n} 限定n次,必须连续
5. {n,} >=n
6. {n,m} n~m

特殊符号

1. ( ) 作为整体
2. | 或(两边默认为整体)
3. [] 表示里面只要有一个就行 [^abc]表示取反，不是abc其中一个

正则两大特新

1. 懒惰性，解决：使用全局标识符g

2. 贪婪 可以加个？，变成非贪婪

   var reg1=/\d{1,4}/      //贪婪
   var reg2=/\d{1,4}?/     //非贪婪
   console.log(reg1.exec('ab1234d')[0])
   // 1234
   console.log(reg2.exec('ab1234d')[0])
   // 1

this指向问题

1. call

2. apply

3. bind

   call 与 apply都会自动执行函数，区别：传入参数的形式不同

   bind不会自动执行函数

   obj1={
       name:'obj1',
       getName:function(a,b,c){
           console.log('getName1',this.name)
           console.log('参数',a,b,c)
       }
   }
   obj2={
       name:'obj2',
       getName:function(){
           console.log('getName2',this.name)
       }
   }
   
   obj1.getName.call(obj2,1,2,3)
   // getName1 obj2
   // 参数 1 2 3
   
   obj1.getName.apply(obj2,[1,2,3])
   // getName1 obj2
   // 参数 1 2 3
   
   var fun= obj1.getName.bind(obj2,1,2,3)
   fun()
   // getName1 obj2
   // 参数 1 2 3

继承

1

function Person(name,age){
    this.myname=name
    this.myage=age
}
Person.prototype.mysay=function(){
    console.log('hello',this.myname)
}
function Student(name,age,grade){
        // 继承
    Person.apply(this,[name,age])
    this.grade=grade
}
// 原型的继承
Student.prototype=new Person()

let stu=new Student('pig',14,100)
console.log(stu)
// {myname: 'pig', myage: 14, grade: 100}

stu.mysay()
// hello pig

2

class Person{
    constructor(name, age){
        this.myname = name
        this.age = age
    }
    mysay(){
        console.log('hello',this.myname)
    }
}
class Student extends Person{
    constructor(name, age, grade){
        super(name, age)
        this.grade = grade
    }
}
let stu = new Student('xz',18,99)
console.log(stu)
// {myname: 'xz', age: 18, grade: 99}

stu.mysay()
// hello xz

数学方法

1. var num=124.2361234
          
   // 指定保留几位小数,能够四舍五入
   console.log(num.toFixed(3))
   // 124.236
   

2. Math.random() 随机数

3. Math.round() 四舍五入

4. Math.ceil() 向上取整

5. Math.floor() 向下取整

6. Math.abs() 绝对值

7. Math.sqrt() 平方根

8. Math.pow(2,4) 2的4次方 = 16

9. Math.max(10,11,20,1,2,4) 取最大

10. Math.min(10,11,20,1,2,4) 取最小

11. Math.PI