zoukankan      html  css  js  c++  java
  • JS高级学习历程-1

    JS高级-34-昨天内容回顾     时间:2015-5-11

    1、DOM获取元素节点

    document.getElenmentById(id 属性值)                                   具体元素节点对象                    

    document.getElenmentsByTagName(tag 标签名称 div ul li)        数组列表

    document.getElenmentsByName(Name 属性值)                       数组列表

    2、DOM获取属性节点及属性操作

    node.attributes;                   数组列表

    node.attributes.属性名称;       获取具体属性节点对象

    node.attribute['class'] 获得 class 属性节点

    属性操作

         操作w3c规定的属性

         node.属性名称;         获得属性信息

         node.属性名称=属性值;    修改属性信息

         操作 class属性,需要将其设置为className名称。

         node.className;

         操作w3c规定的 和 自定义的 属性

         node.getAttribute(属性名称);

         node.setAttribute(名称,值)

    3、DOM获得文本节点

    <div>hello</div>

    divnode.firstChild;       获得文本节点

    nodeType:

    1 -> 元素节点

    2 -> 属性节点

    3 -> 文本节点

    4 -> document文档节点

    lastChild;   childNodes   nextSibling   previousSibling   parentNode

    4、DOM各个节点创建、追加

    创建:

          元素节点 document.createElement(tag 标签名称)

          文本节点 document.createTextNode(文本内容)

          属性 node.setAttribute(属性名称,值)

    追加

          父节点.appendChild(子节点);

          父节点.insertBeFore(new,old);

          父节点.replaceChild(new,old);

    5、DOM节点删除和复制

    删除:

          父节点.removeChild(子节点)

    复制:

          节点.cloneNode(true 深层复制/false浅层复制);

    6、DOM操作css样式

     node.style.样式名称;   //获得样式属性信息

    node.style.样式名称=值;  //设置样式属性信息

    注意:

         ① 自能操作行内样式

         ② 操作符合属性(例如:background-color、border-left、margin-bottom),中横线去掉后边首字母大写,backgroundColor、borderLeft、marginBottom

    7、dom2 级方式事件设置

    主流浏览器

          node.addEventListener(类型、事件处理、事件流)

          node.removeEventListener(类型、事件处理、事件流)

        

          类型:click   mouseover   mouseout   focus   blur 等事件

          事件处理:匿名函数表达式、函数名称

      

         事件取消注意:

              ① 事件取消的参数 与 绑定的参数完全一致

              ② 事件处理必须是一个有名函数

        IE 浏览器

              node.attachEvent(类型,事件处理);

              node.detachEvent(类型,事件处理);

              类型:onclick   onmouseover   onmouseout  等等

              事件流:只有一种冒泡型事件流

    8、事件流

         有许多节点,他们的物理位置彼此嵌套,他们还有相同的事件,一旦一个节点的事件被触发,会把其他节点的相同时间也给触发,连续多个事件同时顺序执行就是一个“事件流”。

    9、事件对象获取及相关作用

        事件对象获取:

              ① 主流浏览器  node.onclick = function(evt){ 操作 evt }

              ② IE方式 windows.event;

    事件对象作用:

    ① 获得鼠标位置(clientX   clientY   pageX   pageY   screenX   screenY)

    ② 获得键盘被按下的情况     event.keyCode

    ③ 阻止事件流的产生

        event.stopPropagation();      主流浏览器

        event.returnValue = false;    IE浏览器

    10、加载事件

          相关的js代码要等待全部的 html 和 css 都加载到内存之后再执行,这个过程称为“加载过程”,可以利用“加载事件”执行该过程

          window.onload = function(){ 执行具体加载过程 }

          window.onload = fn;

       

  • 相关阅读:
    团队作业4——第一次项目冲刺(Alpha版本)4th day
    团队作业4——第一次项目冲刺(Alpha版本)3rd day
    团队作业4——第一次项目冲刺(Alpha版本)2nd day
    团队作业4——第一次项目冲刺(Alpha版本)1st day
    团队作业3——需求改进&系统设计
    团队作业2——需求分析&原型设计
    团队作业1——团队展示
    html、css 【珍藏】
    ms sql 经典语句【珍藏】
    网页前段常用代码及网页自适应
  • 原文地址:https://www.cnblogs.com/daipianpian/p/4494139.html
Copyright © 2011-2022 走看看