4.12 JS03

作者: 苏打丶观 | 来源:发表于2017-04-13 22:58 被阅读0次

    一.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);
    

    相关文章

      网友评论

          本文标题:4.12 JS03

          本文链接:https://www.haomeiwen.com/subject/rxipattx.html