js基础整理总结

Posted 2020-09-19

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js基础整理总结相关的知识，希望对你有一定的参考价值。

变量和变量作用域

变量和函数声明提升定义

Var a=100;

Function test(){

这时候由于变量声明提升，a变量已经声明，值为undefined

Console.log(a);

Var a=10;

}

字符串

数据类型检测方法：typeof（）

函数用法

indexOf 获取索引值

charAt 根据索引值获取单个字符

concat连接字符串

subStr获取部分字符串

substring获取部分字符串

slice获取部分字符串

split（”,”）分割

join合并

字符串大小写转换

toLowerCase （小）

toUpperCase （大）

数组

shift unshift 从数组开头开始添加或者删除

pop push 从数组末尾添加或者删除

concat：返回一个新数组，是将参数添加到原数组中构成的

排序 sort 从小到大 reverse 从大到小排序

slice(start,end) 数组截取

join(“|”) 数组拼接成字符串1|2|3|4|5

splice(start,deleteCount,val1,val2,...)：

从start位置开始删除deleteCount项，并从该位置起插入val1,val2,..

数据类型
日期

console.log(‘获取日期‘)

date = new Date();

console.log(date.getFullYear()) //获取完整的年份

console.log(date.getYear()) //获取当前年份

console.log(date.getMonth()) //获取当前月份

console.log(date.getDate());　　 //获取几号

console.log(date.getDay());　　 //获取星期几

console.log(‘获取时间‘)

date = new Date();

console.log(date.getHours()) //获取小时

console.log(date.getMinutes()); //获取分

console.log(date.getSeconds()); //获取秒

console.log(date.getMilliseconds());　　// 获取毫秒　　

console.log(date.getTime());　　 // 获取相对于1970-01-01的毫秒值

//设置时间

date = new Date();

date.setFullYear(9999); // => 9999年

date.setMonth(11); // => 11：月；实际为12月份(月份从0开始计算)

date.setDate(25); // => 25：日

date.setHours(15); // => 15：时

date.setMinutes(30); // => 30：分

date.setSeconds(40); // => 40：秒

date.setMilliseconds(333); // => 333：毫秒

console.log(date); // => 9999年12月25日 15点30分40秒 333毫秒

循环语句
数学对象

Math

round(x) 把数四舍五入为最接近的整数。

random() 返回 0 ~ 1 之间的随机数。

事件

点击事件

Onclick

Click

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="btn1">aa</button>
<button id="btn2">bb</button>
<button id="btn3" onclick="change()">cc</button>
<button id="btn4">ee</button>
<button id="btn5" onclick="change()">ff</button>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    //点击事件 onclick是事件，而click是方法
    $(function () {
    //第一种方法addEventListener添加的事件 removeEventListener() 方法来移除
    var btn1=document.getElementById(‘btn1‘);
    var btn2=document.getElementById(‘btn2‘);
    btn1.addEventListener(‘click‘,change);
    btn2.addEventListener(‘click‘,function(){alert(this.id)},false);
//第二种方法

        //click本身是方法作用是触发onclick事件，只要执行了元素的click()方法，就会触发onclick事件。
     $("#btn4").click(function(){
       $("#btn3").click();
      }) ;
//click方法中的function代码会在onclick事件执行完后执行，此时click方法起到追加事件的作用
        $("#btn5").click(function () {
            alert("click btn5");
        });
//        document.getElementById("btn3").onclick();
//        document.getElementById("btn3").click();
});
    function change() {
        alert("onclick btn3");
    }
</script>
</html>

鼠标移上离开事件

Onmouseenter鼠标移上

Onmouseleave鼠标离开

dbclick事件：迅速连续的两次点击时触发

mousedown事件：按下鼠标时触发

mouseup事件：松开鼠标时触发

toggle事件：鼠标点击切换事件

hover事件鼠标指针悬停

mouseover事件：鼠标从一个元素移入另一个元素时触发

mouseout事件：鼠标移出元素时触发

焦点事件

focus() 获取焦点

blur() 失去焦点

<input type="text"><span>请输入你的电话号码?</span>

$("input").focus(function(){

    $("span").css("display","inline").fadeOut(2000);

});

//失去焦点

$("input").blur(function(){

    alert("输入框失去了焦点");

});