js操作属性预解析判断语句

2018-09-16 本文已影响0人 zmm0404

1. 三元运算符
2. 运算符的优先级
3. 代码块
4. js操作属性
5. 换肤
6.js函数调用
7.js可控制换肤
8. 变量和函数预解析
- 8.1变量预解析
- 8.2 函数预解析
9. 匿名函数
10. 函数传参
11. return关键字
12.流程控制语句
13. 条件判断语句

1. 三元运算符

语法:
条件表达式?语句1:语句2;
执行的流程：
- 条件运算符在执行时，首先对条件表达式进行求值，
- 如果该值为true，则执行语句1，并返回执行结果
- 如果该值为false，则执行语句2，并返回执行结果
- 如果条件的表达式的求值结果是一个非布尔值，会将其转换为布尔值然后在运算

var a = 300 ;
var b = 143;
var c = 50;
<!-- 求 a b 中的最大值 -->
    a > b ? alert("a大"):alert("b大");
var max = a > b ? a:b;
<!-- 求 a b c 中的最大值 -->
<!-- 方法一:先求出两个数中的最大值,再和第三个数比较 -->
var max= a > b ? a:b;
    max = max > c ? c:max;
<!-- 方法二:一次求出三者中的最大值 -->
var max = a > b ?(a>c?a:c) :(b>c?b:c);
<!-- 这种方法不推荐使用,不方便阅读 -->

2. 运算符的优先级

同时声明多个变量并赋值
- var a = 1, b = 2, c = 3;
优先级
- 在JS的运算符优先级表中,越靠上优先级越高，优先级越高越优先计算,如果优先级一样，则从左往右计算
  - .、[]、 new
  - ()
  - ++、 --
  - !、~、+(单目)、-(单目)、typeof、void、delete
  - %、*、/
  - +(双目)、-(双目)
  - << 、 >>、 >>>
  - <、<=、>、>=
  - ==、!==、===
  - &
  - ^
  - |
  - &&
  - ||
  - ?:
  - =、+=、-=、*=、/=、%=、<<=、>>=、>>>=、&=、^=、|=
  - ,
- 可以使用 () 来改变优先级
- && > ||

<!-- 如果||的优先级高，或者两个一样高，则应该返回3 -->
<!-- 如果与&&的优先级高，则应该返回1 -->
var result = 1 || 2 && 3;
result = 1;

3. 代码块

描述
- 我们的程序是由一条一条语句构成的,语句是按照自上向下的顺序一条一条执行的
- 在JS中可以使用 {} 来为语句进行分组,
  - 同一个{}中的语句我们称为是一组语句，它们要么都执行，要么都不执行，一个{}中的语句我们也称为叫一个代码块,在代码块的后边就不用再编写了
  - JS中的代码块，只具有分组的的作用，没有其他的用途,代码块内容的内容，在外部是完全可见的
例子

{
    var a = 10; 
    alert("hello");
    console.log("你好");
    document.write("语句");
}       
console.log("a = "+a);

4. js操作属性

</head>
    <script type="text/javascript">
        /*
        DOM是为了操作文档（网页）的API，document是它的一个对象
        BOM是为了操作浏览器的API，window是它的一个对象
            常用BOM对象还有：alert、定时器等
        */
        //整个文档加载完之后执行一个匿名函数
        window.onload = function(){
            document.getElementById('div1').title = "我看到了！";

            //变量oA代表整个a标签
            var oA = document.getElementById('link1');
            oA.href = "http://www.tencent.com";
            oA.title = "跳转到腾讯网"

            alert(oA.id);
            alert(oA.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>

4.1 js操作style属性

style属性中的样式属性，带"-"号的需要去掉"-"号，写成小驼峰式
例如：font-size属性要写为fontSize

    <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>

4.2 js操作class属性

由于class是js中的保留关键字，所以设置class属性时，要写为className


    <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>

4.3 js中括号操作属性

    <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>

5. 换肤

.css和2.css里面是两个颜色的皮肤，

通过

var Link1 = document.getElementById('link1');
Link1.href = "css/2.css";
来引入2.css样式


<!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 Link1 = document.getElementById('link1');
        Link1.href = "css/2.css";
       }
    </script>
</head>
<body>
    <div class="box01"></div>
    <div class="box02"></div>
</body>
</html>

6.js函数调用

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

7.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>

8. 变量和函数预解析

8.1变量预解析

<script type="text/javascript">
    alert(a);
        或
    alert(c);
    var a = 123;
</script>

alert(a);只把变量a的声明提前，赋值不提前，所以弹出undefined，表示它的值未定义
alert(c);报错，c没有声明，这是真正的未定义

8.2 函数预解析

myalert();
function myalert(){
    alert('hello!');
}

提前调用函数，这样也可以调用成功，因为js有函数预解析的功能

9. 匿名函数

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');

        /*有名字的函数*/
        oDiv.onclick = myalert;

        function myalert(){
            alert('hello');
            }

        /*匿名函数*/
        oDiv.onclick = function(){
            alert('hello');
        }
    }
</script>

10. 函数传参

<script type="text/javascript">
window.onload = function(){
    var oDiv = document.getElementById('div1');

    changeStyle('color', 'gold');
    changeStyle('background', 'red');
    changeStyle('width', '300px');
    changeStyle('height', '300px');
    changeStyle('fontSize', '30px');

    function changeStyle(styl, val){
        oDiv.style[styl] = val;
    }
}
</script>

11. return关键字

<head>
    <script type="text/javascript">
        window.onload = function(){
            var oInput01 = document.getElementById('input01');
            var oInput02 = document.getElementById('input02');
            var oBtn = document.getElementById('btn');

            //写入值
            // oInput01.value = 10;
            // oInput02.value = 5;

            oBtn.onclick = function(){
                var val01 = oInput01.value;
                var val02 = oInput02.value;
                var rs = add(val01, val02);
                alert(rs);
            }

            function add(a, b){
                var c = parseInt(a) + parseInt(b);
                // alert('计算完成');//执行
                return c;//返回函数设定的值，同时结束函数的运行
                // return;//不返回值，仅结束函数的运行
                // alert('计算完成');//不执行
            }
        }
    </script>
</head>
<body>
    <input id="input01" type="text" name="">
    <input id="input02" type="text" name="">
    <input id="btn" type="button" name="" value="相加">
</body>
</html>

12.流程控制语句

JS中的程序是从上到下一行一行执行的
通过流程控制语句可以控制程序执行流程，
使程序可以根据一定的条件来选择执行
语句的分类：
1. 条件判断语句if/else
2. 条件分支语句switch/case
3. 循环语句for while do/while

13. 条件判断语句

条件判断语句：
- 使用条件判断语句可以在执行某个语句之前进行判断，
  - 如果条件成立才会执行语句，条件不成立则语句不执行。

if语句
- 语法一：
  
  if(条件表达式){
  语句...
  }
  - if语句在执行时，会先对条件表达式进行求值判断，
    - 如果条件表达式的值为true，则执行if后的语句，
    - 如果条件表达式的值为false，则不会执行if后的语句。
    - if语句只能控制紧随其后的那个语句,
    - 如果希望if语句可以控制多条语句，可以将这些语句统一放到代码块中
    - if语句后的代码块（即{}）不是必须的，但是在开发中尽量写上代码块，即使if后只有一条语句
- 语法二:
```
           if(条件表达式){
              语句...
          }else{
              语句...
          }
```
  - if...else...语句
    - 当该语句执行时，会先对if后的条件表达式进行求值判断，
      - 如果该值为true，则执行if后的语句
      - 如果该值为false，则执行else后的语句
- 语法三:
```
  if(条件表达式){
          语句...
      }else if(条件表达式){
          语句...
      }else if(条件表达式){
          语句...
      }else{
          语句...
      }
```
  - if...else if...else
    - 当该语句执行时，会从上到下依次对条件表达式进行求值判断
    - 如果值为true，则执行当前语句。
    - 如果值为false，则继续向下判断。
    - 如果所有的条件都不满足，则执行最后一个else后的语句
    - 该语句中，只会有一个代码块被执行，一旦代码块执行了，则直接结束语句

<head>
    <script type="text/javascript">
            window.onload = function(){
            var oBtn = document.getElementById('btn');
            var oDiv = document.getElementById('box');

            oBtn.onclick = function(){
                if(oDiv.style.display == 'none'){
                    oDiv.style.display = 'block';
                }else{
                    oDiv.style.display = 'none';
                }
            }// alert(oDiv.style.display);//弹出空白提示框，因为div没设置过style属性
            oBtn.onclick = function(){
                if(oDiv.style.display == 'block' || oDiv.style.display == ''){
                    oDiv.style.display = 'none';
                }else{
                    oDiv.style.display = 'block';
                }
            }
        }
    </script>
</head>
<body>
    <input type="button" value="切换" id="btn">
    <br>
    <div class="box" id="box"></div>
</body>
</html>

js操作属性预解析判断语句

1. 三元运算符

2. 运算符的优先级

3. 代码块

4. js操作属性

4.1 js操作style属性

4.2 js操作class属性

4.3 js中括号操作属性

5. 换肤

6.js函数调用

7.js可控制换肤

8. 变量和函数预解析

8.1变量预解析

8.2 函数预解析

9. 匿名函数

10. 函数传参

11. return关键字

12.流程控制语句

13. 条件判断语句

猜你喜欢

热点阅读

js操作属性 预解析 判断语句

1. 三元运算符

2. 运算符的优先级

3. 代码块

4. js操作属性

4.1 js操作style属性

4.2 js操作class属性

4.3 js中括号操作属性

5. 换肤

6.js函数调用

7.js可控制换肤

8. 变量和函数预解析

8.1变量预解析

8.2 函数预解析

9. 匿名函数

10. 函数传参

11. return关键字

12.流程控制语句

13. 条件判断语句

猜你喜欢

热点阅读

js操作属性预解析判断语句