zoukankan      html  css  js  c++  java
  • JS的构造及其事件注意点总结

    一:js的组成
    ECMAscript
    bom
    dom
    类型包括:
    number boolean  string undefined  object function

    二:基本函数作用
    parseInt(字符串)--作用:从字符串中提出整数,从左向右检查,只输出整数,如果碰到非整数,则自动停止检查。
    NAN--- NOT a number  不能拿两个NAN相比,总不相等。
    isNAN(参数 )函数--作用:判断是不是NAN  ---true
    ---false
    ==: 先把两边的东西转换成一样的类型,然后在比较
    ===:不转换,直接比较  表示全等
    两个字符串:
    +:字符串连接   和数字相加
    -:数字相减
    闭包:子函数可以使用父函数的局部变量。不要过分考虑闭包这种情况
    三:命名规范:可读性-能看懂命名变量的含义
    规范性--符合规则
    对象命名--otext、obtn
    a--Array
    b-boolean
    f-float
    fn-function
    i-integer
    re-regexp
    v-variant  变体变量  不限定变量的类型
    匈牙利命名法---类型前缀&首字母大写
    四:兼容性问题
    arguments--存放参数  可变参参数不定,arguments可读性较差较差
    jQuery中的css()方法:既可以获取又可以设置
    style只能取行间的数据
    currentstyle  获取计算 后的样式  IE下可用  火狐不可用
    getcomputedstyle(oDiv,'true/0/abc/false')--火狐
    复合样式:background无法获取其复合样式,只能取
    backgroundcolor单一样式
    基本样式:width height
    封装性:将一些方法和变量封装到一个函数里面,需要用的时候直接调用即可
    shift()&unshift()--将第一个元素从数组中删除
    数组排序  sort()--js中只能用此种方法,只能认识字符串
    对整数排序--需要加入比较函数
    数组拼接--contact()
    xx.contact(yy)  --将yy接在xx后面
    join()--分隔符,数组变成字符串
    split()--拆分,将字符串变成数组
    splice(开始位置,长度)从开始位置删除自己及其后面的元素
    数组位置索引从0开始
    splice(开始位置,长度,‘aaa’,'bbb')
    可插入元素和替换元素
    五:DOM的相关知识
    父.insertBefore(插入的节点,谁之前插入)
    文档碎片--理论上可以提高DOM的性能--IE8略微提高一点
    childNodesb   存在兼容性问题,可用children来代替--可兼容
    IE---正常
    FF---将空行也算一个节点
    NodeType---节点类型
    1--元素节点
    3--文本节点
    绝对定位是根据有定位的父级来div定位
    ---最终是HTML为终极定位
    firstChild--IE下用
    firstElementChild--FF下可用
    首尾子节点
    兄弟节点
    setAttribute();
    getAttribute();
    removeAttribute();
    *代表所有标签
    document.write()---清空网页内容,输出东西
    window.location---读取和写窗口的位置即网址
    IE---event.clientX
    FF--ev.clientX
    a||b---对于或运算符,先碰上那个就输出那个

    六:键盘事件
    事件冒泡---子级发生事件以后,将事件传递给父级。
    取消冒泡事件---ev.cancelBubble=true;
    onclick=onmousedown+onmouseup
    onpress=onkeydown+onkeyup
    ctrlkey   shiftkey  altkey
    ]
    如果想要测试键盘的键码,直接给文档加事件,然后输出来就可以了!

    即:document.onkeydown=function(ev)

    {

    alert(ev.keyCode);

    }

    七:默认行为及常见的语法知识点

    return  false  ---阻止默认行为
    cookie  中的=号  意味着添加
    prototype---原型  功能类似于class  给一类元素加样式
    json里面可放任何的东西,包括函数,也可使用this,适用于单个对象
    PHP中 $this->name调用属性
    PHP 中   parent::构造函数;来调用父类的构造函数  ::表示超引用域符号
    原型链---通过原型来继承父级的方法
    数组里的所有赋值都是引用
    instanceof   用来判断是不是某一个类的实例(对象)
    Math   不需要实例化(new) ,静态对象
    Array   需要实例化          动态对象
    表格里面最好附带上Tbody,tfoot  thead等用法
    str.substring(t1,t2)//不包括结束位置
    window.navigator.userAgent//获得浏览器的类型
    图片预加载---创建一个新的img对象,然后加上onload和onerror事件。
    offsetLeft/offsetTop---指的是 距离它父级的高和左边距比如div
    toFixed(2)---保留两位小数
    alt是用于在图片不能显示的时候显示的文本提示
    title是在鼠标移到元素上时显示的文本提示

    八:字符串总结

    indexOf(str)--找字符第一次出现的的位置---与search()用法类似
     
    lastIndexOf--找最后出现的位置

    indexof与search的区别?
    search可兼容正则表达式
     

    str1.localeCompare(str2)--按照当地人的习惯比较
    出现-1---表示第一个str1比第二个str2小


    slice(开始位置,结束位置)--不包括结束位置
    slice(开始位置)--从开始位置取到结束位置
    substring(开始位置,结束位置)
    substring(开始位置)--从开始位置取到结束位置

    两者有何区别?

    substring-------给出负数的话,会自动将其变为substring(-1)--变为0
    slice(-1)--------表示倒数第一个)。

    substr(开始位置,结束位置)--包括结束位置,把负数变为0

    split()----拆分字符串,将其变为数组
    toLowerCase/toUpperCase--转换大小写

    九:数组的用法

    arr.pop()--从尾部删除
    arr.push()--从尾部增加
    arr.unshift()--从头部添加
    arr.shift()--从头部删除
    splice(开始,长度,元素)--先删除一段元素,再添加一段元素
    arr.solice(2,0,'a','b',.....)--再某个位置插入元素
    arr.solice(2,3)--从第二个位置开始,包括第二个位置,删除后面三个数,包括开

    始的数。
    join()--作用与split相反 --arr.join(','),变为1,2,3,4将其链接起来
    sort()--排序,大写在小写的前面-大写的比小写ASCELL码低
    |
    注意:数组排序是一位一位的与其它比较。个数位数

    一般用:arr.sort(function(num1,num2)--针对数字比较
    {
       if(num1>num2){return -1;}
    else if(num1>num2){return 1}
    else{return 0;}--简写为:return num1-num2;
    })

    --针对字符串
    arr.sort(function(str1,str2){
      return str1.localeCompare(str2);--从小到大排序

    })
    reverse()--反转数组,将数组反过来输出
    concat--连接数组
    arr1.concat(arr2)--真正将两个数组连接起来
    toString()--转换为字符型
    数字的toString--后面可带参数,表示转换为多少进制的数字
    arr.toString(16);
    数组去重--[1,2.3,1,4]将重复的去掉,
    方法:另外准备一个数组,每次仍进去时,先检查是否重复。
    数组复制:
    var arr2=arr1;数组引用,arr2发生改变时,arr1收到影响
    var arr2=arr1.concat([]);--直接将数组复制,性能更高

    十:闭包的问题

    1.什么闭包?
      A.函数嵌套函数,内部函数可以引用外部函数的参数和变量,不被JS中垃圾收回
    2.闭包的好处,应用在哪里?
      A.希望一个变量长期驻扎在内存当中
      B。避免全局变量的干扰。
      C。私有成员的存在
    3.闭包要注意的问题?
      IE下会引发内存泄露。
      比如:
      window.onload=function()
    {
       var oDiv=document.getElementById('div1');
       oDiv.onclick=function()
       {
        alert(oDiv.id)--这种情况外部和内部相互调用,只用当关闭浏览器时,才

    能释放内存,而如果调到另外一个页面时,则会占用CPU的内存。
        }
        window.onunload=function()
       {
        oDiv.onclick=null;
       }

    }
    JS中的垃圾回收机制--
    function aaa()
    {
      var a=8;
    }
    alert();---单独的函数调用后被JS中的垃圾回收机制收回

    比如:function aa()
    {
    alert('11');
    }
    aa();
    |
    改写为:(function aa()
    {
    alert('11');
    })();--函数加括号后,变为函数表达式。然后立马去调用--此为模块化调用

    写法:
    for(var i=0;i<ali.length;i++)
    {
          (function(i){
        ali[i].onclick=function()
            {
                    alert(i);
             }
           })(i);--如果不这样写,将得不到i的值。
    }

  • 相关阅读:
    ASP.NET WebAPI2 发布之后404 Not Found
    WPF MVVM TreeView 实现 右键选中 右键菜单
    Asp.Net MVC4+EF6 Code First 权限管理系统 源码下载
    C# Winform DataGrid 绑定List<> Or ObservableCollection<> 类型无法自动刷新问题
    VMWare 安装时报错 tools-windows.msi failed报错解决办法
    HashMap 扩容机制
    POI解析Excel封装工具
    poi API
    简单echars说明和使用
    比较运算符compareTo()、equals()、==之间的区别
  • 原文地址:https://www.cnblogs.com/jtjds/p/5246914.html
Copyright © 2011-2022 走看看