JS基础

最新推荐文章于 2020-11-20 19:55:56 发布

稳健de少年

最新推荐文章于 2020-11-20 19:55:56 发布

阅读量326

点赞数

文章标签： JS 基础

本文链接：https://blog.csdn.net/Ssssssue/article/details/79590630

版权

JS

    <title>基础语法</title>
    <!-- 内部引入 -->
    <script type="text/javascript">
        // js 弱类型语言
        // 变量
        // js声明变量都用var关键字
        // 五种基本数据类型
        var a = 10;//数值 Number
        var b = "123";//字符串 String
        var c = '456';// 字符串 String
        var d = true;// 布尔类型 boolean
        var e = null;//空对象  null
        var g;//未定义类型 undefined
        // 1.数字 字母 下划线 $组合
        // 2.不能以数字开头
        // 3.不能是关键字h和保留字
        // 4.区分大小写
        // 规范 可以使用驼峰命名方法

        // 判断相等 == ===
        // == 会判断两个值是否相等
        //  === 除了判断值之外 还会判断类型

        console.log("5" == 5);
        console.log("5" === 5);     
        console.log("5" != 5);
        console.log("5" !== 5);




        // 类型转换
        // 查看类型
        console.log(typeof a);
        //转数字
        console.log(Number(true));
        console.log(Number(false));
        console.log(Number("123"));
        console.log(Number("abc"));
        console.log(Number("a1"));
        console.log(Number("1a"));
        console.log(Number(""));
        console.log(Number(" "));
        console.log(Number(null));
        console.log(Number(undefined));

        // 字符串
        console.log(String(undefined));
        // 转布尔值
        // 非0为真 非空为真
        console.log(Boolean(-1));

        // 隐式转换
        // 加号两边如果有一个是字符串 就是拼接字符串
        // 其他算数运算符是转化为数值计算
        console.log(3 + true);
        console.log(null + 5);
        console.log(false + "2");
        console.log(5 - true);
        console.log(6 + undefined);



        // 转数字
        console.log(parseInt(5.6));
        console.log(parseInt("5.6"));
        console.log(parseInt("34abc"));
        console.log(parseInt("a36"));


        // 10进制 --> 2 进制
        console.log(parseInt(1100100,2));

        // 生成随机数
        var num = Math.random();
        console.log(num);



        // 函数 JS里面的变量只分为函数内部的局部变量和函数外面的全局变量
        function test(a, b){
            console.log(a + b);
            return a * b;
        }
        var c = test(10,20);
        console.log(c);
        // 匿名函数
        var fn = function () {
            console.log("我是匿名函数");
        };
        fn();
        // 匿名函数自执行
        (function () {
            console.log("我是匿名函数");
        })();

        (function () {
            console.log("我是匿名函数");
        }());


        console.log("helloworld");
    </script>
    <!-- 外部引入 -->
    <script type="text/javascript" src="xx.js"></script>

简单的DOM操作

    <body>
    <div id="first"></div>
    <input type="text" class="uName">
    <input type="button" value="按钮">
</body>
<script type="text/javascript">
    var first = document.getElementById("first");
    first.style.backgroundColor = "blue";
    first.style.border = "1px red solid";
    first.style.margin = "50px auto";
    // first.style.transform = "rotate(45deg)";

    // 获取、修改内容 innerHTML可以解析字符串里面的标签
    // innerText不能解析 可以写留言板
    // first.innerHTML = "<p>福</p>";
    first.innerText = "<p>福</p>";
    console.log(first.innerHTML);

    // 通过类名获取一组元素
    var uNames = document.getElementsByClassName("uName");
    // uNames是所有类名为uName的集合 先当数组用
    uNames[0].value = "我是一个输入框";
    console.log(uNames[0].value);
    // 两种获取方式 三种修改内容 一种修改样式

    // 通过标签名获取
    var inputs = document.getElementsByTagName("input")[1];
    var a = 1;
    // 添加点击方法  每次点击都会执行下面这个函数
    inputs.onclick = function(){
        console.log(123);
        uNames[0].value = a++;
        first.style.transition = "1s";
        first.style.width = a * 10 + "px";
        first.style.height = "100px";
    }

</script>

    <body>

    <input type="text" class="uName">
    <input type="button" value="按钮">
    <div id="first"></div>

    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</body>
<script type="text/javascript">
    var uNames = document.getElementsByClassName("uName");
    var button = document.getElementsByTagName("input")[1];
    button.onclick = function(){
        var num = uNames[0].value;
        var first = document.getElementById("first");
        if (num % 2 == 0) {
            first.innerHTML = num + "为偶数";
        } else{
            first.innerHTML = num + "为奇数";
        }
    }


    var divs = document.getElementsByClassName("item");
    var last = divs[0];
    // 4.循环配合一组元素(div)使用
    for (var i = 0; i < divs.length; i++) {
        divs[i].num = i;
        // 3.1循环的时候每个div发一个学号 让这个div自己记住自己是第几个(获取点击div的角标)
        divs[i].onclick = function(){
        //  3.2需要知道某一个div是第几个的时候 就让他自己报出来自己的学号
            console.log(this.num);

        //  2.写代码的时候实现某一功能思路很多,要找一个性能最好的来实现
        //  for (var j = 0; j < divs.length; j++) {
        //      divs[j].style.backgroundColor = "red";
        //  }
        //  1.this 谁执行的点击方法 this 就是谁
        //  this.style.backgroundColor = "gray";

            last.style.backgroundColor = "red";
            this.style.backgroundColor = "gray";
            last = this;
        }
    }

</script>

DOM

    <body>
    <div class="box">
        我是box
        <!-- 这是一个注释 -->
        <p>P</p>
    </div>
</body>
<script type="text/javascript">
    // 1.创建元素
    var newDiv = document.createElement("div");
    newDiv.className = "item";
    newDiv.id = "first";
    newDiv.style.background = "red";
    newDiv.innerHTML = "撒大师的萨顶顶发大水发的说法撒的";
    // 2.添加元素
    var body = document.getElementsByTagName("body")[0];
    var box = document.getElementsByClassName("box")[0];
    // body最后面添加
    body.appendChild(newDiv);
    // 把newDiv插入到box前面
    // body.insertBefore(newDiv,box);
    // 3.删除元素
    // body.removeChild(box);
    box.remove();


    // 原生对象
    var obj = {
        name:"丁鹏",
        age:18,
        gender:"man",
        eat:function(){
            console.log("吃饭");
        }
    };
    obj.dd = 1;
    console.log(obj);
    // 宿主对象 浏览器自己添加的对象(div)
    console.log(newDiv);
    // DOM(元素)属性

    // 节点 标签 文本 注释 声明(doctype)
    // 获取元素下所有子节点
    console.log(box.childNodes);
    // 获取标签类型的子节点
    console.log(box.children);


    // 尺寸
    console.log(newDiv.offsetWidth);//包含边框
    console.log(newDiv.clientWidth);//不含边框和滚动条(可视区域)
    console.log(newDiv.scrollHeight);//内容的高度

    // 位置
    console.log(newDiv.offsetTop);
    console.log(newDiv.offsetLeft);//相对于定位父级的一个位置

    console.log(newDiv.scrollTop);// 子元素滚动上去的一段距离
    // 除了scrollTop(可设置属性)之外 以上属性都是只读的

</script>

定时器

    一次性定时器 延时器
    <script type="text/javascript">
    // 代表1秒后执行
    setTimeout(f1,1000);
    function f1(){
        console.log("f1执行")
    }
    </script>

    <script type="text/javascript">
    // 循环定时器
    // 2秒执行一次
    var timer = setInterval(function(){
        console.log("循环定时器");
    },2000);
    setTimeout(function(){
        // 清除定时器
        // 8秒后清除定时器
        clearInterval(timer);
        // clearTimeout
    },8000);
    </script>

事件名称

    <head>
        <meta charset="UTF-8">
        <title>事件名称</title>
        <style>
            .redDiv{
                width: 200px;
                height: 200px;
                background-color: red;
            }
            .body{
                height: 3000px;
            }
        </style>
    </head>
    <body>
        <div class="redDiv"></div>
        <form action="" id="reg">
            <input type="text" id="uName" />
            <input type="submit" id="sub" />
            <input type="reset" id="reset" />
        </form>
    </body>
    <script type="text/javascript">
        var redDiv = document.getElementsByClassName('redDiv')[0];
        var reg = document.getElementById('reg');
        var uName = document.getElementById('uName');

        // 鼠标事件
        redDiv.onclick = function(){
            console.log("单击事件");
        }
        redDiv.ondblclick = function(){
            console.log("双击事件");
        }
        redDiv.onmousedown = function(){
            console.log("鼠标按下事件");
        }
        redDiv.onmouseup = function(){
            console.log("鼠标抬起事件");
        }
        redDiv.oncontextmenu = function(){
            console.log("鼠标右击事件");

            return false;
        }
        redDiv.onmousemove = function(){
            console.log("鼠标在移动的时候触发")
        }
        // over和out会在鼠标从redDiv的父级移到子级的时候触发 先触发out 再触发over
        // leave和enter从父级移到子级不会触发 只有鼠标离开整个父级的时候才会触发
        redDiv.onmouseover = function(){
            console.log("鼠标移入事件");
        }
        redDiv.onmouseout = function(){
            console.log("鼠标移出事件");
        }
        redDiv.onmouseleave = function(){
            console.log("鼠标移出事件");
        }
        redDiv.onmouseenter = function(){
            console.log("鼠标移入事件");
        }

        // 键盘事件
        document.onkeydown = function(){
            console.log("down键盘按下");
        }
        document.onkeypress = function(){
            console.log("press键盘按下");
        }
        document.onkeyup = function(){
            console.log("键盘抬起事件");
        }

        // 表单
        uName.onchange = function(){
            console.log("change内容发生变化之后触发");
        }
        uName.oninput = function(){
            console.log("input内容发生变化之后触发");
        }
        uName.onfocus = function(){
            console.log("聚焦");
        }
        uName.onblur = function(){
            console.log("失焦");
        }

        // 给form表单绑定事件
        reg.onsubmit = function(){
            console.log("提交");

            return false;
        }
        reg.onreset = function(){
            console.log("重置");

            return false;
        }

        //window事件
        window.onresize = function(){
            console.log("窗口尺寸发生变化的时候触发");
        }
         window.onscroll = function(){
            console.log("窗口内容滚动的时候触发")
         }
         window.onload = function(){
            console.log("窗口加载完毕之后触发")
         }


    </script>

事件对象

        <head>
        <meta charset="UTF-8">
        <title>事件对象</title>
        <style type="text/css">
            body{
                height: 3000px;
            }
            .redDiv{
                width: 200px;
                height: 200px;
                background-color: red;
            }
            p{
                margin: 0;
                height: 100px;
                margin-left: 100px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="redDiv">
            <p></p>
        </div>
    </body>
    <script type="text/javascript">
        // 鼠标事件 -> 位置
        var redDiv = document.getElementsByClassName('redDiv')[0];
        redDiv.onclick = function(ev){
            var evObj = ev || window.event
            // 触发事件的元素(触发事件的元素不一定是绑定事件的元素)
            console.log(evObj.target);

            // 鼠标举例窗口顶部的坐标
            console.log(evObj.clientY);
            // 鼠标距离页面顶部的坐标
            console.log(evObj.pageY);
            // 鼠标距离target顶部的坐标
            console.log(evObj.offsetX);
        }
        // press 区分大小写 但不支持特殊按键
        document.onkeypress = function(ev){
            console.log("press" + ev.keyCode)
        }
        // down不区分大小写 支持特殊案件
        document.onkeydown = function(ev){
            // keyCode标识哪一个按键
            console.log(ev.keyCode);
            if (ev.keyCode == 66) {
                console.log("按了B");
            }
            // 判断组合键
            if (ev.keyCode == 66 && ev.metaKey) {
                console.log("按了command + B");
            }
        }
    </script>

动画

    <style>
            .redDiv{
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                left: 0px;
                top: 0px;
                /*动画名称*/
                animation-name: run;
                /*动画时长*/
                animation-duration: 1s;
                /*动画运动方式*/
                animation-timing-function: linear;
                /*动画延时*/
                /*animation-delay: 1s;*/
                /*动画次数 infinite 无限*/
                animation-iteration-count: 1;
                /*动画方向
                    reverse 反向
                    normal 正常
                    alternate 1/3/5... 正向 2/4/6...反向
                */
                animation-direction: normal;
                /*
                    forwards 动画结束之后停留在当前位置
                    backwards 在动画延时期间元素的位置
                                在动画起始的位置

                    both 上面两个都有
                */
                animation-fill-mode: both;
                /*animation: ;(复合写法)*/
                /*-webkit-animation:;*/
                /*-moz-animation*/
            }
            @keyframes run{
                0%{
                    left: 0px;
                }
                50%{
                    left: 50px;
                }
                100%{
                    left: 500px;
                }
            }
        </style>

    <body>
        <div class="redDiv"></div>
    </body>

数学对象

    MATH
    MATH.PI 代表 π

    // 生成 0 - 1 的随机数
    Math.random();

    // abs 返回绝对值
    Math.abs(-3)

数组对象

    <script type="text/javascript">
        // 创建数组
        var arr = [1, 2, 3];
        var arr2 = new Array();// 空数组
        var arr3 = new Array(5);// 长度为5
        var arr4 = new Array("8");//["8"]
        var arr5 = new Array(4, 5);//[4, 5]
        console.log(arr, arr2, arr3, arr4, arr5);
        // 属性 length 数组长度
        console.log(arr5.length);
        // 方法
        // push/pop 对数组末尾添加/删除元素
        var newLength = arr5.push(6, 7, 8);
        arr5.pop();
        console.log(arr5 ,newLength);
        // unshift/shift 对数组首位添加/删除元素
        var newLength2 = arr5.unshift(1, 2, 3);
        console.log(arr5, newLength2);
        //数组反转
        var arr6 = [1, 2, 3, 4];
        arr6.reverse();
        console.log(arr6);

        //  把数组转为字符串
        var str = arr6.join("-");
        console.log(str);

        // 排序
        arr7 = [99, 45, 78, 22, 11, 1, 123];
        arr7.sort(function(a, b){
            return a - b;
        });
        console.log(arr7);

        // splice(index, length, item1, item2, ... ,itemN);
        // 用后面的item覆盖前面index和length组成的范围
        var arr8 = [11, 22, 33, 44];
        arr8.splice(1, 2, 123 , .0);
        console.log(arr8);
    </script>

日期对象

    <script type="text/javascript">
        // Date
        var date = new Date("2016-7-8");
        var date2 = new Date("2016-1-1");
        console.log(date);
        console.log(date2);
        // 两个日期相减得到的是时间差, 单位是毫秒
        var res = date - date2;
        console.log(res/1000/3600/24 + 1);

        // get 获取
        console.log(date.getFullYear());
        // set 设置
        date.setFullYear("2018");
        console.log(date);
    </script>

正则表达式

    <script type="text/javascript">

        // reg = /正则部分(定义的规则)/正则属性
        // g 全局匹配 i 是否区分大小写
        var reg = /test/gi
        var str = "hellotesthowareTESTyoutest";
        console.log(str.match(reg));

        // \d 代表数字
        var reg2 = /\d/g;
        var str2 = "dsafd57a3f7a6f57af56a";
        console.log(str2.match(reg2));

        // \w 单词字符 数字 字母 下划线
        var reg3 = /\w/g;
        var str3 = "kjlabfh343453;df]a_-a[]g!@#SAADFAFldGH-*/+0gf;d124gk;sdf'g";
        console.log(str3.match(reg3));

        // . 匹配任意字符(除去换行符 \n)
        var reg4 = /./g;
        var str4 = "\t\nas dkjf?@!$^$%^&*&*&(*_)++9823DFGQW0";
        console.log(str4.match(reg4));

        // \s 匹配空格字符
        var reg5 = /\s/g;
        console.log(str4.match(reg5));

        // 量词
        var reg6 = /\d{1,3}/g;
        var str6 = "ka122j65sddsad45!@#645DFG)_+678+({";
        console.log(str6.match(reg6)); 

        //方括号
        // 2 3 4 6 里面的任何一个
        var reg7 = /[2-46]{2}/g;
        var str7 = "687421876423219865231564879564231213657897";
        console.log(str7.match(reg7));
        // 除去123以外的字符
        var reg8 = /[^123]/g;
        var str8 = "1234567890";
        console.log(str8.match(reg8));

        // 小括号
        var reg9 = /3((4)|(2))/g;
        var str9 = "3254686541234987122135479812303324816132156423435765";
        console.log(str9.match(reg9));

        // 开头和结尾
        //开头
        var reg10 = /^34/g;
        var str10 = "342543466542035109665432123984732013013875616203033248184512335765"
        console.log(str10.match(reg10));
        // 结尾
        var reg11 = /34$/g;
        var str11 = "34254346654203510966543212398473201301387561620303324818451234"
        console.log(str11.match(reg11));

        // 11位 纯数字 1 开头
        // var reg12 = /^1\d{10}$/g;
        // 13 14 15 16 17 18
        // var reg12 = /^1\d[3-8]{9}$/g;
        // 133 139 137 131 130 147 152 155 150 158 161 173 177 178 180 189 182
        var reg12 = /^1(3[01379]|47|5[0258]|61|7[378]|8[029])\d{8}$/g;
        var str12 = "18267906670";
        console.log(str12.match(reg12));

    </script>

事件捕获和冒泡

    <style type="text/css">
            .box{
                width: 600px;
                height: 500px;
                background-color: gray;
                margin: 0 auto;
                padding-top: 100px;
            }
            .mid{
                width: 400px;
                height: 300px;
                background-color: blue;
                margin: 0 auto;
                padding-top: 100px;
            }
            .item{
                width: 200px;
                height: 200px;
                background-color: green;
                margin: 0 auto;
            }
        </style>
        <body>
        <div class="box">
            <div class="mid">
                <div class="item"></div>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        var box = document.getElementsByClassName('box')[0];
        var mid = document.getElementsByClassName('mid')[0];
        var item = document.getElementsByClassName('item')[0];

        // 事件冒泡
        // false 代表冒泡
        // true 代表捕获
        box.addEventListener("click", function(){
            console.log("明爷")
        },true);
        mid.addEventListener("click", function(){
            console.log("明爸")
        },true);
        item.addEventListener("click", function(ev){
            // // 取消冒泡 不让事件继续冒泡
            // ev.cancelBubble = true;
            // //取消冒泡的第二种方法
            // ev.stopPropagation();
            // // 兼容写法
            // if (ev.stopPropagation {
            //  ev.stopPropagation();
            // }else{
            //  ev.cancelBubble = true;
            // }

            // 阻止默认事件

            // ev.preventDefault();
            // ev.returnValue = false;
            // return false;

            console.log("小明")
        },true);
    </script>

事件绑定

    <script type="text/javascript">
        var redDiv = document.getElementsByClassName('redDiv')[0];

        // 事件绑定 - 可以给一个元素绑定多个相同事件
        redDiv.addEventListener("click",function(){
            console.log(1);
        },false);

        redDiv.addEventListener("click",f2
        ,false);
        function f2() {
            console.log(2);
        }

        //移除事件绑定
        // redDiv.removeEventListener("click",f2,false);
    </script>

稳健de少年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS基础

JS &lt;title&gt;基础语法&lt;/title&gt; &lt;!-- 内部引入 --&gt; &lt;script type="text/javascript"&gt; // js 弱类型语言 // 变量 // js声明变量都用var关键字 // 五种基本数据类型 var ...
复制链接

扫一扫