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>

js操作style属性

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

js操作class

<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';
        }

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>

js函数

<script type="text/javascript">
        function aa(){
            alert('hello!');
        }

        /*
        //直接调用
        aa();
        */
    </script>

变量和函数预解析

<script type="text/javascript">
        /*变量预解析*/
        /*alert(a);//只把变量a的声明提前，赋值不提前，所以弹出undefined，表示它的值未定义
        // alert(c);//报错，c没有声明，这是真正的未定义
        var a = 123;


        /*函数预解析*/
        myalert();//弹出hello!

        function myalert(){
            alert('hello!');
        }
    </script>

匿名函数

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

函数传参

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

函数return关键字

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

流程控制语句

<script type="text/javascript">
        /*
        流程控制语句
            - JS中的程序是从上到下一行一行执行的
            - 通过流程控制语句可以控制程序执行流程，
                使程序可以根据一定的条件来选择执行
        - 语句的分类：
                1.条件判断语句
                2.条件分支语句
                3.循环语句
        */
        console.log('你好');
        alert('hello');
    </script>

条件判断语句

<script type="text/javascript">
        /*
        条件判断语句：
            - 使用条件判断语句可以在执行某个语句之前进行判断，
                如果条件成立才会执行语句，条件不成立则语句不执行。
            - if语句
                - 语法一：
                    if(条件表达式){
                        语句...
                    }
                    
                if语句在执行时，会先对条件表达式进行求值判断，
                如果条件表达式的值为true，则执行if后的语句，
                如果条件表达式的值为false，则不会执行if后的语句。
                    if语句只能控制紧随其后的那个语句,
                        如果希望if语句可以控制多条语句，
                        可以将这些语句统一放到代码块中
                    if语句后的代码块（即{}）不是必须的，但是在开发中尽量写上代码块，即使if后只有一条语句

                - 语法二:
                    if(条件表达式){
                        语句...
                    }else{
                        语句...
                    }
            
                if...else...语句
                    当该语句执行时，会先对if后的条件表达式进行求值判断，
                        如果该值为true，则执行if后的语句
                        如果该值为false，则执行else后的语句
        */
        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>