JS学习笔记【完】

最新推荐文章于 2021-06-05 13:35:13 发布

SAFER2016

最新推荐文章于 2021-06-05 13:35:13 发布

阅读量1.3k

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/wljhk2006/article/details/40543155

版权

JS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

随笔记录的，全作以后参考，好者可参之

================无聊的分隔线=============================
2014-10-8 星期三

1. 变量，常量？有点开发经验的都懂的，不解释

2. HTML的标签属性怎么写，在JS代码中对 HTML属性进行操作时就怎么写，简单的说就是，HTML怎么写，JS就是怎么写！但要排除一个标签属性，那就是class属性，在JS中要以className的名字进行操作。这是因为class这个词是js中的保留字。

3. 定义变量是var , 设置对象用 set

4. JS操作HTML属性的两种方式，一个是点 “.” ，一个是方括号 "[ ]"。点能表达的意思，方括号都能做到，但方括号能表达的意思点却是做不到。如：
    var oDiv=document.getElementById('div1'); '获取id="div1" 的div元素对象
    oDiv.style.width='200px'; '设置div元素的宽度为200px
    oDiv.style.height='200px'; '设置div元素的高度为200px
    以上语句可写成
    var oDiv=document.getElementById('div1'); '获取id="div1" 的div元素对象
    oDiv.style['width']='200px'; '设置div元素的宽度为200px
    oDiv.style['height']='200px'; '设置div元素的高度为200px
但当写成一个集成函数时，由于属性元素不固定，属性值不固定，所以需要两个参数，使用name表示属性元素，使用value表示属性值
    function setAttr(name,value)
    {
        var oDiv=document.getElementById('div1'); '获取id="div1" 的div元素对象
        ’oDiv.style.name=vlaue; '这样的写法是不行的，无法执行的，JS不能智能识别name是这个函数参数，此时只有使用方括号
        oDiv.style[name]=vlaue; '这样写才能行的通。
    }

5. HTML 样式的优先级： *（通配符最低）< 标签 < class < ID < 行间
    即：如果先操作
        元素.style.属性=xxx '是修改了行间样式
        之后再修改className，就不能覆盖上面的效果（优先级的原因）
    建议：同一个标签使用同一种方式操作标签样式最好，不可交叉使用。

6. 提取行间事件。
    由将事件写在行间对以后的调示工作会带来很多的不便，所以需要提取出来在JS中进行集中操作。
     如：单击，双击，滑上，悬停，滑下等都是事件，同时需要知道，事件也同标签属性一样，可以被JS操作。
    事件的值一般是一个函数。建议是一个匿名函数，因为给函数取名字也是一个纠结的事儿。

7. 事件执行前需要先加载完HTML页面，因为一个标签在未加载完时，写在<HEAD></HEAD>中的JS脚本是会报错的，特别是经过优化提取了行间事件后更容易页面报错。须使用 window.οnlοad=function(){......}; ，即待页面load完成后，再执行Js代码。

8. 有了以上几件事情的发生，就构成一件事儿：即实现了，行为(即事件==JS)，样式(CSS)，结构(即HTML代码) 三者的分离操作。

9. 记住：获取一个HTML元素对象，使用 document.getElementById('id');
              获取一组HTML元素对象，使用document.getElementsByTagName('标签名');
    注意：如果对组进行操作，最好使用DIV将其进行分离并包含起来，再分别操作。

2014-10-9 星期四

10. 原来checkbox元素的checked属性值，在JS中使用true/false来设置的。

11. 这一点我想记下的就是中英文输入法切换的原因带来的不必要的麻烦，标点符号必须是英文输入法下输入，否则让你纠结到死。

12. this关键字，它的作用是代替当前所操作对象。如：oDiv.οnclick=function(){......this.........}; //中的this就是代表oDiv对象。同是注意自定义属性的使用，这个自定义属性必须通过JS添加上去，不能在行间元素中添加，因为主流浏览器不支持，会被过滤掉。

13. 选项卡式的切换效果，其实就是先禁用掉所有元素的效果显示，再启用指定的元素效果，原理就是这样。

14. innerHTML, 主要用于读写DIV , span等除input标签外的内容。意思就是说DIV的内容可以是HTML代码。

15. 如果有这样的一个字符串运算式：'abc'+23+5+'cde'，其结果一定是'abc235cde'，但是如果我要的是23+5的和呢，那么这时就要用到运符的优先级特性了，修改表达式为：'abc'+(23+5)+'cde' 那么结果就是'abc28cde‘了。

16. 定义数组的三种方式：
    方式一：
    var mycars=

new Array();

mycars[0]="Saab";
   mycars[1]="Volvo";
    方式二：(常用)
    var arr=['字符串1','字符串2',...];
    方式三：
    var arr2=new Array('字符串1','字符串2',...);

================无聊的分隔线=============================

17. 前面16项都也许有些比我还菜的鸟友不太懂，再来回顾一下基础：
    javascript的核心是ECMAScript,说白了就一个命令解释器，就是人与电脑之间的翻译，将人类的操作命令解释给电脑听，再将电脑的语言解释给人类看。你不需要太明白这个，其实我也不太明白。大概了解一下，ECMAScript是javascript的核心就可以了。
    其实，ECMAScript这个核心给javascript提供的功能也不多，加减乘除，变量定义等一些简单的操作，在DOM未出世的时间很不受待见。
    DOM：Document Object Model 文档对象模型。其中的文档指的就是HTML，DOM的作用是就是赋于JS操作HTML的能力。即我们在JS中经常会用到的一个对象document。
    BOM：Browser Object Model 浏览器对象模型。即BOM赋于JS操作浏览器的能力。即我们在JS中常用的对象window

18. 谈兼容性问题：
    ECMA：几乎没有兼容性问题(细微处还是有的)
    DOM：有一些操作不兼容
    BOM：没有兼容性问题(其实意思是完全不兼容，所以这个功能几乎也不用它)

19. JS中常见的六种数据类型：
    var a=12;
    //alert(typeof a); //number 数字类型
    var a='abcdefg';
    //alert(typeof a); //string 字符串类型
    var a=true;
    //alert(typeof a); //boolean 布尔类型
    function a()
    {
        alert(‘abc’);
    };
    //alert(typeof a); //function 函数类型
    var a=document;
    //alert(typeof a); //object 对象类型
    //alert(typeof b); //undefined 未定义类型(这个是真的未定义)
    var b;
    alert(typeof b); //undefined 未定义类型（这个虽说定义了，但没有被赋值，同样是未定义类型）

20. 数据类型转换：
    字符串转数字：parseInt('字符串'); //从字符串的左边向右边找数字，碰到非数字的字符就会中断查找，只获取即得的数字显示出来。如果没有数字，则显示 NaN = Not a Number 非数字的意思。
    注意：任何数与 NaN 运算皆得NaN。但：两个NaN却是不相等的。
    判断一个结果是否为NaN使用 isNaN();
    字符串转小数：parseFloat('字符串'); 相对于parseInt来说，parseFloat()最常用。
    相对上面两个显示转换，还有个隐式转换：
    == 这个运算符是先将两边数据类型转换成一样的再比较，=== 这个运算则不是，它是比较两个原始数据。常用==运算符。

21. 变量的作用域：即变量有效的使用范围，分为局部变量和全局变量，不细说，自个百度去。

22. 闭包：百度出来的意思说的乱七八槽，简直不是人话。
      闭包说白了就一句话，即：子函数可以使用父函数的局部变量！我们不知道不代表我们没用过，这名词就是一大忽悠闲着淡疼想出来的。
      都是最平常不过的事儿，所以建议别去想这个概念，自然就好。

23. JS命名规范：有规则，可读性强。建议建立自己的类型前缀+首字母大写。
    常见的数据类型前缀：
    数组：a
    布尔：b
    浮点：f
    函数：fn
    整数：i
    对象：o
    正则：re
    字符串：s
    变体变量：v

2014-10-10 星期五

24.运算符：
    算术：+ ，- ，* ，/ ，%(取模) ;加减乘除就不用说了，取模意思就是求余数，如：10%3=1 可用于隔行变色或秒转时间的功能实现。
    赋值：= ，+= ，-= ，*= ，/= ，%=
    关系：< , > , <= , >= , == , === , != , !==
    逻辑：&&(且) ，||(或) ，!(非)
    运算符优先级：括号(可改变运算符优先级的符号)

25. 程序流程控制
    判断：if, switch, ?:
    循环：while, for
    跳出：break, continue
    什么是真：true , 非零数字，非空字符串，非空对象
    什么是假：false，数字零，空字符串，空对象(NULL)，undefined

26. JSON
    什么是JSON? 它是基于JS的一种数据交换格式。
        JSON的格式类似于数组，但定义方式不同，数组使用 [ ] 符号，JSON使用 { } 符号
        如：数组，var arr=[1,2,3,4,5,6];
          而JSON，var json={a:1,b:2,c:3,d:4}; //a,b,c,d这几个相当于是变量，" : " 后是变量的值，这个有别于数组，数据是成对的也可以叫键值对。
        如果JS中定义几个变量：
        var a=1;
        var b=2;
        var c=3;
        这样还不如写成JSON格式：var json={a:1,b:2,c:3,d:‘abc’};
        如果要使用JSON中的各项值: alert(json.a); //如此即可，同样可以通过之种方式被作为变量进行操作，如，json.a++;

    JSON和数组：
        实例说明：
        var json={a:12, b:5, c:7}; //json
        var arr=[12, 5, 7]; //数组

        操作数据：
        alert(json.a); //显示json数据项
        alert(arr[0]); //显示数组数据项

        区别：
        操作json数据的方式还可以这个样子：
            alert(json['a']); //和先前讲的HTML元素属性操作一样，有点的地方都可以使用 [ ] 符号代替。
        说明：JSON的下标可以是字符串，而数组的下标只能是数字。

    JSON和FOR IN
        另一区别是：json不像数组一样有length属性。由循环读取的方式如下：
        读取数组：
        for(var i=0; i<arr.length; i++){ alert(arr[i]); } 也可以 for(var i in arr){ alert(arr[i]); } //可以使用for循环，也可以使用for...in...
        读取JSON:
        for(var i in json){ alert(json[i]); } //只能使用 for...in...

================无聊的分隔线=============================

27. 函数返回值
    如：function test(){ return 值; } 也可以 function test(参数1，参数2，....){ ...语名... ; return 结果; }
    但是：一个函数应该只返回一个类型的值。
    但是：如果使用JSON数据类型，那。。。返回的值就可以打破上面的限制了。
    当然，也可以不使用return

28. 函数传参
    可变参(不定参)：arguments 【这个很重要】
        参数的个数可变，参数数组的应用
        arguments是个数组，默认这个数组里存的是函数的参数,不管几个参数都在这里面了。
    如：function sum(){ ...... } ，看这个函数可知，它里面没有参数，但如果在使用过程中添加了参数进去呢，那不是要报错吗？也许会，但如果使用了arguments这个数组来操作，也许就不会了。就把arguments当成一个数组，数组中的每一项都是参数。
    例：
    function sum()
    {
        var result=0;
        for(var i=0; i<arguments.length; i++)
      {
            result += arguments[i];
        }
        return result;
    }

   针对上面sum()这个函数，
    我可以这样调用：var a = sum(1,2,3,4,5); 返回的结果就是a=15;
    我也可以这样用：var a=sum(1,2,3,4,5,6,7,8,9,10); 返回的结果是a=55;
    由以上可知，参数个数是不固定的，当然，你也可以不给参数，那a=0; 不知道你是否明白，不明白就是回家抱孩子去，呵呵！

    再一例：
    写个函数，功能：当此函数的参数为2个时的功能是从元素中获取元素样式的值，当参数为3个时，就是设置指定的样式。
    两个参数：一个是元素对象，一个是元素样式
    三个参数：一个是元素对象，一个是元素样式，一个是样式值【注：参数顺序不能变】
    function css()
    {
        if(arguments.length == 2)
        {
            return arguments[0].style.arguments[1];
        }
        else
        {
            arguments[0].style.arguments[1] = arguments[2];
        }
    }

    这时有这么一个元素，它的样式是这个的：
    #div1{ width:200px; height:200px; border:1px solid red; background:red}

    我在JS中这么来写：
    window.οnlοad=function(){
        var oDiv = document.getElementById('div1'); //获取要操作对象指定样式的值
        var a = css(oDiv, 'width'); //带入两个参数，意思就是获取或说读取
        alert(a); //结果是 200px

        var b = css(oDiv, 'background', 'green'); //设置样式
        alert(b); //结果是，被操作对象的样式背景色被修改为绿色
    };

    当然，如果确定了这个函数的功能后，可以这样改一下：
     function css(obj, name, value)
    {
        if(arguments.length == 2)
        {
            return obj.style[name]; //注意这里要将点修改为 [ ] ,否则会报错
        }
        else
        {
            obj.style[name] = vlaue;
        }
    }

29. 如何取非行间的样式 currentStyle
    如果样式是写在行间的，我们可以通过对象.style.样式名这种方式获取到，但如果是写在样式表里的，使用这个方法就不能获取了。
    如果不是行间样式，我们可以使用 currentStyle 换掉 style ,即：对象.currentStyle.样式名以这种方式就可以获取当前使用的样式了。
    当然：先不要高兴的太早，好东西总是存在不兼容的现象，currentStyle就只能兼容IE，在其它浏览器下是用不了的，会报错的。
    那么其它浏览器如何实现这个提取非行间样式功能的呢？
    Chrome 最新版本已经支持 currentStyle了
    FireFox 用的是独自的方式 getComputedStyle(对象，任意值) 如：alert( getComputedStyle(oDiv, false).width); //就是获取oDiv对象的宽度样式值。参数中除了oDiv必须滴以外，另一个参数你写什么都行，无所谓，它就是一废参。但是它却又不被IE兼容

    那么既然存在浏览器间的兼容问题，就要想个完美的解决方案了：
    if(oDiv.currentStyle)
    { //因为currentStyle在IE中 alert 弹出的是一个对象，而在FF中弹出的是undefined，在真假判断中undefined是false，所以
        alert(oDiv.currentStyle.width);
    }
    else
    {
        alert(getComputedStyle(oDiv,false).width);
    }
    封装成一个函数：
    function getStyle(obj, name) //obj 操作对象，name要获取的样式
    {
        if(obj.currentStyle)
        { //因为currentStyle在IE中 alert 弹出的是一个对象，而在FF中弹出的是undefined，在真假判断中undefined是false，所以
            return obj.currentStyle[name];
        }
        else
        {
            return getComputedStyle(obj,false)[name];
        }
    }
    但是

，对于background , border, margin 等这些复合样式(即其有很多部分组成的)，上面那个函数是无法获取的，它只能对单一样式进行操作，如: backgroundColor

30. 数组基础：很基础，很好用，很重要
    数组定义：
    var arr=[1, 2, 3, 4, 5];
    var arr=new Array(1, 3, 4, 5, 6, 7);
    以上两种方式，都对，但 [ ] 的性能略高，因为代码短

    数组的属性：length 既可以获取，又可以设置。使用这个方法，可以快速清空数组，直接设置数组.length=0 就可了。
    数组使用原则：数组中应该只存一种类型的数据。

31. 数组的方法：设：定义数组 arr
    添加元素：
        arr.push(元素)，从尾部添加
        arr.unshift(元素), 从头部添加
    删除元素：
        arr.pop(), 从尾部弹出
        arr.shift(), 从头部弹出
    元素排序
        arr. sort([比较函数]), 排序一个数组, 如果只是这样：arr.sort() 默认sort只按字母顺序排序，这样就不适用于数字排序。
            排序一个字符串数组
                arr.sort(); 这样子就可以了
            排序一个数字数组
                数字数组排序要这样：arr.sort( function(n1,n2){return n1-n2;} );
    转换类
        arr.concat(数组2)
            连接两个数组
        arr. join(分隔符)
            用分隔符，组合数组元素，生成字符串
            字符串split

    插入，删除
        splice替换
            arr. splice(开始，长度，元素......)
            先删除，后插入
        删除
            arr. splice(开始，长度)
        插入
            arr. splice(开始，0，元素......)


================无聊的分隔线=============================

2014-10-11 周六

32. 定时器的作用
    开启定时器：
    setInterval 间隔型
    语法：setInterval(函数名, 间隔时间长度);
    function show(){ alert('a'); }
    如：setInterval(show, 1000); //1000ms=1s，每隔1秒执行1次

    setTimeout 延时型：
    语法：setTimeout(函数名, 时间长度);
    function show(){ alert('a'); }
    如：setTimeout(show, 1000); //1000ms=1s，只执行一次，执行时长为1秒
    【注意】：每个定时器都是有返回值的，这利用其返回值进行下面两个功能的实现
    如：var timer1=setInterval(show, 1000);
    如：var timer2=setTimeout(show, 1000);

    停止定时器：
    clearInterval
    语法：clearInterval(定时器名);
    如：clearInterval(timer1);

    clearTimeout
    语法：clearTimeout (定时器名);
    如：clearTimeout (timer2);

33. 数码时钟实例
    获取系统时间:
    Date对象
    var oDate = new Date();
    getHours, getMinutes, getSeconds
    如：alert(oDate.getHours());

    显示系统时间:
    字符串连接
        【注意】字符串也是数组，可以当成数组操作。如：var a='abc123'; 可以使用 a.length 获取字符串的长度，a[0] == a ,其它你懂的。
        但是，这个简单易用的功能只有高版本的浏览器才兼容，如IE7就不能识别这种写法。
    空位补零
        【注意】因为获取系统时间 oDate.getHours(); 小于10的数字时它的空位被过滤，所以需要在数据小于10时进行补字符’0‘的操作。
        因为js中数字字符相加会被解释成加法运算，而不是字符串连接，所以当时间数字即时是大于等于10的时候也要加一个空字符。
    如：
        function toDouNum(n) //此函数可以解决字符连接问题
        {
            return n<10 ? ('0'+n) : (''+n);
        }

    设置图片路径:
        采用字符串匹配图片名的方式来，时时获取系统时间，再通过系统时间对象获取时分秒，生成字符串，再通过 str.charAt(n) 匹配图片名称。

    charAt方法: 它本身的功能就是取字符串中的某一位。
        上面提到的字符串数组使用,如上：var a='abc123'; 当使用a[1] 这种方式到获取字符串中某元素时，只有高版本的浏览器才支持这种写法，像IE7这个版本就不支持。所以有charAt方法，a[1] 改写成 a.charAt(1) 这样就可以兼容了。

34. Date对象的其他方法
    年：oDate.getFullYear()
    月：oDate.getMonth() //默认从0开始，使用时须加1.
    日：oDate.getDate()
    星期：oDate.getDay() //0, 1, 2, 3, 4, 5, 6

35. 延时提示框实例
    1. 鼠标移入A 显示B，移出A 就隐藏B //用到的事件onmouseover, onmouseout
    2. 鼠标从A，移到B，中间需要有延时，即B隐藏需要进行延时且要去除B的隐藏 //setTimeout, clearTimeout
    3. 鼠标从B中移出时，中间也需要延时。即B执行延时隐藏
    【注意】：每完成一个功能后，首先要做的是优化代码，能减则减，能合并就合并，减少代码冗余量。

36. 无缝滚动--基础
    物体运动的基础
        1. DIV的移动 //必须对元素先定位，绝对定位position:absolute;
        2. offsetleft 的作用 //获取元素的左边距，最大的优点是能综合考虑所有影响物体位置的因素，得出最终结论。
       【注意】：类似的还有：offsetTop, offsetWidth, offsetHeight
        3. 用定时器让物体连续移动

        4. 效果原理：让ul 一直向左移动
        5. 复制 li ：InnerHTML 和 += ，修改ul 的 width // 注意overflow:hidden 对DIV内容溢出的处理
        如：var oDiv = document.getElementById('div'); //如果要对oDiv中的内容进行复制，使用InnerHTML如下操作
            oDiv.innerHTML += oDiv.innerHTML;
        6. 滚动过界后，重设位置：判断过界
        //将滚动内容复制左移，以 “-” 号代表方向：左移距离 = -滚动内容/2 时还原初始位置
        【注意】：距离运算中，别忘了连接上单位 'px' 。
        7. 无缝滚动--扩展
            1. 改变滚动方向：添加一个位移变量，根据用户点击判断设置变量正负方向
            2. 鼠标移入暂停：入则clearInterval关闭定时器，出则setInterval开启定时器

================无聊的分隔线=============================

37. DOM基础
    DOM基础：
        什么是DOM? DOM= Document Object Model 文档对象模型，是JS的最重要组成部分
    浏览器支持情况：FF > Chrome > IE9 【IE6~8 对DOM的支持更差】

    DOM节点（1）：
    childNodes（表示一个集合数组） nodeType（节点类型：文本节点或空白==3，元素节点==1）
        如何获取节点
        children 【相似于childNodes，但是它只包括元素节点而不包括文本和空白】
        parentNode 父节点【如：点击连接，隐藏整个 li 】
        offsetParent 【获取元素在页面上有定位样式的父级对象】
    【关于绝对定位】：绝对定位要起作用，是根据上一级即父级是否有定位来决定的，如果父级没有定位则向上查找直至BODY

    DOM节点（2）：
    首尾子节点
        有兼容问题
        firstChild (适用于IE7等低版本), firstElementChild (适用于IE9等高版本)
        lastChild (适用于IE7等低版本),, lastElementChild (适用于IE9等高版本)
        【注意】：针对兼容问题的解决办法就是，判断真假。如下：
        if(oDiv.firstChild){ oDiv.firstChild.style.background='red'; }else{ oDiv.firstElementChild.style.background='red'; }
    兄弟节点
        有兼容问题（问题如上）
        nextSibling, nextElementSibling
        previousSibling, previousElementSibling
        【注意】：兼容问题解决方法如上

38. 操纵元素属性
    元素属性的操作
        1. oDiv.style.display = 'block';
        2. oDiv.style['display'] = 'block';
        3. Dom方式：

    DOM方式操作元素属性
        获取：getAttribute(属性名称);
        设置：setAttribute(属性名称，值);
        删除：removeAttribute(属性名称);

39. DOM元素灵活查找
    用className选择元素，由此还封装了一个函数，通过父级对象和子级下的className来过滤元素。
    function getByClass(oParent, sClass)
    {
        var aResult=[];
        var aEle=oParent.getElementsByTagName('*'); //通配符*
        for(var i=0; i<aEle.length; i++)
        {
            if(aEle[i].className == sClass){ aResult.push(aEle[i]) }
        }
        return aResult;
    }

2014-10-12 周日

40. 创建，插入和删除元素

    创建DOM元素
       document. createElement（标签名） //创建一个节点
        父对象.appendChild（节点） //追加一个节点
        如：为 ul 插入 li 节点

    插入元素
        父对象.insertBefore（节点，原有节点） //在已有元素前插入,原有节点就是第一个节点，如果没有第一个节点，就直接父对象.insertBefore（节点）即可，这里需要进行一次判断，由此可以避免兼容问题
        如：倒序插入 li

   删除DOM元素
        父对象.removeChild（节点） //删除一个节点
        如：删除 li

41. 文档碎片
    1. 文档碎片可以提高DOM操作性能(理论上是这么说的)
    2. 文档碎片原理
    3. document.createDocumentFragment() //只适用于低版本的浏览器（低于IE9版本，不常用，只用于大批量的元素操作）

================无聊的分隔线=============================

42. 表格应用 --1
    获取
        tBodies, tHead, tFoot, rows 行, cells 单元格
        如：getElementsByTagName('tbody')[0] 可以简写为 tBodies[0] //这是专为表格定义的功能
        【注意】：一个表格只能有一个表头和表尾，但可以多个 tBody，所以要用tBodies.
        【注意】：操作表格时，万不可忘记tbody这个标签，否则你懂的。
    隔行变色
        鼠标移入高亮
    添加，删除一行
        DOM方法的使用

43. 表格应用 --2
    搜索【实例操作】
        版本1：基础版本---字符串比较
        版本2：忽略大小写---大小转换 //使用大小写转换的方法，大写转小写: 字符串.toLowerCase() 小写转大写: toUpperCase()
        版本3：模糊搜索---search的使用 //JS的一个方法：字符串.search(关键字); 没找到就返回 -1
        版本4：多关键字---split //JS的一个方法：字符串.split(关键字);
        高亮显示，筛选

2014-10-13 周一

44. 表格应用 -- 排序
    移动 Li
        appendChild的真正功能是：先将元素从原父级下删除掉，再将元素添加到新的父级下。
        如：var aLi=document.getElementsByTagName('li'); //其实aLi并不是一个真正意义上的Array对象，因为数组对象特有sort()方法，它真的用不了，可aLi却可以使用length和方括号这两个数组特性。除非你循环将这个集合aLi，push到一个真正的数组中去。然后，sort(function(){});//看到没，sort()方法中可以放函数的。

    元素排序：转换---排序---插入
    转换就是：将Li或表格元素集合转换成真正的数组。
    排序就是：数组.sort(function(tr1,tr2){....});
    插入就是：将排序好的数组，再通过循环方法，appendChild到Li或Tr 的父对象中去

45. 表单应用 -- 1
    什么是表单？主要作用就是向服务器提交数据的。如：用户注册，其中的action属性值就是代表提交到哪里。
    表单事件？onsubmit 提交时发生的事件，onreset 重置时发生的事件。

46. 表单应用 -- 2
    阻止用户输入非法字符---阻止事件
    输入时，失去焦点时验证 onkeyup, onblur
    提交时检查   onsubmit
    后台数据检查

================无聊的分隔线=============================

2014-10-14 周二

47. 运动基础
    1. 让DIV运动起来：
        主要使用DIV对象的offsetLeft, setInterval, clearInterval 等属性方法来实现。
    2. 速度--物体运动的快慢【修改物体每次移动距离的长短】
    3. 运动中的BUG
        不会停止【可限制物体运动距离】
        速度取某些值会无法停止【注意比较运算符的使用】
        到达位置后再点击还会运动【使用条件判断来解决】
        重复点击速度加快
        【注意】：注意定时器的使用，在点击按钮开启一个定时器时，不管有没有开先进行一次关闭定时器操作，此操作是用于避免，因用户多次点击按钮而导致开多个定时器。
    4. 匀速运动
        速度不变的运动

48. 运动框架及应用
    运动框架【所谓框架说白了就是前人总结的经验基础上设定好的做事流程】
        在开始运动时，关闭已有定时器
        把运动和停止隔开(if...else...)

    运动框架实例
        1. ‘分享到’ 侧边栏
            通过目标点，计算速度值【根据当前位置与目标位置的比较确定方向是正还是负】

    这里就上面实例，封装一个函数：
    var timer = null;
    //var alpha;
    function startMove(iTarget) 【此函数适用于侧边栏实例】
    {
        var oDiv=document.getElementById('div1');
      clearInterval(timer); //打开定时器前先清空当前运行的定时器，即使没有也要执行。
        var speed = 0;
        if(iTarget > oDiv.offsetLeft) //根据目前点与当前位置的比较确定，物体移动的方向
        {
            speed = 10;
        }
        else
        {
            speed = -10;
        }

        timer= setIterval(function(){
            if(iTarget == oDiv.offsetLeft) //当物体到达目录位置时，清空定时器
            {
                clearInterval(timer);
            }
            else
            {
                oDiv.style.left = oDiv.offsetLeft + speed + 'px'; //以指定的速度向目标位置移动
            }
        },30);
    }

        2. 淡入淡出的图片
            用变量存储透明度
    var timer = null;
    var alpha=30;
    function startMove(iTarget) 【此函数适用于透明度变化实例】
    {
        var oDiv=document.getElementById('div1');
      clearInterval(timer); //打开定时器前先清空当前运行的定时器，即使没有也要执行。
        var speed = 0;
        if(iTarget > alpha) //根据目标透明度，确定alpha是增还是减
        {
            speed = 10;
        }
        else
        {
            speed = -10;
        }
        timer = setInterval(function(){
            if(iTarget == alpha)
            {
                clearInterval(timer);
            }
            else
            {
                alpha += speed;
                oDiv.style.filter = 'alpha(opacity:' + alpha + ')'
                oDiv.style.opacity=alpha/100;
            }
        },30);
    }
49. 缓冲运动
    逐渐变慢，最后停止
    距离越远速度越大
        速度由距离决定
        速度 = (目标值-当前值)/缩放系数
    【注意】document.title 这个文档属性可以更改网页标题。
    【注意】像素是计算机能接受的最小显示单位，无四舍五入之说。
    Math对象：Math.ceil(3.1) 向上取整 4，Math.floor(3.9) 向下取整 3
    【做缓冲运动的效果时，一定要记得取整。】
    var timer = null;
    function startMove(iTarget) 【此函数适用于缓冲运动】
    {
        var oDiv=document.getElementById('div1');
      clearInterval(timer); //打开定时器前先清空当前运行的定时器，即使没有也要执行。

        timer= setIterval(function(){
            var speed = (iTarget - oDiv.offsetLeft)/5
            speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);

            if(iTarget == oDiv.offsetLeft) //当物体到达目录位置时，清空定时器
            {
                clearInterval(timer);
            }
            else
            {
                oDiv.style.left = oDiv.offsetLeft + speed + 'px'; //以指定的速度向目标位置移动
            }
        },30);
    }

    例子：缓冲菜单
        bug: 速度取整
        跟随页面滚动的缓冲侧边栏
            潜在问题：目标值不是整数时【注意速度取整操作】
   【注意】 window.onscroll 这个事件的使用。即，当用户滚动浏览器的滚动条时发生的事件处理程序
    scrollTop 的兼容性写法：scrollTop指的是滚动条距离页面顶部的距离，如下：
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    也见有如下写：
    var scrollTop = document.documentElement.scrollTop + document.body.scrollTop;
    当页面加入DTD标示后 document.documentElement.scrollTop的值在IE和FF下正常，但document.body.scrollTop一直为0。在Chrome下就反过来了。

SAFER2016

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS学习笔记【完】

随笔记录的，全作以后参考，好者可参之================无聊的分隔线=============================2014-10-8 星期三1. 变量，常量？有点开发经验的都懂的，不解释2. HTML的标签属性怎么写，在JS代码中对 HTML属性进行操作时就怎么写，简单的说就是，HTML怎么写，JS就是怎么写！但要排除一个标签属性，那就是cl
复制链接

扫一扫

专栏目录