表单和输入输出

认识表单元素

1.文本输入框
<input type="text" name="" id="">
2.复选框
<input type="checkbox" name="" id="">
3.按钮
<input type="button" name="" id="">
4.下拉框

<select name="" id="">
        <option value="">1</option>
        <option value="">2</option>
        <option value="">3</option>
        <option value="">4</option>
        <option value="">5</option>
    </select>

5.单选按钮
<input type="radio" id="" name="">
6.颜色选择框
<input type="color" name="" id="">
7.进度框
<input type="range" name="" id="">

*使用label嵌套可以选中文字将会选择按钮
也可以使用<label for="id名">文字描述</label>

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

开发流程

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

基础工作具体流程

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

2.选择元素

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

3.赋值变量内部内容

变量名.innerHTML=内容
其中内容可以是DOM节点eg:
preview.innerHTML='<span style="color:#000;backGround:#fff;font-size:13px">这是文本</span>';

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

var color='#000';
var color='#fff';
var fontSize=13;
var text="这是一段富文本内容";
变量.innerHTML='<span style="color:'+color+';backGround:'+bgColor+';font-size:'+fontSize+'px">'+text+'</span>';

*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('事件',函数名);//当事件触发，调用函数

注意代码格式