前端(Js运算 Js操作)

1、与或运算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>与或运算</title>
    <script type="text/javascript">
        
        var result = 1 && 2;//true && true -->2
        result = 2 && 1;//1
        result = 0 && 2;//0
        result = NaN && 0;//NaN
        result = 0 && NaN;//0

        result = 2 || 1;//2
        result = 2 || NaN;//2
        result = 2 || 0;//2

        result = NaN || 1;//1
        result = NaN || 0;//1

        result = "" || "hello";//hello
        result = -1 || "你好"; //-1


        console.log("result = "+result);
    </script>
</head>
<body>
                                                                                
</body>
</html>

2、赋值运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>赋值运算符</title>
    <script type="text/javascript">
        var a = 10;
        // a = a + 5;//15
        // a += 5;//15
        // a -= 5;//5
        // a *= 5;//50

        // a %= 3;//1
        
        console.log("a = "+a);
    </script>
</head>
<body>
    
</body>
</html>

3、关系运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关系运算符</title>
    <script type="text/javascript">
        /*
            > >=
        */
        var result = 5 > 10;//false
        result = 5 > 4;//true

        result = 5 >= 5;//true
        // console.log("result = "+result);
        // console.log(1 >= true);//true
        // console.log(1 > true);//false
        // console.log(1 > "0");//true

        // console.log(10 > "hello");//false
        // console.log(10 >= "hello");//false
        // console.log(10 < "hello");//false
        // console.log(10 <= "hello");//false

        // console.log("bba" < "bbb");
        console.log("我" < "你");

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

4、Unicode编码

Unicode 10.0 Character Code Charts
http://www.unicode.org/charts/

Unicode编码在线转换
http://tool.oschina.net/encode

1500+公用图标字体文件
http://www.keyin.cn/font/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Unicode编码</title>
    <script type="text/javascript">
        console.log("\u2F81");
    </script>
</head>
<body>
    <h1 style="font-size:200px">&#9924;</h1>
</body>
</html>

5、相等运算符(全等)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相等运算符</title>
    <script type="text/javascript">
        //console.log(1 == 1);//true
        var a = 10;
        //console.log(a == 4);//false

        // console.log("1" == 1);//true

        // console.log(true == "1");//true
        // console.log(null == 0);//false
        var b = NaN;
        // console.log(isNaN(b));//true
        // console.log(10 != 5);//true
        // console.log("abcd" != "abcd");//false

        // console.log("123" == 123);//true

        // 全等

        // console.log("123" === 123);//false

        // console.log(null == undefined);//true
        // console.log(null === undefined);//false
        // console.log(123 === 123);//true

        console.log(1 != "1");//false
        
        // 不全等
        console.log(1 !== "1");//true

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

6、条件运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件运算符</title>
    <script type="text/javascript">
        /*
            三（目）元运算符
            语法：
                条件表达式 ？ 语句一 ：语句二;
        */
        // true ? alert("语句一") : alert("语句二"); 
        // false ? alert("语句一") : alert("语句二"); 
        var a = 30;
        var b = 20;
        // a > b ? alert("a大") : alert("b大");
        //获取a和b中的最大值
        var max = a > b ? a : b;
        console.log("max = " + max);
    </script>
</head>
<body>
    
</body>
</html>

7、运算符的优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>运算符的优先级</title>
    <script type="text/javascript">
        /*
            ,
        */
        // var a,b,c;
        var a=1,b=2,c=3;
        // alert(b);

        var result = 1+2 * 3;//7
        result = 1 || 2 && 3;//1 与的优先级高
        console.log("result = "+result);
    </script>
</head>
<body>
    
</body>
</html>

image.png

8、代码块（包装）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>代码块</title>
    <script type="text/javascript">
        {
            var a = 10;
            alert("hello");
            console.log("你好！");
            document.write("语句");   
        }
        console.log("a = " + a);
    </script>
</head>
<body>
    
</body>
</html>

9、操作属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Js操作属性</title>
    <script type="text/javascript">
        //整个文档加载完之后会执行一个匿名函数
        window.onload = function(){
            document.getElementById("div1").title = "我明白！";

            var link = document.getElementById("link1");   //简写
            link.href = "http://www.baidu.com";
            link.title = "去百度网";

            alert(link.id);
            alert(link.title);
        }
        
    </script>
</head>
<body>
    <div id="div1" class="div1" title="这是div元素你看到了吗？">这是div元素</div>

    <a href="#" id="link1">百度网</a>

    <!-- <script type="text/javascript">
        document.getElementById("div1").title = "我明白！";
    </script> -->
</body>
</html>

10、Js换肤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js换肤</title>
    <link rel="stylesheet" type="text/css" href="css/1.css" id="link1">

    <script type="text/javascript">
        window.onload = function(){
            var oLink = document.getElementById('link1');
            oLink.href = "css/2.css";

            alert(oLink.id);
        }
    </script>
</head>
<body>
    <div class="box01"></div>
    <div class="box02"></div>
</body>
</html>

11、Js操作style属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js操作style属性</title>
    <script type="text/javascript">
        window.onload = function() {
            var oDiv = document.getElementById('div1');
            /*style属性中的样式属性，没有"-"号的，写法相同*/
            oDiv.style.color = 'red';
            oDiv.style.background = 'gold';
            /*
            style属性中的样式属性，带"-"号的需要去掉"-"号，写成小驼峰式
                例如：font-size属性要写为fontSize
            */
            oDiv.style.fontSize = '30px';
        }
    </script>
</head>
<body>
    <div id="div1">这是一个div元素</div>
</body>
</html>

12、Js操作class属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js操作class</title>
    <style type="text/css">
        .box01{
            width: 200px;
            height: 200px;
            background-color: gold;
        }
        .box02{
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
    <script type="text/javascript">
        window.onload = function() {
            var oDiv = document.getElementById('div1');
            // 由于class是js中的保留关键字，所以设置class属性时，要写为className
            oDiv.className = 'box02';
        }
    </script>
</head>
<body>
    <div class="box01" id="div1"></div>
</body>
</html>

13、Js中括号的操作属性

box2.innerHTML 一部分局部

document.write("adas"); 整个页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js中括号操作属性</title>
    <style type="text/css">
        .box01{
            width: 200px;
            height: 200px;
            background-color: gold;
        }
        .box02{
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var oDiv = document.getElementById('div1');
            //oDiv.style.color = 'red';//red必须加引号，否则会认为它是一个变量，引起来会认为它是一个值，赋值给=号左边
            var attr = 'color';
            // oDiv.style[attr] = 'red';
            /* 通过[]操作属性可以写变量 */
            oDiv['style'][attr] = 'red';

            /* 通过innerHTML可以读写元素包括的内容 */
            alert(oDiv.innerHTML);//读取标签里面包裹的元素，即“这是一个div元素”

            var oDiv2 = document.getElementById('div2');
            // oDiv2.innerHTML = '这是第二个div元素';//向div标签中插入内容
            oDiv2.innerHTML = "<a href='http://www.baidu.com'>百度网</a>";//向div标签中插入超链接标签

            /*
            document.write和innerHTML的区别
            document.write只能重绘整个页面
            innerHTML可以重绘页面的一部分
            */
        }
    </script>
</head>
<body>
    <div id="div1">这是一个div元素</div>
    <div id="div2"></div>
</body>
</html>

14、Js函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js函数</title>
    <script type="text/javascript">
        function aa(){
            alert('hello!');
        }

        /*
        //直接调用
        aa();
        */
    </script>
</head>
<body>
    <input type="button" name="" value="弹框" onclick="aa()" />
</body>
</html>

15、Js可控制换肤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js换肤</title>
    <link rel="stylesheet" type="text/css" href="css/1.css" id="link1">

    <script type="text/javascript">
        window.onload = function(){
            /* 提取行间事件 */
            var oBtn01 = document.getElementById('btn01');
            var oBtn02 = document.getElementById('btn02');

            oBtn01.onclick = skin01;//这里不能写skin01()，这样写就马上执行了
            oBtn02.onclick = skin02;
        }
        function skin01(){
            var oLink = document.getElementById('link1');
            oLink.href = "css/1.css";
        }
        function skin02(){
            var oLink = document.getElementById('link1');
            oLink.href = "css/2.css";
        }
    </script>
</head>
<body>
    <!-- 
    行间调用函数
    <input type="button" name="" value="皮肤01" onclick="skin01()" />
    <input type="button" name="" value="皮肤02" onclick="skin02()" /> -->
    <input type="button" name="" value="皮肤01" id="btn01" />
    <input type="button" name="" value="皮肤02" id="btn02" />
    <div class="box01"></div>
    <div class="box02"></div>
</body>
</html>

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 199,393评论 5赞 467
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 83,790评论 2赞 376
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 146,391评论 0赞 330
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 53,703评论 1赞 270
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 62,613评论 5赞 359
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,003评论 1赞 275
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,507评论 3赞 390
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,158评论 0赞 254
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,300评论 1赞 294
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,256评论 2赞 317
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,274评论 1赞 328
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,984评论 3赞 316
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,569评论 3赞 303
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,662评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,899评论 1赞 255
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,268评论 2赞 345
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 41,840评论 2赞 339

前端(Js运算 Js操作)

1、与或运算

2、赋值运算符

3、关系运算符

4、Unicode编码

5、相等运算符(全等)

6、条件运算符

7、运算符的优先级

8、代码块（包装）

9、操作属性

10、Js换肤

11、Js操作style属性

12、Js操作class属性

13、Js中括号的操作属性

14、Js函数

15、Js可控制换肤

推荐阅读更多精彩内容