JavaScript回顾

最新推荐文章于 2024-08-10 16:15:00 发布

Kiven_super

最新推荐文章于 2024-08-10 16:15:00 发布

阅读量131

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_43510019/article/details/107442611

版权

JavaScript

JavaScript嵌入页面的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 第三种页面引入JavaScript方式：外链式 -->
    <script src="js/hello.js"></script>

    <!-- 第二种页面引入JavaScript方式：内嵌式 -->
    <script>
        alert('hello world,again!');
    </script>
</head>
<body>
    <!-- 第一种页面引入JavaScript方式：行间事件 -->
    <input type="button" value="弹出弹框" onclick="alert('hello word')">
</body>
</html>

变量、数据类型及基本语法规范

匈牙利命名风格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        //单行注释

        /*
            多行
            注释
        */

        //定义变量
        /*
        var iNum01 = 12;
        var sTr = 'abc';
        var bIsMove = true;
        */
        //  上面三句合成下面一句的写法，执行效率更高
       var iNum01 = 12,sTr = 'abc',bIsMove = true;
       var iNum02; // 变量声明，当时不复制，它的类型和值都是undefined

       alert(iNum01);
       alert(sTr);
       alert(bIsMove);
       alert(iNum02);

    </script>
</head>
<body>
    
</body>
</html>

函数定义和执行以及预解析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        //调用函数,函数在下面定义，在上面调用，这个叫做函数的预解析
        fnMyalert();


        // 定义函数
        function fnMyalert(){
            alert('hello!');
        }

        // 变量在下面定义，在上面调用，变量的申明会提前，此时它的值是undefined，这个叫做变量的预解析
        alert(iNum01);
        var iNum01 = 12;

        alert(iNum01);
    
    </script>
</head>
<body>
    
</body>
</html>

条件语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var iNum01 = 12;
        var sNum01 = '12';
    
        /*if(iNum01==12){
            alert('相等');
        }else{
            alert('不想等');
        }
        */

        // "==" 默认会将符号两边的变量转换成同一类型，这个叫做隐式转换
        /*if(sNum01==12){
            alert('相等');
        }else{
            alert('不想等');
        }*/

        // "===" 不会转换符号两边的变量类型
        if(sNum01===12){
            alert('相等');
        }else{
            alert('不想等');
        }

        if(5>3 && 10>8){
            alert('都大于');
        }else{
            alert('至少有一个不大于');
        }

        if(5>3 || 10>11){
            alert('至少有一个大于');
        }else{
            alert('都不大于');
        }

        if(!10>5){
            alert('10大于5');
        }else{
            alert('10不大于5');
        }


        var iNow = 1;

        if(iNow==1){
            alert('iNow的值是1');
        }else if(iNow==2){
            alert('iNow的值是2');
        }else{
            alert('iNow的值不是1也不是2');
        }

    </script>
</head>
<body>
    
</body>
</html>

获取元素方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        //当整个页面加载之后，再执行大括号里面的代码
        window.onload  = function(){
            var oDiv = document.getElementById('div01');
            oDiv.style.color = "red";
            oDiv.style.width = "300px";
            oDiv.style.height = "300px";
            oDiv.style.background = "gold";
            oDiv.style.fontSize = "30px";
            }

    </script>
</head>
<body>
    <div id="div01">这是一个div标签</div>

</body>
</html>

操作元素属性

获取的页面元素，就可以对页面元素的属性进行操作，属性的操作包括属性的读和写。

操作元素属性

var 变量 = 元素.属性名读取属性
元素.属性名 = 新属性值改写属性

属性名在js中的写法

1、html的属性和js里面属性写法一样

2、“class”属性写成“className”

3、“style”属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成“style.fontSize”

innerHTML可以读取或者写入标签包裹的内容

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1')
        //读取
        var sText = oDiv.innerHTML
        alert(sText)
        //写入
        oDiv.innerHTML = '<a href="http://www.itcast.cn">传智播客<a/>'
    }
</script>

....

<div id="div01">这是一个div元素</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .sty01{
            font-size: 30px;
            color: red;
        }
    
    </style>
    <script>
        window.onload = function(){
            var oDiv = document.getElementById('div01');
            var oA = document.getElementById('link01');

        // 读取属性值

        var sId = oDiv.id;
        // alert(sId);

        // 写属性值，也叫作设置或者修改属性值
        oDiv.style.color='red';
        // 属性名称中带“-”的要写成驼峰式
        oDiv.style.fontSize = '30px';

        //操作class属性,class要写成className
        oA.className = 'sty01';

        //操作元素包裹的内容
        //读取元素包裹的内容
        var sTr = oDiv.innerHTML;
        // alert(sTr);

        //写入也叫作设置或者修改元素包裹的内容
        oDiv.innerHTML = '改变的文字';
        oDiv.innerHTML = '<a href="http://www.itcast.cn">传智播客</a>'
        oDiv.innerHTML = '<ul><li>列表文字</li><li>列表文字</li></ul>'

        }
    </script>
</head>
<body>
    <div id="div01">这是一个div元素</div>
    <a href="#" id="link01">这是一个链接</a>
</body>
</html>

事件属性，匿名函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload = function(){
            var oBtn = document.getElementById('btn01');
            var oDiv = document.getElementById('div01');

            /*
            function fnChange(){
                oDiv.style.width = '300px';
                oDiv.style.height = '300px';
                oDiv.style.background = 'gold';
            }

            oBtn.onclick = fnChange;
            */

            //上面两句可以改写成下面匿名函数的形式：
            oBtn.onclick = function(){
                oDiv.style.width = '300px';
                oDiv.style.height = '300px';
                oDiv.style.background = 'gold';
            };
        
        }
    
    </script>
</head>
<body>
    <input type="button" value="改变样式" id="btn01">
    <div id="div01">这是一个div</div>
</body>
</html>

网页换肤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/skin02.css" id="link01">
    <script>
        window.onload = function(){
            var oLink = document.getElementById('link01');
            var oBtn01 = document.getElementById('btn01');
            var oBtn02 = document.getElementById('btn02');

            oBtn01.onclick = function(){
                oLink.href = 'css/skin01.css';
            }
            
            oBtn02.onclick = function(){
                oLink.href = 'css/skin02.css';
            }
        }

    </script>
</head>
<body>
    <h1>网页标题</h1>
    <input type="button" value="皮肤一" id="btn01">
    <input type="button" value="皮肤二" id="btn02">
</body>
</html>

skin01.css

body{
    background: #ddd;
}

input{
    width: 200px;
    height: 50px;
    background: pink;
    border: 0px;
    /* 设置圆角 */
    border-radius: 25px;
    font-size: 20px;
}

skin02.css

body{
    background: green;
}

input{
    width: 200px;
    height: 50px;
    background: gold;
    border: 0px;
    font-size: 20px;
}

函数传参-return关键字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
    //定义带参数的函数
    function fnAdd(iNum01,iNum02){
        var iRs = iNum01+iNum02;
        // alert(iRs);
        alert(iNum01)
        return iRs; // return在一句返回数字后，结束了函数的运行，它之后的代码不会执行
        // return; 只写一个return，作用是在这一句结束函数的运行，但是不返回任何值
        alert(iNum02)
    }

    var iRs01 = fnAdd(10,5);
    // alert(iRs01) //函数如果没有返回值，得到的值就是undefined
    alert(iRs01);

    window.onload = function(){
        var oDiv = document.getElementById('div1')
        var oBtn = document.getElementById('btn')

        function fnChange(sColor,sSize){
            oDiv.style.color = sColor;
            oBtn.style.fontSize = sSize;
        }

        // fnChange('red','30px');
        oBtn.onclick = function(){
            fnChange('red','30px');
        };

    }

    </script>
</head>
<body>
    <input type="button" id="btn" value="改变样式">
    <div id="div1">这是一个div</div>
</body>
</html>

数组及操作方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 创建数组的第一种方法: 面向对象的方式
        var aList01 = new Array(1,2,3);

        // 创建数组的第二种方法: 直接量的方式
        var aList02 = ['a','b','c','d'];

        //获取数组成员的个数
        var iLen = aList02.length;
        // alert(iLen);

        // 操作数组的某个成员
        // alert( aList02[2] );

        // 往数组后面增加成员
        aList02.push('e');
        // alert(aList02);

        // 从数组后面删除成员
        aList02.pop();
        // alert(aList02);
    
        // 将数组反转
        aList02.reverse();
        // alert(aList02)

        // 获取某个成员在数组中第一次出现的索引值
        var aList03 = ['a','b','c','d','c','d'];
        var iPos = aList03.indexOf('c');
        var iPos2 = aList03.indexOf('e');
        // alert(iPos);
        // alert(iPos2); // 如果成员不存在，就返回-1

        // 同时在数组中增加或者删除成员
        aList03.splice(4,1);
        // alert(aList03); // a,b,c,d,d

        aList03.splice(3,2,'e','f','g');
        // alert(aList03);
        
        var sTr = aList03.join('-');
        var sTr2 = aList03.join('');
        alert(sTr);
        alert(sTr2);


    </script>
</head>
<body>
    
</body>
</html>

数组去重

for循环批量操作数组成员

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var aList = ['a','b','c','d','e'];
        var iLen = aList.length

        for(var i=0;i<iLen;i++){
            alert(aList[i]);
        }


    </script>
</head>
<body>
    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var aList = [1,1,2,3,1,2,1,3,5,6,4,8,9,7,1,2,3,5,6,8,9,7,4,1];
        var aList2 = [];

        for(var i=0;i<aList.length;i++){
            if(aList.indexOf(aList[i])==i){
               aList2.push(aList[i]);
            }    
        }
        alert(aList2);

    </script>
</head>
<body>
    
</body>
</html>

将数组的数据放入页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .list{
            width: 300px;
            margin: 50px auto;
            list-style: none;
            padding: 0px;

        }

        .list li{
            line-height: 50px;
            border-bottom: 1px dotted black;
            text-indent: 10px;

        }
        
    </style>
    <script>
        window.onload = function(){
            var aList = ['红海行动','战狼2','前任3','后来的我们','喜羊羊与灰太狼','小猪佩奇'];
            var oUl = document.getElementById('list');

            var sTr = '';

            for(var i=0;i<aList.length;i++){
                sTr += '<li>' + aList[i] + '</li>';
            }

            // alert(sTr);

            oUl.innerHTML = sTr;

        }
    
    </script>
</head>
<body>
    <ul class="list" id="list">
        <!-- <li>电影名称排行</li>
        <li>电影名称排行</li>
        <li>电影名称排行</li>
        <li>电影名称排行</li>
        <li>电影名称排行</li>
        <li>电影名称排行</li> -->
    </ul>
</body>
</html>

字符串的处理方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var iNum01 = 12;
        var sNum01 = '12';
        var sNum02 = '12.45';

        // "+"符号两边如果都是数字，就做加法运算，如果有一边是字符串，就做字符串拼接
        // alert(iNum01+10); //弹出22
        // alert(sNum01+10); //弹出'1210'

        // parseInt可以将数字的字符串转化为整数，默认去除小数位
        // alert(parseInt(sNum01)+10);
        // alert(parseInt(sNum02)+10);

        // alert(parseFloat(sNum02)+10);
    
        var sTr = '2019-7-15';

        // 将字符串分割成数组
        var aList = sTr.split('-');
        var aList2 = sTr.split('');
        // alert(aList);
        // alert(aList2);

        // 获取某小段字符串在大段字符串里面的索引值
        var sTr2 = 'abcdefgh123456';
        var iPos = sTr2.indexOf('ef');
        var iPos2 = sTr2.indexOf('i');

        // alert(iPos);
        // alert(iPos2);

        // 截取字符串
        var sTr3 = sTr2.substring(3,6);
        var sTr4 = sTr2.substring(3);
        alert(sTr3);
        alert(sTr4);

    </script>
</head>
<body>
    
</body>
</html>

调试程序-将变量或对象打印出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var iNum01 = 12;
        var iNum02 = 24;
        var sTr = 'a,b,c'
        var aList = ['a','b','c']

        // alert可以将变量或对象通过弹框弹出，默认会阻止程序往下执行
        // alert(iNum01);
        // alert(iNum02);
        alert(sTr);
        alert(aList);

        // console.log可以显示变量和对象的类型，不会阻止程序往下执行
        console.log(sTr);
        console.log(aList);
    
        // 操作标题栏显示内容
        document.title = 'iNum02的值是:' + iNum02;

    </script>
</head>
<body>
    
</body>
</html>

变量作用域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 定义全局变量
        var iNum01 = 12;

        function fnMyalert(){
            // 在函数内部定义局部变量，需要加var，如果不加var，那么定义的就是一个全局变量
            var iNum02 = 24;

            // 这里不加var定义，它就是一个全局变量
            iNum03 = 36;

            // 使用全局变量
            alert('函数内部调用的全局变量iNum01:    '+iNum01);
            alert('函数内部调用的局部变量iNum02:    '+iNum02);

            iNum01 = 13;

            alert('函数内部调用的全部变量iNum01:    '+iNum01);
        }

        fnMyalert();

        alert('函数外部调用全局变量iNum01：   '+iNum01);
        alert('函数外部调用全局变量iNum03:    '+iNum03);
    </script>
</head>
<body>
    
</body>
</html>

封闭函数

/*
function fnWrap(){    
    function fnTouzi(){
        alert('亲，请关注网站新的产品!');
    }

    fnTouzi();
}

fnWrap();
*/

// 上面的定义方法，函数名称还可能同名，可以改写成下面封闭函数的形式：

/*
;(function(){    
    function fnTouzi(){
        alert('亲，请关注网站新的产品!');
    }

    fnTouzi();
})();
*/

/*
// 封闭函数高手的写法
;!function(){    
    function fnTouzi(){
        alert('亲，请关注网站新的产品!');
    }

    fnTouzi();
}();
*/

;~function(){    
    function fnTouzi(){
        alert('亲，请关注网站新的产品!');
    }

    fnTouzi();
}();

定时器

定时器在JavaScript中的作用

定时调用函数
制作动画

定时器类型及语法

setTimeout 只执行一次的定时器
clearTimeout 关闭只执行一次的定时器
setInterval 反复执行的定时器
clearInterval 关闭反复执行的定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        function fnMyalert(){
            alert('起床了！');
        }

        // fnMyalert();

        // 创建只执行一次的定时器
        // 第一个参数是函数名称，第二个参数是建个时间，单位是毫秒，不用写单位
        var oTimer = setTimeout(fnMyalert,2000);

        // 关闭只执行一次的定时器
        clearTimeout(oTimer);
        
        // 创建反复执行的定时器
        var oTimer02 = setInterval(fnMyalert,2000);

        // 关闭反复执行的定时器
        clearInterval(oTimer02);
    
    </script>
</head>
<body>
    
</body>
</html>

定时器制作移动动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background: gold;
            position: fixed;
            left: 0px;
            top: 100px;
        }

    </style>
    <script>
        window.onload = function(){
            var oDiv = document.getElementById('box');
            var iLeft = 0;
            var iSpeed = 3;

            var oTimer = setInterval(fnMove,30);

            function fnMove(){
                iLeft += iSpeed;
                oDiv.style.left = iLeft + 'px';

                if(iLeft>600){
                    iSpeed = -3;
                }

                if(iLeft<0){
                    iSpeed = 3;
                }
            }

            
        }
    
    </script>
</head>
<body>
    <div class="box" id="box"></div>
</body>
</html>

Kiven_super

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript回顾

JavaScriptJavaScript嵌入页面的方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=e
复制链接

扫一扫