JS小知识点整合

作者: 洋仔幕落幕合 | 来源:发表于2016-12-01 00:36 被阅读325次

    (一):获取元素

         1:document.getElementById('id名');  
         2:document.getElementsByTagName('获取一组标签');
         3:document.getElementsByClassName('按class名获取');                 
         4:getByClass
         5:document.getElementsByName('按name名获取');  
    

    (二):变量

        1:var name = value;(变量名不可以是数字,不可以使用系统保留名,不可以使用特殊符号);                
        2:var _this = this;
          var $this = this;除外.         
    

    (三):函数

        1:匿名函数--function(){}                
        2:命名函数--function show(){}  
         注:当找不到赋值对象时默认的都是window
    

    (四):流程控制语句几种形式

            1:
                if(条件){
                    执行的语句
                }else{
                    执行的语句
                }
            2:
                if(条件){
                    执行的语句
                }else if(条件){
                    执行的语句
                }
            3:
                if(条件){
                    执行的语句
                }else if(条件){
                    执行的语句
                }else{
                    执行的语句
                }
            4:
                if(条件){
                    执行的语句
                }
            5:三目 
                条件?语句1:语句2;
            6:并且
                条件 && 语句1;
            7:
                if(条件)
            8:switch判断
                switch(值){
                    case :
                    语句
                    break;
                    case :
                    语句
                    break;
                    case :
                    语句
                    break;
                    default:
                    break;
                }
    

    (五):循环

            1:
                for(初始值,条件,自增){
                    语句
                }
            2:
                for(var name in json){
                    语句
                }
            3:
                while(条件){
                    要重复做的事情
                    改变条件
                }
    

    (六):表单元素和非表单元素的区别

         表单元素的值:用value 获取;
         非表单元素的内容:用 innerHTML 获取
    

    (七):数据的基本类型

            使用 typeof(要测试的数据); 来测试数据类型
                    
            1:基本数字类型: number 数字类型   string 字符串类型   boolean(布尔类型  返回 true   false)  undefin 未定义
                            
            2:复合数据类型: object 对象类型
                            
            3:function -- 是一个特殊的,既可以是基本类型,也可以是复合型,但会划分到复合类型里.
    

    类型的前缀:

              类型                前缀                 类型                   实例                                    
             对象                  o                   Object                 oDiv1                                
            数组                   a                  Array                  aItems                                    
            字符串                 s                    String               sUserName                                   
            整数                i                    Integer                 iItemCount                                
           布尔值                 b                     Boolean                 bIsComplete                                 
           浮点数                 f                      Float               fPrice                                 
            函数                  fn                  Function               fnHandler                             
          正则表达式               re                     RegExp                 reEmailCheck                              
          变体变量                 v                     Variant                 vAnything
    

    (八):数据类型的转换(显示型转换或者强制类型转换)

        1:parseInt()  转整数  
        2:parseFloat()  转浮点数   
        3:Number  转数字
        4:NaN  属于数字类型,是一个数字类型,NaN和谁都不想等包括自己.(判断非数字时使用:isNaN());
    

    (九)几种运算符的分类 (运算符:优先级控制要使用小括号 -->())

        1:算术运算符:+ - * / %
        2:赋值运算:= += -= /= *= %=
        3:比较运算:== < <= > >=  != 不等   === 严格的比较,是不是相等,先比较类型    !== 严格的比较,是不是不相等
        4:逻辑运算:与 或 非   || 表示或 只要一个成立,则为真    &&表示并且 全部成立,则为真   !叹号表示取反
    

    (十):什么是真和假

         1:真    true  非空字符串  非零数字  非空对象
         2:假    false  空字符串      数字0    null   undefined   
          (2==true ->false 在计算机里是二进制去运行流程,所以当是二的时候为假).
    

    (十一):关于作用域

         1:全局    是指在所有的函数以外的变量    
         2:局部变量    函数内部的变量(window.onload 下的变量是局部变量)  
         3:闭包  子函数可以使用父函数的变量(在函数上套一层).
    

    (十二):关于js的括号和分号应该什么时候添加?

        1:括号    在定时器里不能使用括号  例如{ setInterval(fn,time);
                         在事件函数里不能使用括号  例如{ oBtn.onclick = fn;}
        2:分号     赋值语句要使用分号  执行语句结束后要使用分号
    

    (十三):随机数:Math.random

                随机数的封装:function rnd(n,m){
                        return Math.floor(Math.random()*(n-m)+m);
                    }
    

    (十四):返回值: 函数返回值:return 返回值是指返回给调用者,谁调用就返回给谁.能返回什么,只要你愿意什么都可以返回

    (十五):eval 是把字符串变成可执行的语句 *注:具有注入式攻击

    (十六):数组的操作

       1)增加  arr.push(数)指放到后面     arr.unshift(数)指放到前面
       2)删除  arr.pop()指删除后面           arr.shift()指删除前面
       3) 删除第几个: arr.splice(开始位置,删除几个[,元素1,元素2])
       4) 转字符串  arr.join(连接的东西) 
       5) 拼接数组 arr. concat(数组的链接) 
       6) 数组排序  arr.sort() 
       7) 反转数组  arr.reverse()
    

    (十七):字符串的操作

       1:查找字符串的位置  str.indexOf('字符串') 指找某个东西在字符串中出现的位置,区分大小写.
       2:查找字符串的位置  str.lastIndexOf(小字符串) 从右往左看,确定一个位置后就不再找,区分大小写.
       3:字符串截取  str.substring(开始位置,结束位置); 
       4:切分字符串  str.split(切的方式) 切分的结果:数组
       5:大小写转换   str.toUpperCase() 把整个字符串转成大写
       6:大小写转换   str.toLowerCase() 把整个字符串转成小写
       7:charAt()
    

    (十八):Math对象

       1:Math.random()  随机数
       2:Math.abs()
       3:Math.max()
       4:Math.min()
       5:Math.pow()
       6:Math.sqrt()
       7:Math.ceil()
       8:Math.floor()
       9:Math.round()
    

    (十九):Date对象:

     var oDate = new Date();  时间
        1:小时:getHours();
        2:分钟:getMinutes();
        3:秒:   getSeconds();
        4:年:   getFullYear()
        5:月:   getMonth()+1 -- 从0月开始
        6:日:   getDate()
        7:星期:getDay() --- 星期日是 0
        8:毫秒: getMilliseconds();
        9:时间戳 getTime() 
        10:setFullYear(年,月,日);
        11:setHours(时,分,秒,毫秒);
        12:setFullYear(年,月-1);
        13:setFullYear(年);
         定时器:
            *原则:定时器要先清除,再打开
                         另一个定时器setTimeout
            setInterval 一直执行,连续不断的
            setTimeout 只执行一次
            setTimeout(函数名,时间) 
            清除:clearTimerout();
    

    (二十):i的问题

      1:使用封闭空间()(i):1)解决了变量冲突的问题    2)i值的问题   3)循环里面加事件,事件里的i不能用
      2:自定义属性   
    

    (二十一):数组:1:arr = []; 2:json = {};

    (二十二):DOM的操作:

        1:获取元素--obj.tagName();
        2:父级获取子级 children;
        3:父级元素的子结点数组 childNodes;
        4:首节点:1) oParent.firstChild 2)oParent.children[0];  
                兼容写法:  var oFirst = oParent.fristElementChild || oParent.firstChild;
        5:尾节点  1)oParent.lastChild  2)oParent.children[oParent.children.length -1];
                 兼容写法: var oLast = oParent.lastElementChild || oParent.lastChild;
        6:兄弟节点:
                     上一个兄弟节点:var oPrev = obj.previousElementSibling || obj.previousSibling  
             下一个兄弟节点:var oNext = obj.nextElementSibling || obj.nextSibling              
        7:创建元素: document.createElement('标签名');动态创建的元素和原来就存在的元素,没有任何区别
        8:添加元素:document.body.appendChild(obj);
        9:父.appendChild(obj); 表示:添加到父元素的最后面
        10:添加前面:父.insertBefore(obj,谁的前面);
        11:删除元素: 父.removeChild(obj);
    

    (二十三):获取位置

        a:获取可视区宽高
        1:可视区高度:(写法)document.documentElement.clientHeight
        2:可视区的宽度:(写法)document.documentElement.clientWidth
        b:获取盒模型宽高
        1:盒模型高度:offsetHeight
        2:盒模型宽度:offsetWidth
        c:定位父级距离
        1:左:obj.offsetLeft
        2:上:obj.offstTop
        d:绝对位置:getPost
        1:getBoundingClientRect().left
        2:getBoundingClientRect().top
        3:getBoundingClientRect().right
        4:getBoundingClientRect().bottom
    

    (二十四):属性操作:

        getAttribute(属性名)       获取自定义属性
        setAttribute(属性名,值) 设置自定义属性
        removeAttribute(属性名)    删除属性        
    

    (二十五):事件

        1:onclick 点击事件
        2:onmouseover  鼠标移入
        3:onmouseout   鼠标移出
        4:onmousedown  鼠标按下
        5:onmousemove  鼠标移动
        6:onmouseup    鼠标抬起
        7:onmouseenter 鼠标指针移入对象内时触发 
        8:onmouseleave 鼠标指针移出
        9:onmousewheel   鼠标滚轮事件
        10:DOMMouseScroll  兼容火狐的滚轮事件写法
        11:oncontextmenu  鼠标右键菜单事件
        12:ondblclick 鼠标双击事件
        13:onchange  域的内容发生改变
        14:oninput
        15:onblur   失去焦点
        16:obj.focus();强制设置焦点: 
        17:onfocus  获取焦点
        18:obj.blur();强制失去焦点:   
        19:onkeydown 键盘按下时
        20:onkeyup  键盘抬起
        21:onload  载入网页
        22:onerror
        23:onresize 窗口缩小
        24:onscroll 鼠轮滚动执行
        滚动条:
            高: document.documentElement.scrollTop || document.body.scrollTop
            宽:document.documentElement.scrollLeft || document.body.scrollLeft
    

    (二十六)事件对象:ev

        var oEvent = ev || Event;
    

    (二十七)事件流:

        obj.addEventListener('click',fn,false);
            false       事件冒泡
            true        事件捕获(事件下沉)
        只存在高版本浏览器上:obj.attachEvent('onclick',fn);
        面试题:解释一下IE事件流和chrome事件流
            1:IE 只存在事件冒泡
            2:chrome  可以是事件冒泡可以是捕获(true false)
        事件绑定:
        1:obj.addEventListener(事件,函数,是否捕获);
            事件:不能带 on
            兼容性: chrome ff ie9+
        2:obj.attachEvent(事件,函数);
            事件:必须带on
            兼容性:ie 系列
        3:处理兼容性:
            if(obj.addEventListener){
                obj.addEventListener(事件,函数,是否捕获);
            }
            else{
                obj.attachEvent(事件,函数);
                
            事件解绑:
                obj.addEventListener(sEv,fn,false);
                    removeEventListener(sEv,fn,false)
                obj.attachEvent(事件,函数);
                    obj.detachEvent(事件,函数);                 
            DOMReady();
                1:window.onload所有资源加载完才会加载JS
                    html css img video audio flash..  js
                2:DOMReady
                    html css js
    

    (二十八)cookie:

        特性:     1:在服务器环境下,跟随服务器发送  
                2:大小只有4K大 
                3:默认会话结束(指关闭浏览器时会话结束)
                4:name=value 成对出现
                5:name不能重复,否则会覆盖

    相关文章

      网友评论

      本文标题:JS小知识点整合

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