認識表單元素
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>
開發(fā)流程
1.寫出結(jié)構(gòu)化的HTML方法1
??寫出結(jié)構(gòu)化的HTML方法2
2.獲取表單元素值
3.點擊時進行改變
4.輸出內(nèi)容
基礎(chǔ)工作具體流程
1.HTML中</body>上一行引入自己寫的js文件
2.選擇元素
var 變量名=document.querySelector('選擇器');
3.賦值變量內(nèi)部內(nèi)容
變量名.innerHTML=內(nèi)容
其中內(nèi)容可以是DOM節(jié)點eg:
preview.innerHTML='<span style="color:#000;backGround:#fff;font-size:13px">這是文本</span>';
4.使用變量進行調(diào)整自己需要變化的量eg：
var color='#000';
var color='#fff';
var fontSize=13;
var text="這是一段富文本內(nèi)容";
變量.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.重構(gòu)函數(shù)輸出代碼
1.去掉不必要的代碼和不必要的注釋
2.調(diào)整結(jié)構(gòu)
7.測試代碼蹋嵌，改變值查看是否有自己需要的效果
認識函數(shù)
函數(shù)作用：減少代碼重復量。給代碼片段命名字恕酸，即函數(shù)名
1.建立函數(shù)
function 函數(shù)名(){
//代碼片段
}
2.函數(shù)執(zhí)行
函數(shù)名();
添加事件
1.選擇元素
var 變量名=document.querySelector('選擇器');//事件監(jiān)聽
2.添加事件監(jiān)聽
變量名.addEventListener('事件',函數(shù)名);//當事件觸發(fā)仁期，調(diào)用函數(shù)
