在JS代码中编写事件一定要保证页面在浏览器中加载时会把事件加载进页面

事件:在代码中可以通过一个动作来触发另一个行为的总称
  A:事件的编写方式1
    HTML标签中添加 onxxxx = "函数";
  B:JS代码中获取事件源对象,更好的解耦合
    对象.onxxxx = function(){}
      本质就是为某个对象赋值函数
      事件类型:
        1.获得焦点事件 ---- onfocus
        2.失去焦点事件 ---- onblur
        3.鼠标移入 onmouseover
        4.鼠标移除 onmouseout
        5.下拉列表改变事件 onchange

关键字:this
  this是当前对象,就是和当前方法绑定谁谁就是this对象
  HTML代码中哪个标签中有绑定事件,哪个就是当前对象
  JS代码中 对象.onxxxx = function(){
        函数中的this就是这个对象}

DOM:
所有的标签型文档都可以看成一个DOM对象,有一颗DOM树,里面的所有元素,属性,文本都可以看成一个节点

获取标签对象的方式:
  1.document.getElementById("id值");
  2.document.getElementsByTagName("标签名");
  3.document.getElementsByClassName("类名");
  4.document.getElementsByName("name值");
  在HTML文档中,只承认了ID是一个唯一属性,所以其它的都是返回数组

数组:
  创建数组
    var arr1 = new Array();//创建一个空数组
    var arr2 = new Array(3);//创建一个指定长度的数组
    var arr3 = new Array("a","b","c");
    var arr4 = [1,2,3];
  使用:
    arr.length //长度
    arr[索引] = "新值"; //使用和赋新值
      1.不存在越界:undifind
      2.长度可变
      3.数组的元素数据类型可以不一致
  创建使用二维数组:大盒子嵌套小盒子
    var out = new Array();
    out[0] = new Array("a","b");
    out[1] = new Array(1,2,3);
    out[2] = "3";

event对象:event.clientX event.clientY 得到对象的坐标
在JS的代码中可以直接给文本值赋值标签,可以直接解析
  对象.innerHTML = "<font id="id1" color="red">这是JS设置的文本和CSS组合</font>"
  创建标签对象节点:createElement("标签名");
  创建文本节点:createTextNode("文本内容");
  appendChild:为标签添加子节点(移动节点)
  对象.children 返回一个数组,存储的是此节点下面的子节点元素

JS中的事件、数组、节点对象处理的更多相关文章

  1. JS中的事件&对象

    一.JS中的事件 (一)JS中的事件分类 1.鼠标事件 click/dblclick/onmouseover/onmouseout 2.HTML事件 onload/onscroll/onsubmit/ ...

  2. JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象

       前   言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...

  3. js中的事件,内置对象,正则表达式

    [JS中的事件分类] 1.鼠标事件: click/dbclick/mouseover/mouseout/mousemove/mousedown/mouseup 2.键盘事件: keydown: 键盘按 ...

  4. JS中如何判断对象是对象还是数组

    JS中如何判断对象是对象还是数组 一.总结 一句话总结:typeof Array.isArray === "function",Array.isArray(value)和Objec ...

  5. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  6. DOM 以及JS中的事件

    [DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...

  7. 细看JS中的BOM、DOM对象

                                        DOM对象模型  DOM(Document Object Model),是指文档对象模型,是W3C组织推荐的处理可扩展标志语言的 ...

  8. 从零开始的JS生活(二)——BOM、DOM与JS中的事件

    上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...

  9. JS中的事件以及DOM 操作

    [DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...

  10. 怎么理解js中的事件委托

    怎么理解js中的事件委托 时间 2015-01-15 00:59:59  SegmentFault 原文  http://segmentfault.com/blog/sunchengli/119000 ...

随机推荐

  1. 什么是AngularJs?特点是什么?和JQuery什么区别和联系

    什么是AngularJs? AngularJs是js框架,集中操作数据,不关注Dom操作,适用于以数据操作为主的的SPA(单页应用). 它的特点 采用MVC模型 双向数据绑定 依赖注入 模块化 与jQ ...

  2. CentOS 7.4安装telnet服务端

    CentOS 7.4安装telnet服务端 安装xinetd服务 # yum -y install xinetd 安装telnet-server # yum -y install telnet-ser ...

  3. Ubuntu14.04.1LTS不能上网解决方法之一

    我们在装好了Ubuntu之后,打开浏览器,显示Server not found. 1.点击网络图标,显示如下: 2.进入etc/NetworkManager,找到 Networkmanager.con ...

  4. OpenGL学习——自定义Shader工具类

    从文件读取Vertex Shader 和 Fragment Shader的工具类. 代码如下: Shader.h #ifndef Shader_h #define Shader_h // GLEW # ...

  5. vue撸的demo

    之前做过一个layui+flask的测试平台,后来听说vue挺火,学了下,做个记录 一.想法 主要想开发几大功能,方便以后复用 1.工作中常常需要记录知识,所以我决定会做一个类似markdown笔记的 ...

  6. robotframework+python3+selenium之web相关关键字---第二集

    1.F5可查看所有关键字,如图: 2.浏览器相关关键字: 2.1  Open Browser    https://www.baidu.com  chrome    # 打开浏览器,rf默认使用火狐浏 ...

  7. java反射技术主要实现类有哪些,作用分别是什么

    Java反射技术主要实现类有哪些,作用分别是什么? 在JDK中,主要由以下类来实现Java反射机制,这些类都位于java.lang.reflect包中 1)Class类:代表一个类 2)Field 类 ...

  8. spring boot 项目的创建

    一. 进入https://start.spring.io 快速创建项目 二. 利用eclipse sts插件创建项目 1. 安装sts插件 进入https://spring.io/tools3/sts ...

  9. spring 转换器和格式化

    Spring总是试图用默认的语言区域将日期输入绑定 到java.util.Date.假如想让Spring使用不同的日期样 式,就需要用一个Converter(转换器)或者 Formatter(格式化) ...

  10. 第十一次 LL(1)文法的判断,递归下降分析程序

    1. 文法 G(S): (1)S -> AB (2)A ->Da|ε (3)B -> cC (4)C -> aADC |ε (5)D -> b|ε 验证文法 G(S)是不 ...