认识表单元素
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>
开发流程
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('事件',函数名);//当事件触发，调用函数
