JavaScript高级

Posted 2021-01-29 Oden

1.对象的高级使用

• 对象的key为string，value为任意类型

  var obj = {
      name : ‘aaa‘,
      ‘person.age‘ : 18
  }
  
  // 访问
  obj.name | obj[‘name‘]
  obj[‘person.age‘]

• 对象的属性可以任意添加于删除

  var obj = {
      name: ‘aaa‘
  }
  
  // 删除
  delete.obj.name
  
  // 添加
  obj.age = 18 // 如果key已经存在，那么就是修改，不存在就是添加
  
  // 注意：获取的页面元素也可以任意添加/删除属性

2.页面标签全局属性操作

// 获取类名为ele的页面元素ele

var ele = document.querySelector(‘.ele‘);

// 获取页面标签ele的alert全局属性值,如果没有该全局属性值为null

ele.getAttribute(‘alert‘);

// 修改ele全局属性的值，或者增添该全局属性并赋予相应的值

ele.setAttribute(‘attr_key‘,‘attr_value‘);

// 注意:一般应用场景，结合css的属性选择器完成样式修改

// 属性也可以用来获取页面元素，采用css语法

// eg: a = document.querySelector(‘[alert]‘)

3.事件

• 事件的绑定

  // 方式一：on事件
  
  var box = documeng.querySelector(‘.box‘)  // 获取页面元素
  
  box.onclick = function(){
      code
  }
  
  // 只能绑定一个实现体，如果有多次绑定，保留最后一次，前面的会被覆盖掉
  
  // 取消用：box.onclick = null

  // 方式二：直接用事件
  
  var fn1 = function(){}        // 钩子函数
  
  var fn2 = function(){}
  
  box.addEventListener(‘click‘,fn1)
  
  box.addEventListener(‘click‘,fn2)
  
  // 可以绑定多个实现体，如果绑定了多个，按顺序依次执行
  
  // 取消事件绑定：box.removerEventListerner(‘click‘,fn)
  
  // 了解：第三个参数决定了冒泡的顺序(子父级谁先相应事件) 省略默认为false