第九周 JS 学习笔记

时间过的好快，下周js的学习就将结束，回顾这周的知识点，并没有太多难懂的地方，主要是讲了一些关于表单以及JSON方面的东西

一、表单知识

基础知识

• 获取form表单
  document.forms 返回一个表单元素集合
• form表单方法

form.submit()  // 提交表单数据
form.reset()   // 重置表单数据

• 表单共有属性

  /**
   * disabled 是否禁用
   * form 指向当前字段所属表单的指针
   * name 字段名称
   * readOnly 是否只读
   * tabIndex tab序号
   * type 类型
   * value 字段的值
   */

• 表单方法

focus()   // 获取焦点  autofocus 自动获取光标
blur()   // 失去焦点
change()  // 当失去焦点，且value值改变时触发

• 选中文本

el.select()

** 获取选中的文本内容

 function getSelectedText(el){
      if(typeof el.selectionStart == 'number'){  // 现代浏览器
          return el.value.substring(el.selectionStart, el.selectionEnd)
      }else if(document.selection){  // IE
          return document.selection.createRange().text;
      }
  }

二、媒体

• video视频

<video>
  <source src="xxxx" typpe="video/webm" >
  <source src="xxxx" type="video/ogg">
</video>

几个常用的属性

1. autoplay 自动播放
2. controls 显示隐藏内置控件
3. loop 循环
4. muted 静音
5. volume 音量
6. poster 封面

• audio视频

<audio>
  <source src="xxx" type="audio/ogg">
  <source src="xxx" type="audio/mpeg">
</audio>

** 无标签播放音频

var  audio = new Audio(xxxx.mp3);
audio.oncanplaythrough = function(){
  auido.play();
}

三、JSON对象

JSON对象方法

• 转化为json字符串
  JSON.stringify()
  此方法接受三个参数分别为，js对象，过滤器（数组或函数），缩进

var person = {
      name: '张三',
      age: 25,
      sex: '男',
      addr: '上海'
  }
  var jsonText = JSON.stringify(person,['sex','name'],2)

• 转化为json对象
  JSON.parse()
  此方法接受三个参数分别为，json字符串，还原函数，缩进

  var jsonObj = JSON.parse(jsonText,function(key,value){
      if(key == 'ages'){
          return value
      }else {
          return value
      }
  },2)