zoukankan      html  css  js  c++  java
  • JavaScript.表单操作.节点.事件

    一、表单操作

      1.获得表单引用

        通过直接定位的方式来获取

          document.getElementByid();

          document.getElementsByName();

          document.getElementsByTagname();

        通过集合的方式来获取应用

          document.forms[下标]

          document.forms(“name”)

          document.forms.name

        通过name直接获取(只适应于表单)

          document.name

      2.获取表单元素的应用

        直接获取

          document.getElementByid();

          document.getElementsByname();

          document.getElementsTagname();

        通过集合来获取

          表单对象.elements 获取表单里面所有元素的集合

          表单对象.elements[下标]

          表单对象.elements[“name”]

          表单对象.element.name

        直接通过name的形式

          表单对象.name

      3.表单元素共同的属性和方法

        获取表单元素的值

          表单元素对象.value  获取或是设置值

        属性

          disabled  获取或设置表单控件是否禁用 true  false

          form    指向包含本元素的表单的引用

        方法

          blur()  失去集点

          focus()  获取焦点

      4.文本域

          <input type=“text”>

          操作文本值的域

          value  属性设置 或者获取值

      5.单选按钮

          checked  返回或者设置单选的选中状态  (true选中、false未选中)

          value属性   获取选中的值,必须先判断选中状态

      6.多选按钮

          checked  返回或者设置单选的选中状态  (true选中、false未选中)   

          value    获取选中的值,必须先判断选中状态

      7.下拉框

          selecetd      设置返回或下拉框的选中状态  (true选中、false未选中)

          selectedIndex  设置或返回下拉框被选中的索引号

      8.文本区域

          <textarea></textarea>

          value  操作值

      9.验证表单

        事件

          onsubmit  当表单提交的时候触发事件

          onblur   

          onfocus

          onchange

        return false  阻止事件的默认行为(适用于所有事件)

       10.提交方法

          表单的方法

          表单对象.submit()

    节点

      根据dom、HEML文档中的每个成分都是一个节点

      DOM是这样规定的:整个文档是一个文档节点

                每个HTML标签是一个元素节点

                包含在HTML元素中的文本是文本节点

                每一个HTML属性是一个属性节点

                注释属于注释节点

      一、如何获得节点引用

        1.旧的获取节点引用的方式

          getElementByID ()

          getElementByname()

          getElementByTagname()  //返回带有指定标签名的对象集合

        劣势:1.浪费内存

           2.逻辑性不强

        2.通过节点关系属性获得节点的引用

            对象.parentNode获得父节点的引用

            对象.childNodes获得子节点的集合

            对象.firstchild获得第一个子节点

            对象.lastchild获得最后一个子节点

            对象.NextSibiling获得下一个兄弟节点的引用

            对象.previousSibiling获得上一个兄弟节点的引用

          劣势:兼容性不好

             FF会把例如</div>后面所有的空白节点都读成一个子节点

             IE会把最后一个空白的节点读成子节点

      二、节点的信息属性

        节点类型、节点名、节点值

        nodeType(数值 )nodename、nodevalue

        nodeType 属性返回以数字值返回指定节点的节点类型

        如果节点是元素节点,则nodetype属性将返回1

        如果节点是属性节点,则nodetype属性将返回2

        元素节点1  标签名  null

        属性节点2  属性名  属性值

        文本节点3  #text文本

        注释节点8  #comment  注释的文本

        文档节点9   #document null

      三、兼容性的方法

    JavaScript增、删、改、查实例

      一、创建节点

        1.创建元素节点

          document.createElements(“元素标签名”)

        2.创建属性节点

          document.createAttribute(“属性名”)

          对象.属性=“属性值”

          对象.getAttribute(属性名,属性值)

          对象.setAttribute(属性名,属性值)

        3.创建文本节点

          对象.innerHTML=“”

          document.createTextNode(“文本”)

      二、追加到文本当中

        父对象.appandChild(追加的对象)插入到最后

        父对象.insertBefore(要插入的对象,之前的对象)插入到最后

      三、修改替换节点

        父对象.replaceChild(要修改的对象,被修改的);

      四、删除节点

        父对象.removeChild(删除的对象)

        如果确定要删除节点,最好也清空内存  对象=null;

    JavaScript事件基础和事件绑定

      一、事件驱动

        1.事件

          JavaScript侦测到用户的操作或是页面的一些行为(怎么发生的)

        2.事件源

          引发事件的元素。(发生在谁身上)

        3.事件处理程序

          对事件处理的程序或函数(发生了什么事)

      二、事件的分类

        1.鼠标事件

          onclick

          ondblclick

          onmousedown

          onmouseup

          onmousemove

          onmouseover

          onmouseout

        2.键盘事件

          onkeydown

          onkeyup

          onkeypress  鼠标按下或按住

        3.表单事件

          onsubmit

          onblur

          onfoucs

          onchange

        4.页面事件

      三、如何绑定事件

        1.在脚本中绑定

        2.直接在HTML元素绑定

        3.<script for=“two” event=“onclick”>

         alert (“我是div”)

         </script>

      四、同一个事件绑定多个事件处理程序

        1.自己写

        2.IE:

         对象.attachEvent(“事件(on)”,"处理程序")  添加

         对象.dettachEvent(“事件(on)”,"处理程序")  删除

         FF:

         对象.addEventListenet(“事件”,”处理程序”,布尔值)  添加

         对象.removeEventListenet(“事件”,“处理程序”,布尔值)  删除

        Mozilla中:

         addEventListener的使用方式

         target.addEventListener(type,listener,useCapture)

           target  :文档节点、document、window、XLMhttpRequest

           type  :字符串、事件名称、不含“on”。比如“click”、“mouseover”、“keydown”

           listener:实现了EVentListener接口或者是JavaScript中的函数

           useCapture:是否使用捕捉,一般使用false。

        IE中:

         target.attachEvent(type,listener)

         target  :文档节点、document、window、XMLhttprequest

         type:字符串、事件名称,含“on”。例如“onclick”“onmouseover”“onkeydown”

         listener:实现了EventListener接口或者是JavaScript函数

    JavaScript事件对象实例

      一、事件对象

        用来记录一些事件发生时的相关的信息的对象

        1.只有当事件发生的时候才产生,只能在处理函数内部访问

        2.处理函数运行结束后自动销毁

      二、如何获取事件对象

        IE:window.event

        FF

         对象.on事件=function(e){ }

      三、事件对象的属性

        1.关于鼠标事件的事件对象

          相对于浏览器的位置

          clientX当鼠标事件发生的时候,鼠标相对于浏览器X轴的位置

          clientY当鼠标事件发生的时候,鼠标相对于浏览器Y轴的位置

          相对于屏幕的位置

          screenX当鼠标事件发生的时候,鼠标相对于屏幕x轴的位置

          screenY当鼠标事件发生的时候,鼠标相对于屏幕Y轴的位置

          相对于事件的位置

          IE:

          offsetX当鼠标事件发生时,鼠标相对于事件源X轴的位置

          offsetY当鼠标事件发生时,鼠标相对于事件源Y轴的位置

          FF:

          layerX当鼠标事件发生时,鼠标相对于事件源X轴的位置

          laterY当鼠标事件发生时,鼠标相对于事件源Y轴的位置

        2.关于键盘事件的事件对象

          keycode  获的事件的键盘码(空格32、回车13、上38下40左37右39)

          altkey  判断alt健是否被按下 按下是true,否则是false布尔值

          ctrlkey

          shiftkey

          type用来检测事件类型,主要是用于多个事件通用一个事件处理程序的时候

    JavaScript事件流和实例应用

      当页面元素触发事件的时候,该元素的容器以及整个页面都会按照特定

      顺序相应该元素的触发事件,事件传播的顺序叫做事件流程

      一、事件流的分类

        1.冒泡型事件(所以浏览器都支持)

         由明确的事件源到最不确定的事件源依次向上触发

        2.捕获型事件

         不确定的事件源到明确的事件源一次向下触发

         addEventListener(事件、处理函数、true)

         addEventListener(事件、处理函数、false)

      二、阻止事件流

        IE:

          事件对象.cancelBubble=true;

        FF:

          事件对象.stopPropagation();

      三、目标事件源的对象

        IE:事件对象.src.Element

        FF:事件对象.target

  • 相关阅读:
    PHP的资源类型
    windows 配置 apache的多个站点
    php 压缩数据存储
    php统计图类库JpGraph
    php之ThinkPHP的memcached类的修改
    linux 安装报错:pkg-config not found
    Mysql清空表(truncate)与删除表中数据(delete)的区别
    【MySQL】查看MySQL配置文件路径及相关配置
    phper
    http 同步异步请求
  • 原文地址:https://www.cnblogs.com/jacky912/p/10342097.html
Copyright © 2011-2022 走看看