JS — 05 运算符1

最新推荐文章于 2024-03-07 14:26:31 发布

小郭呀~

最新推荐文章于 2024-03-07 14:26:31 发布

阅读量173

点赞数

分类专栏： JS上课笔记

本文链接：https://blog.csdn.net/weixin_46448458/article/details/106725463

版权

JS上课笔记专栏收录该内容

20 篇文章 0 订阅

订阅专栏

运算符

this、操作非法属性、算术运算符、赋值运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title></title>
    <style>
        #wrap{
            user-select: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="wrap">this</div>
    <div id="nav" title="这是提示" xg="xiaoguo" xz="xiaozhang">非法标签属性的操作</div>
    <script>
        /********************************************************/
        //this => 指针 => 谁的事件函数this就指向谁
        let oWrap = document.getElementById("wrap");
        oWrap.onclick = function(){
            this.style.color = "red";
        };

        /********************************************************/
        /*
        *   非法标签属性的操作
        *       getAttribute( "属性" ); => 获取非法属性的值
        *       setAttribute( "属性","属性值" ); => 新建非法属性
        *       removeAttribute( "属性" ); => 删除非法属性
        * */
        //只有合法标签属性才提供了直接性的 .操作
        let nav = document.getElementById("nav");
        console.log( nav.title );//获取title属性
        console.log( nav.getAttribute("xg") );//获取非法属性的值
        nav.setAttribute( "xm","xiaoming" );//新增非法属性
        nav.removeAttribute( "xz" );//删除非法属性

        /********************************************************/
        /*
        *   算术运算符 => Number
        *       + - * / %
        *       + 两边任意一边出现字符串,为字符串拼接功能
        *       - * / % 所有数据类型全部转数字进行计算 (隐式类型转换) => 结果一定会得到Number
        * */
        console.log( 2 + 2 );//4 加法
        console.log( 0.1 + 0.2 );//0.30000000000000004 => 计算精度问题 => 先转换为整数再计算
        console.log( (0.1 * 10 + 0.2 * 10)/10 );//0.3
        console.log( 2 - 2 );//0 减法
        console.log( 2 * 2 );//4 乘法
        console.log( 2 / 2 );//1 除法
        console.log( 5 % 2 );//1 求模(余数) => 商不能出现小数的情况的余数
        console.log( 1 % 20 );//1
        console.log( 31.5 % 5 );//1.5 => 小数部分不参与模的计算

        /********************************************************/
        /*
         *   算术运算符 => String
         *       + 两边任意一边出现字符串,为字符串拼接功能
         * */
        let a = "小郭",
            b = "大陆";
        console.log( a + b );//"小郭大陆"
        console.log( "10" + 2 );//"102"
        console.log( 10 + "3" );//"103"
        console.log( 20 + 10 + "3" );//"303" => 20+10=30  30+"3"="303"
        console.log( "20" + 10 + 3 );//20103 => "20"+10="2010" "2010"+3="20103"
        console.log( "20" + (10 + 3) );//2013 => 有括号先算括号 10+3=13 "20"+13="2013"
        console.log( "a" + "b" );//"ab" => 字符串a+字符串b 和变量a,变量b无关
        console.log( a + "b") ;//小郭b

        /********************************************************/
        /*
         *   算术运算符 => String
         *       - 所有数据类型全部转数字进行计算 (隐式类型转换) => 结果一定会得到Number
         * */
        let c = "10",
            d = 5;
        console.log( c - d );
        console.log( "小郭" - "大陆" );//NaN => not a number 不是一个数字,但是是数字类型
        //NaN 一般在做了一些非法运算的时候,会出现NaN (加法不会出现NaN)

        /********************************************************/
        /*
         *   算术运算符 => String
         *       * / % 所有数据类型全部转数字进行计算 (隐式类型转换) => 结果一定会得到Number
         * */
        console.log( "1" * 2 );//2
        console.log( "1" * "3" );//3
        console.log( "1" / "2" );//0.2
        console.log( "1" % "2" );//1
        console.log( "小郭" % "2" );//NaN

        /********************************************************/
        /*
        *   赋值运算符
        *       = += -+ *= /=
        * */
        let e = 10;
        e += 5;
        console.log( e );//15 => a=a+5 10+5=15
        e += "5";
        console.log( e );//"155"
        e -= 2;
        console.log( e );//153
        e *= 0.1;
        console.log( e );//15.3
        e /= 15.3;
        console.log( e );//1
        e %= 20;
        console.log( e );//1
    </script>
</body>
</html>