js相关的常用事件

加载事件

  • onload()：当页面加载完毕后触发的事件

    鼠标悬停事件

  • onmouseover()：鼠标移入事件

  • onmouseout()：鼠标移出事件
  • onblur()：元素失去焦点时

  • onfocus()：获得焦点时

    点击事件

  • onclick()：点击后发生的事件，绑定在标签里

  • ondblclick()：双击某个对象时调用的事假

  • onsubmit()：提交表单时

    键盘事件

  • onkeydown()：某个键被按下后（不松手）

  • onkeypress()：某个键被按下并松开

  • onkeyup()：某个键松开时

    域变化事件

  • onchange()：域的内容被改变时

this关键字

函数内部使用this：代表当前操作的元素对象

setAttribute()设置属性

setAttribute(name,value)：给当前元素设置属性

document文档对象-操作DOM

获取元素

  • getElementById()：返回对拥有指定id的第一个对象的引用
  • getElementsByName()：返回带有指定名称的对象集合

  • getElementsByTagName()：返回带有指定标签名的对象集合

    创建元素

    如何创建

  • document.createElement()：创建指定名称的元素 - document.createElement(‘div’); - 返回一个element对象

  • document.createTextNode()：创建一个标签内的文本内容 - document.createTextNode(‘我是div’);

    如何实现

    element对象表示HTML文档中的元素(HTML称为标签)

  • element.appendChild()：向元素添加新的子节点，作为最后一个子节点

  • element.firstChild()：返回元素的首个子节点
  • element.getAttribute()：返回元素节点的指定属性值
  • element.innerHTML：设置或返回元素的内容
  • element.insertBefore()：在指定的已有的子节点之前插入新节点
  • element.lastChild()：返回元素的最后一个子元素
  • element.removeChild()：从元素中移除子节点

  • element.setAttribute()：把指定属性设置或更改为指定值

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.   <title>Document</title>
    7.   <script>
    8.       window.onload = function(){
    9.           init()
    10.       }
    12.       function init(){
    13.           let box = document.querySelector('.box');
    14.           let table = document.createElement('table');
    15.           let thead = document.createElement('thead');
    16.           let tr = document.createElement('tr');
    17.           let th = document.createElement('th');
    18.           let th2 = document.createElement('th');
    19.           let th3 = document.createElement('th');
    20.           let text = document.createTextNode('id');
    21.           th.appendChild(text);
    22.           text = document.createTextNode('name');
    23.           th2.appendChild(text);
    24.           text = document.createTextNode('age');
    25.           th3.appendChild(text);
    26.           tr.appendChild(th);
    27.           tr.appendChild(th2);
    28.           tr.appendChild(th3);
    29.           thead.appendChild(tr);
    30.           table.appendChild(thead);
    31.           box.appendChild(table);
    32.           // box.lastElementChild(table);
    33.       }
    34.   </script>
    35. </head>
    36. <body>
    37.   <div class="box">
    39.   </div>
    40. </body>
    41. </html>

    案例-实现级联选框

    image.pngimage.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <div>
  10.         <select id="province"></select>
  11.         <select id="city"></select>
  12.         <select id="county"></select>
  13.     </div>
  14.     <script type="text/javascript" src="./js/data.js"></script>
  15.     <script> 
  16.         window.onload = function(){
  17.             init()
  18.         }       
  19.         function init(){
  20.               //es6新特性，变量名名必须与对象中属性名一致（获取data对象属性的值，并赋给变量）
  21.             let {province_list,city_list,county_list} = data;
  22.                         //disabled selected实现该标签只显示不能选中
  23.             let options = '<option disabled selected>请选择</option>';
  24.             for(let province_key in province_list){
  25.                   //``模板样式，通过${}替换值
  26.                 options += `<option value="${province_key}">${province_list[province_key]}</option>`
  27.             }
  28.             let province = document.getElementById('province');
  29.             let city = document.getElementById('city');
  30.             let county = document.getElementById('county');
  32.             province.innerHTML = options;
  34.             province.onchange = function(){
  35.                 let pre = this.value.substr(0,2);
  36.                 let options_city = '';
  37.                 for(let city_key in city_list){
  38.                     if(city_key.substr(0,2) == pre){
  39.                         options_city += `<option value="${city_key}">${city_list[city_key]}</option>`
  40.                     }
  41.                 }
  42.                 city.innerHTML = options_city;
  44.                 let pre2 = city.firstChild.value.substr(0,4);
  45.                 let options_city2 = '';
  46.                 for(let city2_key in county_list){
  47.                     if(city2_key.substr(0,4) == pre2){
  48.                         options_city2 += `<option value="${city2_key}">${county_list[city2_key]}</option>`
  49.                     }
  50.                 }
  51.                 county.innerHTML = options_city2;
  52.             }
  54.             city.onchange = function(){
  55.                 let pre2 = this.value.substr(0,4);
  56.                 let options_city2 = '';
  57.                 for(let city2_key in county_list){
  58.                     if(city2_key.substr(0,4) == pre2){
  59.                         options_city2 += `<option value="${city2_key}">${county_list[city2_key]}</option>`
  60.                     }
  61.                 }
  62.                 county.innerHTML = options_city2;
  63.             }
  64.         }
  65.     </script>
  66. </body>
  67. </html>