zoukankan      html  css  js  c++  java

  • JavaScript基本知识----操作符，流程控制，循环，字符串方法，数组方式，补充方法

    操作符

    算术运算

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <script>
        /*
         算数运算符（基础数字运算）
            + - * / %(求余数）
         当不是数字之间的运算的时候
            +号两边一旦有字符串（引号引起来的一坨），那么+号就不再是数学运算了,而是拼接，最终结果是字符串  *****
            -/*%  尽量将字符串转换成数字（隐式类型转换）
            NaN : Not a Number   number
         */
        var a = "5";
        var b = "2";
        console.log(a-b);//3
    </script>
</body>
</html>

    赋值运算符

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <script>
        /*
         赋值运算符
            += -= *= /= %=
            ++ -- 两个都存在隐式类型转换，会全部转换为数字
            ++x x++
         */
        var oBox = document.getElementById("box");
        oBox.innerHTML += "999";

        //var x = 4;
        //var y = ++x;  // x = x + 1; y = x;
        //console.log(x);//5
        //console.log(y);//5


        var x = 6;
        var y = x++;// y = x ; x = x + 1;
        console.log(x);
        console.log(y);
    </script>
</body>
</html>

    比较运算符

    逻辑运算符

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <script>
        /*
            针对布尔值  true  false
            &&  与 两边都为真，结果才为真，其他为假
            ||  或 两边都为假，结果才为假，其他都是真
            !   非 取反，真变假，假变真

            当逻辑运算符，两边不一定是布尔值的时候
            && 遇到假就停，但是不会进行类型转换
            || 遇到真就停，但是不会进行类型转换
            ！ 隐式类型转换，将后面的数据先转换为布尔值再取反
         */

        var a = true && false && true;
        // alert(a);

        var b = false || false || true;
        // alert(b);

        var c = 1 && true && 6 && 1;
        // alert(c);

        var d = false || false || 0;
        // alert(d);


        var q = !"5";
        alert(q);
    </script>
</body>
</html>

    流程控制

    if else流程控制

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <script>
        /*
        if ==> 布尔值
        判断符
            > < >= <= == != !== ===
            ==   只判断值是否一样 "5"==5
            ===  不仅仅判断值，还判断类型是否一样 "5" === 5
        当if的条件 运算完后不是布尔值的时候 会被强制性的转换为布尔值
        哪些值，在转换为布尔值的时候为false
            0         number
            false     boolean
            ""        string
            null      object/null
            undefined undefined
            NaN       number

            NaN :Not a Number   number类型
                 一般在非法运算的时候才会 出现NaN
             isNaN(参数) 非常讨厌数字
                首先尽量把参数转换成数字，然后
                    当参数是 数字，返回 false
                    当参数不是数字，返回 true

            在if里面，能用布尔值做条件判断的时候，不要用其他的来代替，因为强制数据类型的转换需要耗费时间
        在两个值比较的时候，能用三等判断的时候，就用三等判断
         */

        // alert(5 === "5");

        /*if(" "){
            alert("true");//条件为真的时候执行
        }else{
            alert("false");//条件为假的时候执行
        }*/


        //当真语句只有一行的时候，可以去掉大括号，还可以直接写在条件的后面
        /*if(9>8){
            alert("true");
        }

        if(6>4)alert("zhen");*/


         //真语句一行，假语句一行  三目运算
        //9>20?alert("zhen"):alert("jia");//条件?真语句:假语句;

        //当三目的真假语句都是给同一个变量赋值的时候，可以更近一步简写

        // a=9>20?9:20;
        // alert(a);

        // var a;
        // if(9>20){
        //     a = 9;
        // }else{
        //     a = 20;
        // }
        // alert(a);

        var x = 10;
        if(x > 20){
            alert("x>20");
        }else if(x > 15){
            alert("x>15")
        }else if(x>10){
            alert("x>10")
        }else{

        }
    </script>
</body>
</html>

     

    switch case default流程控制

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <script>
        /*var name = "wjh";
        if(name === "xiaopo"){
            alert(name + "真阔爱");
        }else if( name === "wjh"){
            alert(name + "好帅");
        }else{
            alert(name+"你是谁");
        }*/


        //全等判断  break 来阻止代码自动地向下一个 case 运行
        var name = "wmk";
        switch(name){
            case "xiaopo":
                alert(name + "真阔爱");
                break;
            case "wmk":
                alert(name + "好帅");
                break;
            default:
                alert(name+"你是谁");
                break;
        }
    </script>
</body>
</html>

     

    循环

    for

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <script>
        // for(var i = 0; i < 10 ; i ++){
        //     console.log(i);
        // }

        // for(var i = 0 ; i < 5 ; i ++ ){
        //     for(var j = 0 ; j < 3 ; j ++){
        //         console.log(i+ ";" + j);
        //     }
        // }

        for(var i = 0 ; i < 10 ; i ++ ){
            if(i === 5){
                //break;// 0 1 2 3 4中断循环，终止循环，结束循环，未执行的代码不执行
                continue;//跳出本次循环 012346789
            }
            console.log(i);
        }

    </script>
</body>
</html>
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;
             50px;
            height: 50px;
            background: yellowgreen;
            border-radius: 50%;
            margin: 25px;
            line-height: 50px;
            text-align: center;
        }
    </style>
</head>
<body>
    <ul id="box">
        <li>00</li>
        <li>11</li>
        <li>22</li>
        <li>33</li>
        <li>44</li>
    </ul>
    <script>
        var aLi = document.getElementsByTagName("li");
        // console.log(aLi.length);

        /*aLi[0].onclick = function () {
            alert(0);
        };
        aLi[1].onclick = function () {
            alert(1);
        };
        aLi[2].onclick = function () {
            alert(2);
        };
        aLi[3].onclick = function () {
            alert(3);
        };*/


        for(var i = 0 , len = aLi.length ; i < len ; i++ ){

            aLi[i].index = i;//index 自定义变量 a b c d
            //aLi[0].index = 0;
            //aLi[1].index = 1;
            //aLi[2].index = 2;
            //aLi[3].index = 3;

            aLi[i].onclick = function () {
                alert(this.index);
            }

            /*aLi[i].onclick = function () {
                alert(i);//是循环结束的i
            }*/

            /*aLi[0].onclick = function () {
                alert(i);
            }
            aLi[1].onclick = function () {
                alert(i);
            }
            aLi[2].onclick = function () {
                alert(i);
            }
            aLi[3].onclick = function () {
                alert(i);
            }
             */
        }


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

     补充：let

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;
             50px;
            height: 50px;
            background: yellowgreen;
            border-radius: 50%;
            margin: 25px;
            line-height: 50px;
            text-align: center;
        }
    </style>
</head>
<body>
    <ul id="box">
        <li>00</li>
        <li>11</li>
        <li>22</li>
        <li>33</li>
        <li>44</li>
    </ul>

    <script>
        var aLi = document.getElementsByTagName("li");

        for(let i = 0 ,len = aLi.length ; i < len ; i ++ ){
            aLi[i].onclick = function () {
                alert(i);
            }
        }


        // var a = 5;
        // var a = 6;
        // alert(a);


        //let 不能重复声明
        //块级作用域
        // let a = 5;
        // let a = 6;
        // alert(a);

        if(true){
            let a = 12;
        }

        alert(a);
    </script>

</body>
</html>

     while     do...while

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <script>
        /*var i = 0;
        for(; i < 4 ; ){
            console.log(i);
            i++;
        }*/

        var i = 100;
        // while(i<10){
        //     console.log(i);
        //     i ++;
        // }

        do{//至少执行一次
            console.log(i);
        }while(i<10);
    </script>
</body>
</html>

    字符串方法

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <script>
        /*
       string 字符串
           索引、下标、偏移量——从0开始
           str[index];——通过索引取字符串
           str.length;——获取长度  空格也算
           value.toString();——转换字符串
           str.substring();——截取字符串 会比较参数值的大小，小的参数在前面,负数变为0
           str.slice()——切片,不会交换位置，负数从右到左数
           str.split()——字符串切割，返回数组  ******
           str.indexOf——查找字符串，成功返回索引，反之返回-1 ******
           str.toUpperCase()——全部转换大写
           str.toLowerCase()——全部到小写
        */

        var str = "wo shi shui";
        // alert(str.length);
        // alert(str[4]);//可读性
        str[0] = "W";//不可写
        // console.log(str);

        var str1 = "wo zai na wo shi shui";
        // console.log(str1.substring(2,5));//[2,5)
        // console.log(str1.substring(5,1));
        // console.log(str1.substring(-5,5));
        // console.log(str1.slice(1,5));
        // console.log(str1.slice(5,2));
        // console.log(str1.slice(-4,-2));
        console.log(str1.split("i"));

        alert(str1.indexOf("a"));//4
        alert(str1.indexOf("a",5));//8
        alert(str1.indexOf("q"));

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

    数组方法

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <script>
        /*
           数组 主要存放数据的
              arr.length
                  查看数组的个数
              arr[]
                  可以读可写
              arr.push
                   在后面添加 能同时添加多个值
              arr.unshift()
                  在前面添加  能同时添加多个值
              arr.pop()
                  删除数组的最后一个
              arr.shift()
                  删除数组的第一个
              arr.splice()  ******
                    (3)  数组的长度
                  (0, 1) 从第0位开始删除第一个 返回删除的那个
                  (2, 3, 'a') 从第二位开始后面三位全部替换成 a
                  (2, 0, 'a') 第二位开始前面插入 a
              arr.sort()
                  顺序来排序
              arr.reverse()
                  倒序排序
              arr.join() *****
                  arr.join('a')  以`a`为界限拼接字符串
       */

        var arr = ["wmk","wf","zx"];
        console.log(arr.length);
        // alert(arr[2]);//可读
        arr[0] = "sqx";//可写
        console.log(arr);
        arr.push("bb","wmk");
        console.log(arr);
        arr.unshift("wjh","xiaopo");
        console.log(arr);
        arr.pop();
        console.log(arr);
        arr.shift();
        console.log(arr);
        //arr.splice(3);//数组的长度为3
        //console.log(arr);
        // arr.splice(1,2);//从小标1开始  删除两位
        // console.log(arr);
        arr.splice(1,0,"qq","ww");
        console.log(arr);

        // var arr1 = new Array();
        // arr1[0] = "xiaopo1";
        // arr1[1] = "xiaopo2";
        // arr1[2] = "xiaopo3";
        // console.log(arr1);

        var arr2 = ["我","是","小泼"];
        console.log(arr2.join("+"));

        var arr3 = [-2,-8,-5];
        // console.log(arr3.sort());
        arr3.sort(function (a,b) {
            //return a-b;//从小到大
            //return b-a;//从大到小
            //return 1;//倒序
            return 0;
        });
        console.log(arr3);
    </script>
</body>
</html>

     

     补充：

     
  • 相关阅读:
    sass、less和stylus的安装使用和入门实践
    CSS LINT,优化你的CSS样式表
    css lint是有害的
    CSS学习资源
    css border制作小三角形状及应用（兼容IE6）
    css专题学习-浏览器兼容性问题目录
    每位设计师都应该拥有的50个CSS代码片段
    前端基础一:Doctype? 行内元素和块级元素
    inline-block代替浮动布局float:left列表布局最佳方案
    css超出一行添加省略号属性:text-overflow和white-space
  • 原文地址：https://www.cnblogs.com/pywjh/p/9592475.html
Copyright © 2011-2022 走看看