前端(Js运算 Js操作)

作者: 埃菲尔上的铁塔梦i | 来源:发表于2018-08-21 17:57 被阅读0次

前端(Js运算 Js操作)
JS操作属性、函数
前端笔记10
运算符及js操作属性
前端(运算符)
js操作属性预解析判断语句
2018-12-01
HTML-12.day
Web开发快速入门基础篇（4）前端基础之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>

前端(Js运算 Js操作)
1、与或运算 2、赋值运算符 3、关系运算符 4、Unicode编码 Unicode 10.0 Character...
JS操作属性、函数
条件运算符运算符的优先级代码块 JS操作属性 JS换肤 JS操作style属性 JS操作
前端笔记10
条件运算符运算符优先级代码块 js操作属性换肤 js操作style属性 js操作class属性 js中括号操...
运算符及js操作属性
关系运算符相等运算符条件运算符运算符的优先级代码块 js操作属性 js操作style属性 js操作clas...
前端(运算符)
与或运算 Unicode编码相等运算符条件运算符 js操作属性 js函数
js操作属性预解析判断语句
1. 三元运算符 2. 运算符的优先级 3. 代码块 4. js操作属性4.1 js操作style属性4.2 js...
2018-12-01
赋值运算符关系运算符 Unicode编码相等运算符条件运算符运算符的优先级代码块 js操作属性 js换肤...
HTML-12.day
1.条件运算符 2.运算符的优先级 4.JS操作属性 7.JS中括号操作style属性 17.数组
Web开发快速入门基础篇（4）前端基础之JS
4.前端基础之JS 简述掌握了解JavaScript(js)的基本使用，以及jquery常用操作，能够处理前端交...
比较运算符
前端学习分享（js中比较运算符的使用）本文旨在搞清楚比较运算符的用法和场景，在js中比较运算符有以下8个 == ...