在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. intellij IDEA2016如何打可执行的jar包

    尊重版权,原文地址:https://blog.csdn.net/liufeilong_sean/article/details/75254875 操作步骤: 1.在File -> project ...

  2. EmWin 如何显示汉字 不用在文件中使用编码

    1. Font Converter for emWin 生成C文件字库 1.1 新建文件 1.2 选择字体 1.3 为了减小C文件体积,这里只加入自己需要的汉字,先把所有字体取消选择. 1.4 新建一 ...

  3. 用processing生成屏保程序

    想法 利用随机数控制圆圈的大小.位置以及颜色,可以产生随机的美感. 让小球动起来,并且在屏幕边界处产生反弹效果. 代码 1: float circle_x = (float) 0.0; 2: floa ...

  4. 马士兵对话京东T6阿里P7(薪水):月薪5万,他为何要离职?

    马士兵大佬你知道吗? 你竟然不知道?你怎么可能不知道!你不知道是不可能的! 记得自己的第一行Java代码,你的Hello World是跟着谁学的吗?我的就是马士兵老师! 马士兵是唯一一个在当时讲课是让 ...

  5. CTU OPEN 2017 Go Northwest! /// 简单公式

    题目大意: 给定n个点 求任选一对点连成的直线斜率为1或-1的概率 对于点(x1,y1) 和 点(x2,y2) 斜率 k=(y1-y2)/(x1-x2) 当k=1 则 (y1-y2)/(x1-x2)= ...

  6. Unity应用怎么暂停(Pause)

    非常多时候,应用程序或者是游戏须要用上暂停功能,unity提供了不少便捷的方式,列在以下: 1.在editor中,按下pausebutton就可以暂停 2.假设在代码中控制,能够通过设置Time.ti ...

  7. C++之循环体内变量

    今天做PAT题目时候看人家解答: #include <cstdio> #include <set> using namespace std; int main() { int ...

  8. C语言交换两个数的值

    #include<stdio.h> int main() { //交换两个数的值 // 方法一 可读性最好 ; ; int temp ; temp = a; a = b; b = temp ...

  9. Centos7系统安装笔记

    Centos 7安装步骤 对应参数,可修改 1.一台主机对应一个服务器,需要先安装Centos 7(内网)2.F12 boot 进入boot模式3.选择安装方式:USE或其他4.根据底部文字提示,点击 ...

  10. spark on yarn提交任务时报ClosedChannelException解决方案

    spark2.1出来了,想玩玩就搭了个原生的apache集群,但在standalone模式下没有任何问题,基于apache hadoop 2.7.3使用spark on yarn一直报这个错.(Jav ...