onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。
onfocus        元素获得焦点。               // 练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。
onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击，使用的对象是form。
 
 
 
 
 
结合计时器的事件示例，input框里面动态显示时间:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="x-ua-compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>定时器</title>

  <script>  //当js代码中有找标签的操作的时候，别忘了页面加载的时候的顺序，以防出现找不到标签的情况出现，我们可以将这个script标签放到body标签最下面，或者用window.onload，这里我没有放，你们练习的时候放到下面去

    var intervalId; //用来保存定时器对象，因为开始定时器是一个函数，结束定时器是一个函数，两个函数都是操作的一个定时器，让他们互相能够操作这个定时器，就需要一个全局变量来接受一下这个对象

　　
　　
　　//把当前事件放到id为i1的input标签里面

    function f() {

      var timeStr = (new Date()).toLocaleString(); // 1.拿到当前事件

      var inputEle = document.getElementById("i1");// 2.获取input标签对象

      inputEle.value = timeStr;  //3.将事件赋值给input标签的value属性

    }

　　//开始定时任务

    function start() {

      f();

      if (intervalId === undefined) { //如果不加这个判断条件，你每次点击开始按钮，就创建一个定时器，每点一次就创建一个定时器，点的次数多了就会在页面上生成好多个定时器，并且点击停止按钮的时候，只能停止最后一个定时器，这样不好，也不对，所以加一个判断

        intervalId = setInterval(f, 1000);

      }

    }
    //结束定时任务

    function end() {

      clearInterval(intervalId); //　清除对应的那个定时器

      intervalId = undefined;

    }

  </script>

</head>

<body>

<input type="text" id="i1">

<input type="button" value="开始" id="start" onclick="start();">

<input type="button" value="结束" id="end" onclick="end();">

</body>

</html>

　　　　事件示例：

　　　　　　搜索框示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>搜索框示例</title>

</head>

<body>

    <input id="d1" type="text" value="请输入关键字" onblur="blur()" onfocus="focus()">

<script>

function focus(){  //如果在标签中写的blur()等方法，没有传入this参数，那么我们就需要自己来获取一下这个标签，例如下面的getElementById('d1')

    var inputEle=document.getElementById("d1");

    if (inputEle.value==="请输入关键字"){

        inputEle.value="";
　　　　 //inputEle.setAttribute('value','')

    }

}

function blur(){

    var inputEle=document.getElementById("d1");

    var val=inputEle.value;

    if(!val.trim()){

        inputEle.value="请输入关键字";

    }

}

</script>

</body>

</html>

　　　　　　select联动：选择省份，自动列出所有的城市，例如：选择河北省就显示河北省所有的市

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="x-ua-compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>select联动</title>

</head>

<body>

<select id="province">

  <option>请选择省:</option>

</select>

<select id="city">

  <option>请选择市:</option>

</select>

<script>

  data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};

  var p = document.getElementById("province");

  var c = document.getElementById("city");

  //页面一刷新就将所有的省份都添加到select标签中

  for (var i in data) {

    var optionP = document.createElement("option"); //创建option标签

    optionP.innerHTML = i; //将省份的数据添加到option标签中

    p.appendChild(optionP);//将option标签添加到select标签中

  }
  //只要select中选择的值发生变化的时候，就可以触发一个onchange事件，那么我们就可以通过这个事件来完成select标签联动

  p.onchange = function () {
    //1.获取省的值

    var pro = (this.options[this.selectedIndex]).innerHTML;//this.selectedIndex是当前选择的option标签的索引位置，this.options是获取所有的option标签，通过索引拿到当前选择的option标签对象，然后.innerHTML获取对象中的内容，也就是省份

    //还可以这样获取省：var pro = this.value;
    var citys = data[pro]; //2. 通过上面获得的省份去data里面取出该省对应的所有的市

    // 3. 清空option

    c.innerHTML = ""; //清空显示市的那个select标签里面的内容

　　

    //4.循环所有的市，然后添加到显示市的那个select标签中

    for (var i=0;i<citys.length;i++) {

      var option_city = document.createElement("option");

      option_city.innerHTML = citys[i];

      c.appendChild(option_city);

    }

  }

</script>

</body>

</html>

java script DOM BOM的更多相关文章

  1. web前端-----JAVA Script（一）

      JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase ...

  2. 10张思维导图带你学习Java​Script

    10张思维导图带你学习Java​Script   下面将po出10张JavaScript相关的思维导图. 分别归类为: JavaScript变量 JavaScript运算符 JavaScript数组 ...

  3. Java Script 学习笔记 -- 基础知识

    Java script 概述 java Script 的简介 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为 ...

  4. Java Script的认识

     JavaScript的诞生 1.Java Script诞生于1995年.由Netscape(网景公司)的程序员Brendan Eich(布兰登)与Sun公司联手开发一门脚本语言,  最初名字叫做Mo ...

  5. Java Script 编码规范【转】

    Java Script 编码规范 以下文档大多来自: Google JavaScript 编码规范指南 Idiomatic 风格 参考规范 ECMAScript 5.1 注解版 EcmaScript ...

  6. Atitit. Java script 多重多重catch语句的实现and Javascript js 异常机制

    Atitit. Java script 多重多重catch语句的实现and Javascript js 异常机制 1. 语法错误(ERROR)和运行期错误(Exception) 1 2. 错误类型判断 ...

  7. js初级DOM&BOM知识点总结

    第一章 js的组成DOM BOM ECMAScript javaScript 是一种直译是脚本语言 js语言特点 .脚本编写语言 .基于对象的语言 .简单性 .动态性 .安全性 .跨平台性 C/S是C ...

  8. 前端基础 DOM & BOM

    推荐阅读:http://www.cnblogs.com/yuanchenqi/articles/6893904.html#_label3 BOM对象 window 对象 所有浏览器都支持 window ...

  9. java script第一篇（按钮全选的实现）

    今天刚学了java script,记录下学习新知识的点滴.以下是操作步骤.鉴于我是初级者,如有错误,恳请读者指正.万分谢谢. 1.新建一个文档(用NotePad软件,为了使得在浏览器中打开不是乱码,在 ...

随机推荐

  1. E20181030-hm

    conquer  vt. 征服; 克服; 攻克; 打败(敌人);  vi. 得胜,胜利; recur vi. 复发; 重现; 再发生; 回想; recurrence n. 复回,重现; 反复,隐现; ...

  2. 萌新笔记之二叉搜索树(BST)

    前言,以前搞过线段树,二叉树觉得也就那样= =.然后数据结构的课也没怎么听过,然后下周期中考... 本来以为今天英语考完可以好好搞ACM了,然后这个数据结构期中考感觉会丢人,还是好好学习一波. 二叉搜 ...

  3. lightoj1001【简单题】

    题意: 一个人的值不能超过10: #include<stdio.h> #include<queue> #include<string.h> #include< ...

  4. hdu3949XOR（线性基）

    传送门 不知道线性基是什么东西的可以看看蒟蒻的总结 题目大意:求一堆数字能异或出的第$k$大的数是多少 线性基求第k大好珂怕…… 据大佬们说就是把$k$给二进制拆分,如果$k$的第$i$位为1,那么$ ...

  5. GenericKeychain

    KeychainItemWrapper是apple官方例子“GenericKeychain”里一个访问keychain常用操作的封装类,在官网上 下载了GenericKeychain项目后,只需要把“ ...

  6. 用生产者消费模型爬取智联招聘python岗位信息

    爬取python岗位智联招聘 这里爬取北京地区岗位招聘python岗位,并存入EXECEL文件内,代码如下: import json import xlwt import requests from ...

  7. js对数组处理（数组里边相同元素提取成map）

    1.数组里边相同元素提取成map,并以‘’,‘’分隔 例如:var arr = [{a:"xx",b:''xxx''},{a:"xxx",b:''xxxxx'' ...

  8. C#递归得到特定文件夹下问件

    List<String> listFile = new List<String>(); public void director(string path) { //绑定到指定的 ...

  9. C笔记列表

    笔记列表 指针是一个变量,其值为另一个变量的地址,即,内存位置的直接地址.就像其他变量或常量一样,您必须在使用指针存储其他变量地址之前,对其进行声明. 要理解指针就要先理解计算机的内存.计算机内存会被 ...

  10. 51Nod 1098 最小方差 (数论)

    #include <iostream> #include <cstdio> #include <algorithm> using namespace std; ty ...