4.12 JS03

一.JS引入的三种方式

1. 行内时:
   <div style="属性1,属性2" 事件=""></div>
2. 内嵌式:
   可写在head里和body里,但最好写在body结束标签前,紧挨body结束标签,
   如果写在head里需要写上
   window.onload = function(){ }:
   当页面加载完成时再执行该函数,一个界面只能写一个,写多个会覆盖
3. 外联式:
   <script src="路径"></script>
   要写内嵌式的前面

获取文档中所有的指定标签时,返回值是一个伪数组
var 参数 = document.getElementsByTagName("标签名");但这样会获取整个页面的指定标签所以一般要先获取指定id名再获取标签名
var 参数 = document.getElementsById("id名").getElementsByTagName("标签名");

排他思想

在设置事件或者效果时,先遍历清空掉所有的事件和效果,再单独设置选中的事件和效果

var list = document.getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
        list[i].onmouseover = function () {
            for (var i = 0; i < list.length; i++) {
                list[i].className = "";
            }
            this.className = "curr";
        }
}

首先遍历所有的li标签,当鼠标经过时触发事件:将所有的li标签的类名清空,再将鼠标选中的li标签的类名设置为选中状态.
因为i变量在最后一次for循环中会加一超出数组的长度(数组越界),所以不能写为list[i].className = "curr";,必须使用this.this表示事件的触发者
自定义属性:任何标签都可以添加属性

二.九宫格算法

九宫格算法.jpg

tab标签的切换

标签的属性可以自定义,在需要时设置
.index:索引

三.数组常用对象方法

arrayObject.length:设置或返回数组中元素的数目
arrayObject.concat(arrayX,arrayX,......,arrayX):连接两个或更多的数组并返回结果,必须写一个arrayX,可以是值也可以是数组
arrayObject.pop():删除并返回数组的最后一个元素
arrayObject.push(newelement1,newelement2,....,newelementX):向数组的末尾添加一个或更多元素并返回新的长度,中间用逗号隔开
arrayObject.reverse():颠倒数组中元素的顺序
arrayObject.shift( ):删除并返回数组中的第一个元素
arrayObject.unshift(newelement1,newelement2,....,newelementX):向数组的开头添加一个或更多元素,并返回新的长度,中间用逗号隔开
arrayObject.join(separator):把数组的所有元素放入一个字符串.元素通过指定的分隔符进行分隔,默认为逗号
arrayObject.slice(start,end):从某个已有的数组返回选定的元素,从start开始截取(包括这个角标,必须值),到end为止(不包括这个角标,end的值一定要比start大,end可以不填,不填写的话会显示以后的所有元素),原数组不会改变,返回值是一个新的数组
arrayObject.splice(index,howmany,item1,.....,itemX):删除元素并向数组添加新元素,返回已被删除并添加新元素的原数组
index必需,整数,规定删除项目的位置,使用负数可从数组结尾处规定位置
howmany必需,要删除的项目数量,如果设置为0,则不会删除项目
item1, ..., itemX可选,向数组添加的新项目
arrayObject.sort(fn):对数组的元素进行排序,排序需要调用函数,fn为函数名

function fn(a,b){
  return a>b;}
a>b时为升序
a<b时为降序

四.字符串常用对象方法

stringObject.length:返回字符串中的字符数目
stringObject.charAt(index):返回在指定位置的字符,index必需,表示字符在字符串中的下标
stringObject.charCodeAt(index):返回在指定位置的字符的Unicode编码,index必需,表示字符在字符串中的下标
获得字符串实际长度
stringObject.concat(stringX,stringX,...,stringX):连接两个或多个字符串,用加号连接更容易
stringObject.indexOf(searchvalue,fromindex):从前面开始检索字符串,如果找到就终止查找,返回某个指定的字符串值在字符串中首次出现的位置,如果没有则返回-1
stringObject.lastIndexOf(searchvalue,fromindex):从后面开始检索字符串,如果找到就终止查找,返回一个指定的字符串值最后出现的位置,如果没有则返回-1
stringObject.slice(start,end):提取字符串的某个部分,返回一个新的字符串,包括字符串stringObject从start开始（包括start）到end结束（不包括end）为止的所有字符,end可以不填,不填写的话会显示以后的所有元素
stringObject.split(separator,howmany):把字符串切割为字符串数组separator必须,从该参数指定的地方分割,howmany可不填,到最后
stringObject.substr(start,length):抽取从start下标开始的指定数目的字符,start必需,length可不填,默认到最后一个元素
stringObject.toLocaleLowerCase():把字符串转换为小写
stringObject.toLocaleUpperCase():把字符串转换为大写
应用:判断上传文件的格式

var btn = document.getElementById("input1");
    btn.onchange = function () {
        var num = btn.value.lastIndexOf(".");
        var newStr = btn.value.slice(num + 1).toLowerCase();
        if (newStr == "png" || newStr == "jpg") {
            alert("格式正确");
        }
        else {
            alert("请输入png或jpg后缀");
            btn.value = "";
        }
    }

首先获取文件名中后缀名的起始位置,即小数点的角标位置+1,然后获取后缀名再把其转换为小写

五.定时器

一次定时器:只执行一次:setTimeout(fn,1000);
多次定时器:多次执行:setInterval(fn,1000);
第一个参数:要执行的代码块,一般用函数或者函数名传递
第二个参数:延时多长时间执行,单位ms毫秒
清空定时器:clearInterval( );
注意:定时器不用的时候一定要清空,否则会造成未知错误

var timer = null;
timer = setInterval(function fn(){
           
                   },1000);
clearInterval(timer);