JavaScript | JavaScript语言 | JavaScript基础 | JavaScript语言基础

已于 2023-02-23 14:33:03 修改
阅读量188 收藏
点赞数
分类专栏： WEB 前端 文章标签： javascript
于 2021-01-15 21:11:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_Fei/article/details/112685632
版权

目录

前言

一、JavaScript语言介绍

一、JavaScript核心

二、JavaScript书写方式

一、外链式：书写在页面末尾处

二、内嵌式：书写在页面末尾处

三、行内式：书写在标签中

三、JavaScript编写提示

四、JavaScript的数据类型

五、JavaScript的常用输出

六、弹窗接收用户输入

七、访问HTML基本结构方法

二、运算符、判断、循环和数组

一、运算符

二、判断和循环

  一、判断

二、循环（含水仙花数）

三、数组

三、声明变量和函数

四、获取标签元素

一、通过ID属性获取标签元素

二、通过Name属性获取标签元素

三、通过类名获取标签元素

四、通过标签名称获取标签元素

五、事件

一、事件处理程序

二、事件

五、节点

一、访问节点

一、访问方式

二、访问父级节点

三、访问兄弟节点

四、访问子节点

五、节点

二、创建节点

三、插入节点

四、移除节点

五、克隆节点

六、获取、设置与删除节点属性

六、日期函数

一、声明日期函数

二、常用Date对象的方法

三、倒计时的方法

四、定时器

七、字符串与数值类型操作

一、字符串类型操作

二、数值类型操作

八、前端三大家族

一、offset家族(偏移)

二、scroll家族(滚动)

三、client家族(可视区域)

九、JSON

十、其他知识点

前言

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。常用于制作Web页面交互效果，提升用户体验。

一、JavaScript语言介绍

JavaScript简称JS，负责描述页面的动态效果。

HTML是负责描述页面的语义、CSS是负责描述页面的样式、Js是负责描述页面的动态效果。

代码中一定要有注释、缩进、语义等，且必须拥有嵌套关系。

一、JavaScript核心

  1. ECMAScript核心，欧洲计算机制造协会，规定了JS的语法和基本对象。
  2. DOM（文档对象模型）处理网页内容的方法和接口。
  3. BOM（浏览器对象模型）与浏览器交互的方法和接口。

二、JavaScript书写方式

一、外链式：书写在页面末尾处

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外链式JS</title>
</head>
<body>
    
</body>
</html>
<script type="text/javascript" src="../Js.js"></script>

二、内嵌式：书写在页面末尾处

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内嵌式JS</title>
</head>
<body>
    
</body>
</html>
<script type="text/javascript">
    //JS相关代码
</script>

三、行内式：书写在标签中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内式JS</title>
</head>
<body>
    <button onclick="alert('提示内容')">点击</button>
</body>
</html>

三、JavaScript编写提示

  • 所有的JavaScript语句书写在<script type="text/javascript">...</script>标签对中。
  • JavaScript的标签对<script type="text/javascript">...</script>书写在网页末尾处。
  • 每条语句结束必须加上分号“ ; ”。
  • JavaScript对换行、缩进、空格不敏感。
  • JavaScript中的注释使用“//”表示单行注释；“/*...*/”表示多行注释。

四、JavaScript的数据类型

  • 使用var来定义一个或多个变量。var是关键字，后面紧跟变量名称，用空格分隔开。

  • 由英文字母、数字、下划线、美元符号$组成，不能以数字开头，且不能使用JavaScript关键字。

  • 赋值使用等于号“=”，表示将等号后面的值，赋值给变量名称。

<script type="text/javascript">
    var a = 100;              //定义Number类型的变量
    var b = "JavaScript学习"; //定义String类型的变量
    var c = true;             //定义Boolean类型的变量
    var d;                    //此时d变量为Undefined类型
    var e = null;             //此时e变量为Null类型
</script>

五、JavaScript的常用输出

<script type="text/javascript">
    //输出字符串类型需要加引号，其他类型或对象无需添加引号
    alert("弹窗内容");          //使用Window内置对象以弹窗的形式输出要输出的内容
    console.log("输出内容");    //使用控制台日志的形式输出内容
    console.warn("警告内容");   //使用控制台警告的形式输出警告内容
    console.error("错误内容");  //使用控制台错误的形式输出错误内容
    document.write("输出内容"); //使用DOM对象输出内容
    console.log(typeof a);     //使用控制台输出a变量的数据类型
</script>

六、弹窗接收用户输入

<script type="text/javascript">
    var a = prompt("请输入123");          //接收用户输入
    console.log(a);                      //用户输入的字符实体都是字符串
    var b = parseInt(a);                 //字符串转换为数字
    console.log(b);                      //控制台输出：123
    console.log(typeof b);               //控制台输出：Number
</script>

七、访问HTML基本结构方法

<script type="text/javascript">
    //访问文档头
    document.head;
    //访问文档标题
    document.title;
    //访问文档body
    document.body
    //访问HTML
    document.documentElement;
</script>

二、运算符、判断、循环和数组

一、运算符

数学运算符
运算符解释代码
+加号 
<script type="text/javascript">
    console.log("我" + “喜欢” + "学习");   //控制台输出：我喜欢学习
    console.log(1 + 2 + 3);               //控制台输出：6
    console.log(1 + "1");                 //控制台输出：11
</script>

-减号 
<script type="text/javascript">
    console.log(20 - 10);  //控制台输出：10
</script>

*乘号 
<script type="text/javascript">
    console.log(10 * 10);  //控制台输出：100
</script>

/除号 
<script type="text/javascript">
    console.log(100 / 10);  //控制台输出：10
</script>

%取余 
<script type="text/javascript">
    console.log(10 % 3);  //控制台输出：1
</script>

++累加 
<script type="text/javascript">
    var a = 10;
    var b = 10;
    a++;  //++后置，每次自加1，先运算后自加
    console.log(a);  //控制台输出：11
    ++b;  //++前置，每次自加1，先自加后运算
    console.log(b);  //控制台输出：11
</script>

--递减 
<script type="text/javascript">
    var a = 10;
    var b = 10;
    a--;  //--后置，每次自减1，先运算后自减
    console.log(a);  //控制台输出：9
    --b;  //--前置，每次自减1，先自减后运算
    console.log(b);  //控制台输出：9
</script>

? :三元运算符 
<script type="text/javascript">
    //表达式 ? 结果1 : 结果2
    var a = 5, b = 6;
    a > b ? console.log("a大于b") : console.log("a小于b");
    //控制台输出：a小于b
</script>

表达式 
<script type="text/javascript">
    console.log((3 + 5 * 4) / (6 - 3));  //控制台输出：7.666666666666667
</script>

a^ba的b次方 
<script type="text/javascript">
    console.log(math.pow(a,b));  //计算a的b次方
</script>

√￣根号 
<script type="text/javascript">
    console.log(math.sqrt(81));  //计算81的根号，结果为：9
</script>

关系运算符，得到的结果都是布尔值
True、False布尔值 
<script type="text/javascript">
    var a = true;  //声明变量a为：True
    var b = false; //声明变量b为：False
</script>

>大于 
<script type="text/javascript">
    console.log(19 > 30);  //控制台输出：False
</script>

>小于 
<script type="text/javascript">
    console.log(19 < 10);  //控制台输出：False
</script>

>=大于等于 
<script type="text/javascript">
    console.log(19 >= 30);  //控制台输出：False
</script>

<=小于等于 
<script type="text/javascript">
    console.log(19 <= 30);  //控制台输出：True
</script>

==等于 
<script type="text/javascript">
    console.log(19 == 30);  //控制台输出：False
</script>

===全等于 
<script type="text/javascript">
    console.log(19 === 30);  //控制台输出：False
</script>

!=不等于 
<script type="text/javascript">
    console.log(19 != 30);  //控制台输出：True
</script>

!==不全等于 
<script type="text/javascript">
    console.log(19 !== 30);  //控制台输出：True
</script>

逻辑运算符
&&与 
<script type="text/javascript">
    var a = 100;
    var b = 99;
    //判断a是否大于b 与 b是否小于a
    //只有两个条件都满足，执行True
    if(a > b && b < a){
        //执行True
    }else{
        //执行False
    }
</script>

||或 
<script type="text/javascript">
    var a = 100;
    var b = 99;
    //判断a是否大于b 或 b是否小于a
    //两个条件中有一个条件满足，执行True
    if(a > b || b < a){
        //True
    }else{
        //False
    }
</script>

!非 
<script type="text/javascript">
    var a = 100;
    var b = 99;
    //!非，常用于判断，也是不的意思
    //判断a是否不等于b
    //条件满足，执行True；条件不满足，执行False；
    if(a != b){
        //True
    }else{
        //False
    }
</script>

二、判断和循环

  一、判断

<script type="text/javascript">
    var a = 100;
    var b = 99;
    /*if(条件表达式){
        执行True
    }else{
        执行False
    }*/
    ============================
    if(a > b && b < a){
        //结果为True执行
    }else{
        //结果为False执行
    }
</script>

二、循环（含水仙花数）

<script type="text/javascript">
    /*
        for(初始化值;条件;增量或递减){
            //其他相关代码
        }
    */
    //声明一个变量i并赋初始值；执行判断条件；执行循环规律
    for(var i = 0; i <= 100; i++){
        //其他相关代码
    }
    //找出100~999内的水仙花数
    for(var i = 100; i < 999; i++){
        var baiwei = parseInt(i / 100);  //获取百位的值
        var shiwei = parseInt(i % 100 / 10);  //获取十位的值
        var gewei = i % 10;  //获取个位的值
        //验证是否符合水仙花数的特性
        if(math.pow(baiwei,3) + math.pow(shiwei,3) + math.pow(gewei,3) == i){
            console.log(i);
        }
    }
=================================================================================
    /*
        for(变量 in 对象或数组或JSON){
            //其他相关代码
        }
    */
    for(var i in Json){
        console.log(i);  //获取JSON属性
        console.log(Json[i]);  //获取JSON值
    }
=================================================================================
    /*
        while (条件) {
            //其他相关代码
        }
    */
    while (i < 10) {
        text += "数字是：" + i;
        i++;
    }
=================================================================================
    /*
        do {
            //其他相关代码
        }

        while (条件);
    */
    do {
        text += "数字是：" + i;
        i++;
    }
    while (i < 10);
=================================================================================
    /*
        switch(表达式) {
            case n:
                代码块
                break;
            case n:
                代码块
                break;
            default:
                默认代码块
        } 
    */
    switch (new Date().getDay()) {
        case 0:
            day = "星期天";
            break;
        case 1:
            day = "星期一";
            break;
        case 2:
            day = "星期二";
            break;
        case 3:
            day = "星期三";
            break;
        case 4:
            day = "星期四";
            break;
        case 5:
            day = "星期五";
            break;
        case 6:
            day = "星期六";
            break;
} 
</script>

三、数组

<script type="text/javascript">
    //声明数组
    var array = ["刘备","孙尚香","大乔","孙膑"];
    /*var array1 = New Array(2,4,6,8);*/
    //遍历数组
    for(var i = 0;i < array.length;i++){
        //使用数组  数组名称[索引数值]
        console.log(array[i]);
    }
    ====================================
    /*for(var j in array){
        //使用数组  数组名称[索引数值]
        console.log(array[i]);
    }*/
    //获取数组的长度  数组名称.length
    var number = array.length;
    //在数组末尾追加一个或多个元素Push()
    var arr = [1,3,5];    arr.push(7);  //结果1，3，5，7
    //在数组前加上一个或多个元素Unshift()
    var arr = [1,3,5];    arr.unshift(0);  //结果0，1，3，5
    //在数组中，移除最后一个元素，返回数组Pop()
    var arr = [1,3,5];    arr.pop();    //结果1,3
    //在数组中，移除第一个元素，返回数组Shift()
    var arr = [1,3,5];    arr.shift();    //结果3，5
    //将数组转换为字符串
    /*
        数组名称.join(分隔符，默认空为逗号)
    */
    var arr = ["aa","bb","cc"];    arr.join("-");    //结果为aabbcc
    //将字符串转换为数组
    var txt="aa-bb-cc"; txt.split("-");    //结果aabbcc
</script>

三、声明变量和函数

变量
说明代码
声明全局变量 
<script type="text/javascript">
    //声明一个全局变量number，并赋值Number类型10
    var number = 10;
    //声明一个Login的函数，默认不执行
    function Login(){
        //在函数体内正常访问
    }
    //调用函数执行
    Login();
</script>

声明局部变量 
<script type="text/javascript">
    //声明一个Login的函数，默认不执行
    function Login(){
        //声明一个局部变量number，并赋值Number类型10
        var number = 10;
        //在函数体内正常访问
    }
    //在函数体外禁止访问
    //调用函数执行
    Login();
</script>

函数
自定义函数 
<script type="text/javascript">
    /*
        //声明自定义函数，不调用不执行
        function 函数名称(){
            //其他相关代码
            return;  //默认没有返回值，终止代码执行。
        }    
    */
    //声明一个Login的函数，默认不执行
    function Login(){
        //其他相关代码
        return;  //默认没有返回值，终止代码执行。
    }
    //调用函数执行
    Login();
    //返回函数体
    Login;
</script>
直接量函数 
<script type="text/javascript">
    /*
        //声明自定义函数，不调用不执行
         var fun = function(){
            //其他相关代码
            return;  //默认没有返回值，终止代码执行。
        }    
    */
    //声明一个Login的函数，默认不执行
    var Login = function(){
        //其他相关代码
        return;  //默认没有返回值，终止代码执行。
    }
    //调用函数执行
    Login();
    //返回函数体
    Login;
</script>

带参函数 
<script type="text/javascript">
    /*
        function fun(a,b){  //其中a和b表示形参
            //其他相关代码
            return;  //默认没有返回值，终止代码执行。
        }
        //调用函数执行
        fun(a,b);//其中a和b表示实参
    */
    //声明一个带参数Login的函数，默认不执行
    function Login(a,b){  //其中a和b表示形参
        //其他相关代码
        return;  //默认没有返回值，终止代码执行。
    }
    //调用函数执行
    Login(a,b);  //其中a和b表示实参
================================================
    //获取函数形参的长度  函数名称.length
    console.log(Login.length);
    //获取函数实参的长度
    console.log(arguments.length);
    //获取函数实参的数据
    console.log(arguments);
</script>
入口函数 
<script type="text/javascript">
    //每个页面或文件中，有且只能有一个Onload函数
    window.onload = function(){
        //其他相关代码
    }
</script>

事件对象函数 
<script type="text/javascript">
    //声明按钮的点击事件，带有事件对象Event，用于检查事件状态
    btn.onclick = function(event){
        //获取event对象兼容写法
        var event = event || window.event;
==========================================================================================
        //screenX、screenY获取当前鼠标指针X、Y坐标，以电脑屏幕为基准点
        var x = event.screenX;
        var y = event.screenY;
==========================================================================================
        //pageX、pageY获取当前鼠标指针X、Y坐标，以绝对定位的文档为基准点；IE6/7/8报错，随滚动条滚动而改变
        var x = event.pageX;
        var y = event.pageY;
==========================================================================================
        //clientX、clientY获取当前鼠标指针X、Y坐标，以可是去为基准点，不随滚动条滚动而改变
        var x = event.clientX;
        var y = event.clientY;
******************************************************************************************
        //阻止父级元素冒泡
        event.stopPropagation() || event.cancelBubble == true;
******************************************************************************************
        //其他相关代码
        return;  //默认没有返回值，终止代码执行。
    }
</script>

页面滚动事件函数 
<script type="text/javascript">
    //每个页面或文件中，有且只能有一个onscroll函数
    window.onscroll = function(){
        //其他页面滚动相关代码
    }
</script>

窗口改变事件函数 
<script type="text/javascript">
    //每个页面或文件中，有且只能有一个onresize函数
    window.onresize = function(){
        //其他页面窗口改变相关代码
    }
</script>

四、获取标签元素

一、通过ID属性获取标签元素

<script type="text/javascript">
    //通过ID属性获取标签元素
    document.getElementById("ID属性名称");
    //给ID属性为nav的标签设置200px宽度
    document.getElementById("nav").style.width = 200 + "px";
</script>

二、通过Name属性获取标签元素

<script type="text/javascript">
    //通过Name属性获取标签元素
    document.getElementByName("Name属性名称");
    //给Name属性为nav的标签设置200px宽度
    document.getElementByName("nav").style.width = 200 + "px";
</script>

三、通过类名获取标签元素

<script type="text/javascript">
    //通过ClassName类名获取标签元素
    document.getElementByClassName("ClassName类名");
    //给ClassName类名为nav的标签设置200px宽度
    document.getElementByClassName("nav").style.width = 200 + "px";
</script>

四、通过标签名称获取标签元素

<script type="text/javascript">
    //通过TagName标签名称获取标签元素
    document.getElementByTagName("TagName标签名称");
    //给TagName标签名称为nav的标签设置200px宽度
    document.getElementByTagName("nav").style.width = 200 + "px";
</script>

五、事件

一、事件处理程序

<script type="text/javascript">
    /*事件源指的是当前需要事件的元素，去执行什么事件
    事件源.事件 = function(){
        //其它相关代码
    }*/
    /*btn按钮的点击事件，btn按钮就是事件源，去执行点击事件*/
    btn.onclick = function(){
        div.style.width = "400px";
    }
</script>

二、事件

事件
事件属性当以下情况发生时，执行此事件
onabort图像加载被中断
onblur元素失去焦点
onchange用户改变域的内容
onclick鼠标点击某个对象
ondblclick鼠标双击某个对象
onerror当加载文档或图像时发生某个错误
onfocus元素获得焦点
onkeydown某个键盘的键被按下
onkeypress某个键盘的键被按下或按住
onkeyup某个键盘的键被松开
onload某个页面或图像被完成加载
onmousedown某个鼠标按键被按下
onmousemove鼠标被移动
onmouseout鼠标从某元素移开
onmouseover鼠标被移到某元素之上
onmouseup某个鼠标按键被松开
onreset重置按钮被点击
onresize窗口或框架被调整尺寸
onselect文本被选定
onsubmit提交按钮被点击
onunload用户退出页面

五、节点

每一个HTML标签都是一个元素节点；标签中的文字是文字节点；标签的属性是属性节点。

一、访问节点

一、访问方式

<script type="text/javascript">
    //通过ID属性获取标签元素节点
    document.getElementById("ID属性名称");
    //通过Name属性获取标签元素节点
    document.getElementByName("Name属性名称"); 
    //通过ClassName类名获取标签元素节点
    document.getElementByClassName("ClassName类名");
    //通过TagName标签名称获取标签元素节点
    document.getElementByTagName("TagName标签名称");
</script>

二、访问父级节点

<script type="text/javascript">
    //访问父级节点
    document.getElementById("ID属性名称").parentNode;
    //设置父级节点属性
    document.getElementById("ID属性名称").parentNode.innerHTML="设置父级节点属性";
    document.getElementById("ID属性名称").parentNode.style.fontSize="20px";
</script>

三、访问兄弟节点

<script type="text/javascript">
    //访问下一个兄弟节点IE6、7、8兼容，其他浏览器不兼容
    document.getElementById("ID属性名称").nextSibling;
    //访问下一个兄弟节点IE不兼容，其他浏览器兼容
    document.getElementById("ID属性名称").nextElementSibling;
==========================================================================================
    //访问上一个兄弟节点IE6、7、8兼容，其他浏览器不兼容
    document.getElementById("ID属性名称").PreviousSibling;
    //访问上一个兄弟节点IE不兼容，其他浏览器兼容
    document.getElementById("ID属性名称").PreviousElementSibling;
==========================================================================================
    //设置兄弟节点属性
    var nextNode = document.getElementById("ID属性名称").nextElementSibling || document.getElementById("ID属性名称").nextSibling;
    var prevNode = document.getElementById("ID属性名称").PreviousElementSibling || document.getElementById("ID属性名称").PreviousSibling;
==========================================================================================
    nextNode.innerHTML="设置父级节点属性";
    prevNode.style.fontSize="20px";
</script>

四、访问子节点

<script type="text/javascript">
    //访问子节点第一个节点IE6、7、8兼容，其他浏览器不兼容
    document.getElementById("ID属性名称").Firstchild;
    //访问子节点第一个节点IE不兼容，其他浏览器兼容
    document.getElementById("ID属性名称").FirstElementchild;
==========================================================================================
    //访问子节点最后一个节点IE6、7、8兼容，其他浏览器不兼容
    document.getElementById("ID属性名称").Lastchild;
    //访问子节点最后一个节点IE不兼容，其他浏览器兼容
    document.getElementById("ID属性名称").LastElementchild;
==========================================================================================
    //获取所有的子节点，通过循环遍历获取某元素下的子节点
    var childrens = ul.children;  //获取所有的子节点，不包含属性节点和文字节点
    //获取所有的子节点，含属性节点和文字节点
    //利用nodeType == 1时是元素节点，2是属性节点，3是文字节点；通过判断设置属性和文字
    var childNodes = ul.childNodes;  //获取所有的子节点，含属性节点和文字节点
==========================================================================================
    //设置子节点属性
    var firstNode = document.getElementById("ID属性名称").FirstElementchild|| document.getElementById("ID属性名称").Firstchild;
    var LastNode = document.getElementById("ID属性名称").LastElementchild|| document.getElementById("ID属性名称").Lastchild;
==========================================================================================
    firstNode.innerHTML="设置子节点属性";
    LastNode.style.fontSize="20px";
</script>

五、节点

二、创建节点

<script type="text/javascript">
    //创建一个li标签，创建后插入
    var lis = document.createElement("li");
    //插入节点
    div.appendchild(lis);  //在末尾追加一个节点
==========================================================================================
    //插入节点
    /*
        div.insertBefore(插入的节点，参照节点或ID属性；如为空，则插入到最后面);
    */
    div.insertBefore(lis,div[0]);
</script>

三、插入节点

<script type="text/javascript">
    //插入节点
    /*
        div.insertBefore(插入的节点，参照节点或ID名称；如为空，则插入到最后面);
    */
    div.insertBefore(lis,div[0]);
</script>

四、移除节点

<script type="text/javascript">
    //移除子节点
    div.removechild(li)
</script>

五、克隆节点

<script type="text/javascript">
    //克隆节点
    /*
        div.cloneNode();  //参数为True克隆整个节点树；为False克隆本节点
    */
    //克隆节点后要插入
    div.appendchild(div[0],cloneNode());  //克隆div的第0个
</script>

六、获取、设置与删除节点属性

<script type="text/javascript">
    //获取节点属性
    div.getAttribute("ID名称或类名");
    //设置节点属性
    div.setAttribute("属性","值");
    //删除节点属性
    div.removeAttribute("属性");
</script>

六、日期函数

一、声明日期函数

<script type="text/javascript">
    //声明日期函数
    var date = new Date();  //的到当前年月日，时分秒等
</script>

二、常用Date对象的方法

常用Date对象的方法
方法注解代码
getFullYear()获取完整年份 
<script type="text/javascript">
    //声明日期函数
    var date = new Date();  //的到当前年月日，时分秒等
    date.getFullYear();  //获取年份
</script>

getMonth()获取月份，0~11月 
<script type="text/javascript">
    //声明日期函数
    var date = new Date();  //的到当前年月日，时分秒等
    date.getMonth();  //获取月，0~11月
</script>

getDate()获取日，1~31日 
<script type="text/javascript">
    //声明日期函数
    var date = new Date();  //的到当前年月日，时分秒等
    date.getDate();  //获取日，1~31日
</script>

getDay()获取星期，0~6，0表示星期天，1表示星期一，以此类推 
<script type="text/javascript">
    //声明日期函数
    var date = new Date();  //的到当前年月日，时分秒等
    date.getDay();  //获取星期，0~6；0表示星期天；1表示星期一；以此类推
</script>

getHours()获取小时，0~23小时 
<script type="text/javascript">
    //声明日期函数
    var date = new Date();  //的到当前年月日，时分秒等
    date.getHours();  //获取小时，0~23小时
</script>

getMinutes()获取分钟，0~59分钟 
<script type="text/javascript">
    //声明日期函数
    var date = new Date();  //的到当前年月日，时分秒等
    date.getMinutes();  //获取分钟，0~59分钟
</script>

getSeconds()获取秒，0~59秒 
<script type="text/javascript">
    //声明日期函数
    var date = new Date();  //的到当前年月日，时分秒等
    date.getSeconds();  //获取秒，0~59秒
</script>

getMilliseconds()获取毫秒，0~999毫秒 
<script type="text/javascript">
    //声明日期函数
    var date = new Date();  //的到当前年月日，时分秒等
    date.getMilliseconds();  //获取毫秒，0~999毫秒
</script>

getTime()获取至今的毫秒数 
<script type="text/javascript">
    //声明日期函数
    var date = new Date();  //的到当前年月日，时分秒等
    date.getTime();  //获取从1970年1月1日到现在的毫秒数
</script>

get方法是获取，如getHours是获取当前小时，而setHours则是设置当前小时。

三、倒计时的方法

<script type="text/javascript">
    //声明当前时间
    var nowTime = new Date();
    //声明截止时间
    var endTime = new Date("2021/05/01 15:00:00");
    //获取还剩多少毫秒
    var Milliseconds = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);
    //获取秒
    var seconds = parseInte(Milliseconds % 60);
    seconds < 10 ? seconds = "0" + seconds : seconds;
    //获取分钟
    var minutes = parseInt(Milliseconds / 60 % 60);
    minutes < 10 ? minutes = "0" + minutes : minutes;
    //获取小时
    var hours = parseInt(Milliseconds / 3600 % 24);
    hours < 10 ? hours = "0" + hours : hours;
    //获取天
    var day = parseInt(Milliseconds / 3600 / 24);
    day < 10 ? day = "0" + day : day;
    //控制台输出
    console.log("距离截止时间还有："+ day + "天" + hours + "小时" + minutes + "分" + seconds + “秒”);
</script>

四、定时器

<script type="text/javascript">
    /*
        var Timer = setInterval("执行的函数体或函数名称","间隔时间，以毫秒为单位");
    */
    //声明定时器
    var Timer = setInterval(fun,5000);  //每隔5秒执行一次Fun函数
    var Timer = setInterval("fun",5000);  //每隔5秒执行一次Fun函数
    //每隔5秒执行一次Fun函数
    var Timer = setInterval(function(){
        alert("使用Timer执行函数");
    },5000);
    var Timer = setInterout("fun",5000);  //5秒之后执行一次Fun函数，只执行一次
==========================================================================================
    //关闭定时器，如不关闭，则永久执行
    //开启定时器前一定要先关闭定时器
    clearInterval(定时器名称);
</script>

七、字符串与数值类型操作

一、字符串类型操作

<script type="text/javascript">
    //转换为字符串
    var txt = 16;
    String(txt);
    txt.toString();  //带参数转换表示转换为进制，默认转换为十进制
========================================================================================
    //charAt(字符位置);获取相应位置字符，索引从0开始，如没有，则返回空字符串
    var txt = "Hello World!";
    txt.charAt(3);  //结果返回l
    //charCodeAt(字符位置)  获取相应位置字符unicode编码，索引从0开始，如没有，则返回NaN
    txt.charAt(1);  //结果返回101
    //indexOf("字符");获取相应字符的位置；索引从0开始，从左至右；对大小写敏感；
    //返回数值类型，只找第一个；有则返回索引号，如没有，返回-1；
    txt.indexOf("l");  //结果2
    txt.indexOf("w");  //结果-1
    //lastIndexOf("字符");获取相应字符的位置；索引从0开始，从右至左；对大小写敏感；
    //返回数值类型，只找最后一个；有则返回索引号，如没有，返回-1；
    txt.lastIndexOf("l");  //结果9
    txt.lastIndexOf("W");  //结果6
    txt.lastIndexOf("o");  //结果7
========================================================================================
    var txt = "Hello World!";
    //slice(字符串的起始位置,[结束位置]);截取字符串，起始位置必须，结束位置可选
    //没有结束位置就全截取，有截取位置时，截取时不含结束位置；数组同理
    txt.slice(2,7);  //结果llo W
    //substr(起始位置,[截取个数]);截取字符串，起始位置必须，截取个数可选，IE6/7/8不能带参数-1
    //没有截取个数就全截取，有截取个数时，截取时从起始位置至截取个数，索引从0开始
    txt.substr(3,7);  //结果lo Worl
========================================================================================
    //concat(参数);concat函数可以连接字符串和数组
    var array = [1,3,5];
    var txt="Hello World!";
    array.concat(txt);  //结果为1,3,5,Hello World!
========================================================================================
    //转换大写
    txt.toUpperCase();
    //转换小写
    txt.toLowerCase();
****************************************************************************************
    //获取文件格式
    var path = "Logo.jpeg";
    path.substr(path.lastIndexOf(".")).toUpperCase();
</script>

二、数值类型操作

<script type="text/javascript">
    //获取小数点，保留两位小数
    var number = "9876.54321";
    number.substr(0,number.indexOf(".")+3);
========================================================================================
    //通过取整，然后除以100，保留两位小数
    parseInt(number*100)/100;
========================================================================================
    //使用toFixed函数，保留两位小数
    number.toFixed(2);
========================================================================================
    //使用Math.ceil()方法向上取整
    Math.ceil(20.3);  //结果21
    Math.ceil(1.01);  //结果2
    Math.ceil(-1.3);  //结果-1
========================================================================================
    //使用Math.floor()方法向下取整
    Math.floor(20.3);  //结果20
    Math.floor(1.01);  //结果1
    Math.floor(-1.3);  //结果-2
========================================================================================
    //使用Math.round()方法四舍五入
    Math.round(20.4);  //结果20
    Math.round(20.5);  //结果21
    Math.round(24.5);  //结果25
========================================================================================
    //使用Math.abs()方法获取绝对值
    Math.round(7.25);  //结果7.25
    Math.round(-7.25);  //结果7.25
    Math.round(7.25-10);  //结果2.75
========================================================================================
    //取整方法
    parseInt(19.11);  //取整，结果19
    parseInt(19.99);  //取整，结果19
    parseInt(19.11);  //取整，结果19
    parseInt(""25px);  //取整，结果25
    parseInt(10,2);  //取整，结果2
</script>

八、前端三大家族

一、offset家族(偏移)

offset家族
方法说明注解
offsetWidth获取当前对象的宽度，只读，不能设置更改值实际宽度(含滚动条) = Width + border + padding
offsetHeight获取当前对象的高度，只读，不能设置更改值实际高度(含滚动条) = Height + border + padding
offsetLeft获取距离上一级带有定位盒子左边的位置，只读，不能设置更改值，如父级元素无定位则以body为准，此处指的是所有父级元素实际距离 = 子盒子边框 ~ 定位父盒子边框的距离
offsetTop获取距离上一级带有定位盒子上边的位置，只读，不能设置更改值，如父级元素无定位则以body为准，此处指的是所有父级元素实际距离 = 子盒子边框 ~ 定位父盒子边框的距离
offsetParent获取该对象带有定位的父级元素，如果当前元素的父级元素没有进行CSS定位，以body为准；如果当前元素的父级元素中有CSS定位，获取最近的那个父级元素

二、scroll家族(滚动)

scroll家族
方法说明注解
scrollWidth获取当前对象的宽度，只读，不能设置更改值自身实际的宽度大小是内容决定的
scrollHeight获取当前对象的高度，只读，不能设置更改值自身实际的高度大小是内容决定的
scrollLeft获取当前对象左边与视图之间的距离，只读，不能设置更改值
scrollTop获取当前对象上边与视图直接的距离，只读，不能设置更改值 
<script type="text/javascript">
    //scrollTop兼容性写法
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
</script>

scrollTo参数X、Y，可将内容滚动到指定的坐标。X参数必须，要在窗口文档显示区左上角显示文档的X坐标；Y参数必须，要在窗口文档显示区左上角显示文档的Y坐标；

三、client家族(可视区域)

client家族
方法说明注解
clientWidth获取当前对象的可视区域宽度实际宽度(可视宽度) = Width + padding
clientHeight获取当前对象的可视区域高度实际宽度(可视高度) = Height+ padding
clientLeft获取当前对象的可视区域左边宽度实际宽度(可视左边) = 左边宽度 + padding
clientTop获取当前对象的可视区域上边宽度实际宽度(可视上边) = 上边宽度 + padding

九、JSON

<script type="text/javascript">
    //声明JSON
    var json = {"width":"25px","height":"30px","color":"red"};
    //使用json
    console.log(json.width);  //结果25px
    console.log(json.height);  //结果30px
    console.log(json.color);  //结果red
==========================================================================================
    //使用For循环遍历JSON
    for(var i in json){
        console.log(i);  //获取JSON属性
        console.log(json[i]);  //获取JSON值
    }
==========================================================================================
    //使用in运算符判断JSON属性  //结果返回True
    if("width" in json){
        console.log(true);
    }else{
        console.log(true);
    }
</script>

十、其他知识点

  • this关键字主要是指自己的调用、事件的调用者或函数的使用者
  • JS代码中页面跳转 window.location.href = "http://www.xxx.com";  //使用BOM对象
  • 对象就是带有属性和放方法的数据类型称为对象数据类型。
  • 递归：函数自己调用自己的过程，叫做递归调用，一定要有退出条件。
  • 所有的字符串都为真，""为假；所有的数字都为真，0为假。
  • a&&b   a为真，返回b；a为假，返回a。
  • a||b      a为真，返回a；a为假，返回b。
  • 缓动动画语法  var leader = 0,target = 400;    leader = leader + (target - leader) / 10;
<script type="text/javascript">
========================================================================================
    //监测屏幕宽度：分辨率
    window.screen.width;  //返回电脑分辨率宽度
    window.screen.height;  //返回电脑分辨率高度
========================================================================================
    //按钮可用
    btn.disabled = false;
    //按钮不可用
    btn.disabled = true或"disabled";
========================================================================================
    //不显示滚动条，不允许下拉
    document.body.style.overflow = "hidden";
    //显示滚动条，允许下拉
    document.body,style.overflow = "visible";
========================================================================================
    //获取选择的内容，兼容写法
    if(window.getSelection){
        txt.window.getSelection().toString();
    }else{
        txt = document.selection.createRange().text;
    }
    //选择的内容防止拖动，兼容写法
    window.getSelection ? window.getSelection().removeAllRanges() : document,selection.empty();
========================================================================================
    //判断是否获取到当前对象ID
    //event.target.id  //获取事件触发元素ID
    //event.target.className  //获取事件触发元素ClassName
    //event.target.nodeName  //获取事件触发元素标签Name
    //event.target.innerHTML  //获取事件触发元素内容
    var targetId = event.target ? event.target.id : event.srcElement.id;
========================================================================================
    //获取或设置CSS属性
    var width = div.style.width;
    div.style.width = "200px";

    //获取CSS属性兼容写法
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }else{
        return window.getComputedStyle(object,null)[attr];
    }
</script>

Vin Cente
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Vin Cente

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值