表单和输入输出

认识表单元素

1.文本输入框

2.复选框

3.按钮

4.下拉框

        1
        2
        3
        4
        5
    

5.单选按钮

6.颜色选择框

7.进度框

*使用label嵌套可以选中文字将会选择按钮
也可以使用文字描述

*浏览器对input的支持情况和其他input标签

开发流程

1.写出结构化的HTML方法1
  写出结构化的HTML方法2
2.获取表单元素值
3.点击时进行改变
4.输出内容

基础工作具体流程

1.HTML中上一行引入自己写的js文件

2.选择元素

var 变量名=document.querySelector('选择器');

3.赋值变量内部内容

变量名.innerHTML=内容
其中内容可以是DOM节点eg:
preview.innerHTML='这是文本';

4.使用变量进行调整自己需要变化的量eg：

var color='#000';
var color='#fff';
var fontSize=13;
var text="这是一段富文本内容";
变量.innerHTML=''+text+'';

*js的变量名一般采取驼峰命名法：即第一个单子首字母小写，其余单词的首字母进行大写
css的类名则是第一个单词-第二个单词

5.获取表单元素的值

1.选择表单

var textInput=document.querySelector('.form-group .field .text-Input');

2.获取值

var text=textInput.value;

*在浏览器中选中获取值的元素，在console控制台中$0.value就可以获取该元素的值

6.重构函数输出代码

1.去掉不必要的代码和不必要的注释
2.调整结构

7.测试代码，改变值查看是否有自己需要的效果

认识函数

函数作用：减少代码重复量。给代码片段命名字，即函数名
1.建立函数
function 函数名(){
//代码片段
}
2.函数执行
函数名();

添加事件

1.选择元素
var 变量名=document.querySelector('选择器');//事件监听
2.添加事件监听
变量名.addEventListener('事件',函数名);//当事件触发，调用函数

注意代码格式