javascript-03

时间:2024-01-14 17:42:56

1.Object
   |-1.var  变量=new Object();
         |-变量.自定义的属性='值';
     |-变量.自定义名称=function(){}
   |-2.var 变量={
                 属性:属性值,
                 ....,
         方法名:function(){  ... }
         };
2.数组
   |-1.var 变量=new Array();
   |-2.json: var 变量=[val1,...,valn];

3.字符串
   |-API

4.Date类型
   |-var 变量=new Date();

5.Math对象
   |-random
   |-round
   |-floor
   |-ciel
   |-abs
   |-sqrt

6.事件处理模型(观察者设计模式)
    |-三个要素
       |-事件:event
       |-事件源:触发事件的标签
       |-监听器:事件监听属性

7.常见的事件监听属性
  |-onclick:单击
  |-ondblclick:双击
  |-onfocus:获得焦点
  |-onblur:失去焦点
  |-onmouseover:鼠标移入
  |-onmouseout:鼠标移出
  |-onmouseleave:鼠标移出,对于子节点失效的
  |-onmousemove:鼠标移动
  |-onmousedown:鼠标按下
  |-onmouseup:鼠标松开
  |-onchange:失去焦点同时内容发生改变触发(使用在select)
  |-onload:页面加载完成之后执行
  |-onsubmit:在表单提交的时候执行
  |-onscroll:页面滚动的时候触发

8.通过JS实现表单的前端验证
     |-js中正则表达式的定义 : /正则表达式的语法/;
        |-^ 开始
    |-$ 结束
    使用[]表示字符
       |-[1-9]:字符只能从1到9中取一个
       |-[0-9a-zA-Z]:表示字符只能从指定的范围获取
        预处理的字符集
       |-\d:等价于[0-9],表示数字
       |-\D:除了数字以外
       |-\s:表示空白
       |-\S:表示非空白
       |-.:表示任意字符
       |-\w:等价于[0-9a-zA-Z_]
       |-\W
        使用{}定义次数
       |-{n,m}:表示可以出现n到m次
       |-{n,}:表示n次以上
        预处理的次数符号
       |-?:等价于{0,1},零次或者1次
       |-*:等价于{0,},零次以上
       |-+:等价于{1,},1次以上
       
9.通过JS实现DOM的操作(动态效果)
   |-DOM:document Objet module:文档对象模型
      |-底层的数据结构是:树
         |-采用树的结构,对节点进行操作(插入,删除)方便
   |-获得指定的标签
      |-通过标签名获得
         |-document.getElementsByTagName(标签);//返回值为数组
        |-document描述DOM树结构的对象
         |-document.getElementById(id值);//根据id值获得指定的元素  
       
   |-DOM模型中节点的导航
      |-domObj.childNodes:表示获得对象的子节点,对于换行认为是文本节点
      |-domObj.firstChild:获得第一个子节点
      |-domObj.lastChild:获得最后一个子节点
      |-domObj.nextSibling:获得下一个兄弟节点
      |-domObj.previousSibling:获得上一个兄弟节点
      |-domObj.parentNode:获得当前对象的父节点
      
   |-DOM模型中节点的创建
      |-document.createElement(标签名);//创建元素
      |-document.createTextNode(文本信息);//创建文本节点
      |-obj.appendChild(childObj);//将childObj追加到obj当中,作为最后一个子节点
      |-obj.removeChild(childObj);//移除指定的子节点
      |-obj.insertBefore(newNode,target);//将newNode插入到target的前面
      |-obj.replaceChild(newNode,target);//将newNode替换target

相关文章