JS操作属性定时器和函数

JS操作style属性

var oDiv = document.getElementById('div1');
            /*style属性中的样式属性，没有"-"号的，写法相同*/
            oDiv.style.color = 'red';
            oDiv.style.background = 'gold';
            /*
            style属性中的样式属性，带"-"号的需要去掉"-"号，写成小驼峰式
                例如：font-size属性要写为fontSize
            */
            oDiv.style.fontSize = '30px';

JS操作class

var oDiv = document.getElementById('div1');
            // 由于class是js中的保留关键字，所以设置class属性时，要写为className
            oDiv.className = 'box02';

JS操作括号属性

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可以重绘页面的一部分
            */

一、定时器分类

setTimeout 只执行一次的定时器
clearTimeout 关闭只执行一次的定时器
setInterval 反复执行的定时器
clearInerval 关闭反复执行的定时器

二、定时器基本用法

//单次定时器
 var timer = setTimeout(function(){},3000);
 clearTimeout(timer);
 
 //反复循环
var time2 = setInterval(function(){},2000)
clearInterval(timer2)

三、变量的作用域+

全局变量：在函数外部定义的变量函数内部和外部都可以访问
局部变量：在函数内部定义的变量只有内部都可以访问

四、函数

function aa(){
     alert("hello")
}
aa();//直接调用

五、匿名函数

没有名字的函数

functionaa(){
         alert("hello")
    }
    aa();//直接调用
//匿名函数：
function(){
alert("hello")
}

六、函数传参

function aa(x){
    alert(x)
};
aa("哈哈哈");

七、return 返回值

function add(a, b){
            var c = parseInt(a) + parseInt(b);
            // alert('计算完成');//执行
            return c;//返回函数设定的值，同时结束函数的运行
            // return;//不返回值，仅结束函数的运行
            // alert('计算完成');//不执行
        }

八、流程控制和语句

流程控制：
- JS的程序是从上倒下一行一行执行的
- 通过流程控制语句可以控制程序执行流程，使程序可以根据一定的条件来选择执行
语句分类
- 1.条件判断语句
- 2.条件分支语句
- 3.循环语句

九、条件判断语句

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

语法：
- 1.if(条件判断){·····} 满足条件就执行{}里的代码
- 2.if(条件判断){····}else{·····} 果该值为true，则执行if后的语句如果该值为false，则执行else后的语句
多重判断语法

if(){
·····
  }else if(){
  ····
}else if(){
····
}

条件分支语句

switch(条件表达式){    
    case 表达式:       
        语句...       
        break;
    default:
        语句···
        break；

在执行时会依次将case后的表达式的值和switch后的条件表达式的值进行全等比较，
如果比较结果为true，则从当前case处开始执行代码。
当前case后的所有的代码都会执行，我们可以在case的后边跟着一个break关键字，
这样可以确保只会执行当前case后的语句，而不会执行其他的case
如果比较结果为false，则继续向下比较
如果所有的比较结果都为false，则只执行default后的语句

十、循环语句

通过循环语句可以反复的执行一段代码多次

while 循环
- 语法一：
  - while（条件表达式）{······} 如果值为true，则执行循环体，循环体执行完毕以后，继续对表达式进行判断如果为true，则继续执行循环体，以此类推。如果值为false，则终止循环。
- 语法二
  - do{····}while{·······}实际上这两个语句功能类似，不同的是while是先判断后执行，而do...while会先执行后判断，do...while可以保证循环体至少执行一次，而while不能
for 循环
- for(①初始化表达式;②条件表达式;④更新表达式){····}①执行初始化表达式，初始化变量（初始化表达式只会执行一次） ②执行条件表达式，判断是否执行循环。如果为true，则执行循环③ 如果为false，终止循环 ④执行更新表达式，更新表达式执行完毕继续重复②
死循环
- while （True）：
- for(;;)

十一、数组

var arre = []; //数组
alert(arre.length);//数组的长度

var arrs = [[12,23,43],[z,f,g,h,],[a,1,3,f]];
alert(arrs.[2][2]);//弹出g

十二、数组的常用方法

链接数组元素 join（）
在数组最后追加元素 push()
删除末尾元素 pop()
在前面加元素unshift()
删除索引为0 的值 shift（）
反转 reverse（）
查找第一次出现的值得索引 indexOf（）
从第m索引开始删除n个元素再插入k splice (m,n,k)

//数组去重
var aRr = [1,3,4,1,6,9,1,2,5,3,1,6,5,4,4];
        var aRr2 = [];
        for(var i=0; i<aRr.length; i++){
            //判断元素第一次出现的位置，恰好是当前索引时，就将元素放入新数组
            if(aRr.indexOf(aRr[i]) == i){
                aRr2.push(aRr[i]);
            }
        }

十三、字符串方法

字符串转成数组 split（）
获取指定索引的字符 charAt()
查看第一次出现的位置 indexOf()
截取子串 substrings(包括开始位置，不包括结束位置)
转换大写字母 toUpperCase()
转换小写字母 toLowerCase()

//字符串反转
/1、split字符串转成数组
        //2、reverse数组反转
        //3、join数组转成字符串
        var sTr2 = sTr.split('').reverse().join('');
        alert(sTr2);//12efdsa88897fdsa321

JS操作属性 定时器 和 函数