温故之输入框总结
写在前面：不忘初心，方得始终；还记得最初进入前端的时候，一个标签一个节点都会兢兢业业，虔诚谨慎的去对待，慢慢的，随着时间的流逝，也不知是受公司氛围的影响还是自己变得懒惰，变得很少去在意那些细节，项目中用到了，不知道就去查一下，过去了就过去了，下次遇到大部分情况还是要去查，总要踩过多次坑才会牢牢的记住；我一直不太喜欢开卷考试，我感觉这样的自己好像在开卷考试，而所有你需要掌握的东西都应该闭卷考试的，而且应该是融汇贯通的闭卷考试，只要是提纲内的内容，你应该能够信手拈来。工作应该是对你掌握的这些技术的升华和创造新生，否则，即使你做出来了什么也不过是依葫芦画瓢，就算画出来了，也不是最合适的。在前进的过程中，我们应该一边前进，一边反思，学而不思则罔，思而不学则殆，无论什么时候，别让自己成为一潭死水！
输入框是一个应用中不可或缺的部分之一，它是实现交互的重要内容。输入框有不同的输入操作类型，input，textarea，CheckBox，radio，select等等，他们可以帮助用户实现不同类型的交互。但是在以前的开发过程中，我一直都没有重视这个部分，所以决定好好补一补。
一，相关事件及其触发条件：
onfocus 当input 获取到焦点时触发
onblur 当input失去焦点时触发，注意：这个事件触发的前提是已经获取了焦点再失去焦点的时候会触发相应的js
onchange 当input失去焦点并且它的value值发生变化时触发
onkeydown 在 input中有键按住的时候执行一些代码
onkeyup 在input中有键抬起的时候触发的事件，在此事件触发之前一定触发了onkeydown事件
onclick 主要是用于 input type=button，当被点击时触发此事件
onselect 当input里的内容文本被选中后执行一段，只要选择了就会触发，不是非得全部选中
oninput 当input的value值发生变化时就会触发，不用等到失去焦点（与onchange的区别）
二，取值和设定默认值的相关操作：
$(function(){
$('input:text').val('我是文本输入框');//设定input类型为text的元素的value值；
$(':button').val('我是按钮输入框');//设置input类型为button的元素的value值；
$('select').val('2');//设置下拉框第二项为选中项；
$('select').find('option:contains("苹果")').attr("selected",true);//设置optios文本为香蕉的项为选中项；
$('select option')[1].selected = true;//设置select的选中项
// $("select").empty();//清空select的选项
// $("select").get(0).options.length = 0; //清空select的选项
$("select").get(0).options.add(new Option('text','value'));//添加新项
$("select").get(0).selectedIndex;//获取选中项的索引
alert($('select').val());//获取选中项的值；
alert($("select").find("option:selected").text());//获取选中项的text
$('input[name=items][checked]').val();
$('input[name=sex]').change(function(){
alert($('input[type=radio][checked]').length);
});//选中一组radio中被选中项的值，只适用于初始化时已经选择好的情况
$('input[name=sex]').get(1).checked = true; //设定radio的第二项为选中项
});
改变值的操作：主要借助选择器和.val()来操作，把值设置为空也可以达到清空值得作用；
$('input:text').val('我是文本输入框');//设定input类型为text的元素的value值；
$(':button').val('我是按钮输入框');//设置input类型为button的元素的value值；
设定选中项的操作：select元素，当selected属性为true时即为选中；radio和check则当checked等于checked时为选中；需要注意的是，当使用属性选择器时，动态选择的过程中不能取到radio选中项的相关信息，因为默认切换方式不是通过改变checked来改变选中项的，所有选不中。此时需要根据自己操作中改变的内容去选择对应选中项的信息；
$('select').val('2');//设置下拉框第二项为选中项；
$('select').find('option:contains("苹果")').attr("selected",true);//设置optios文本为香蕉的项为选中项；
$('select option')[1].selected = true;//设置select的选中项
$('input[name=sex]').get(1).checked = true;
清空项和添加新项：这里列出的是jQuery专门为select设置的添加方式，除此之外也可以使用通用的append等方式来实现添加新项的功能；
$("select").empty();//清空select的选项
$("select").get(0).options.length = 0; //清空select的选项
$("select").get(0).options.add(new Option('text','value'));//添加新项
取选中项的值：取值一般通过val，索引是selectedIndex；
$("select").get(0).selectedIndex;//获取选中项的索引
$('select').val();//获取选中项的值；
$("select").find("option:selected").text();//获取选中项的text；
$('input[name=items][checked]').val();
事件触发：事件名称小括号内用匿名函数实现时间被触发时的对应操作；
$('input[name=sex]').change(function(){
alert($('input[type=radio][checked]').length);
});
三，这里列一下我目前能想到的一些输入类型，也包括部分我比较陌生的表单元素，然后逐一介绍，代码下面是各种输入框在浏览器中的展示截图：
<!DOCTYPE html> <html> <!--（请注意，文中逻辑代码以及图片等引用皆为我的本地地址，如果要查看代码记得替换相应地址，否则有可能显示异常） --> <head> <meta charset="UTF-8"> <title>练习</title> <script type="text/javascript" src="assets/js/jquery.min.js" ></script> <script type="text/javascript" src="new_file.js" ></script> <style>p{color: orange;}</style> </head> <body> <h3>input 输入框</h3> <div>button：<input type="button" value="按钮名称"/></div> <p>type等于radio定义单选按钮，如果指定两个选项中只能选中一项，则name值必须相同，value不同。</p> <div>radio：<input type="radio" name="sex" value="1" /><input type="radio" name="sex" value="2" /></div> <p>type等于check定义多选按钮，如果多个name值相同的选项，可以选中多个。</p> <div>checkbox：<input type="checkbox" name="habbit" value="1"/><input type="checkbox" name="habbit" value="2"/></div> <div>color：<input type="color" value="color"/></div> <p>选取时间和日期的输入类型，共有以下六种，提供不同的输入形式：</p> <div>date：<input type="date" /></div> <div>datetime：<input type="datetime" /></div> <div>datetime-local：<input type="datetime-local" /></div> <div>week：<input type="week" /></div> <div>month：<input type="month" /></div> <div>time：<input type="time" /></div> <p>iPhone 中的 Safari 浏览器支持 email 输入类型，并通过改变触摸屏键盘来配合它（添加 @ 和 .com 选项）</p> <div>email：<input type="email" /></div> <div>file：<input type="file" /></div> <div>hidden：<input type="hidden" /></div> <p>image输入框，会以src属性指定的图片来显示按钮样式。</p> <div>image：<input type="image" src="assets/layui/images/face/47.gif" /></div> <p>用于输入应该包含数值的输入域，还可设置对所输入的数字的限定</p> <div>number：<input type="number" min="1" max="10" /></div> <div>password：<input type="password" /></div> <p>用于应该包含一定范围内数值的输入域，range类型显示为滑动条，同样也可以对可接受的数字进行限定</p> <div>range：<input type="range" min="1" max="10" /></div> <div>reset：<input type="reset" /></div> <p>搜索域：</p> <div>search：<input type="search" /></div> <p>type等于submit定义提交表单数据到指定服务器的按钮。</p> <div>submit：<input type="submit" /></div> <div>tel：<input type="tel" /></div> <div>text：<input type="text" /></div> <p>iPhone 中的 Safari 浏览器支持 url 输入类型，并通过改变触摸屏键盘来配合它（添加 .com 选项）。</p> <div>url：<input type="url" /></div> <h3>select输入</h3> <p>select列表通常会把首个选项显示为被选选项，可以通过添加selected属性来设置预定义选项</p> <div>select: <select name=""> <option value="1">苹果</option> <option value="2">梨子</option> <option value="3" selected="selected">香蕉</option> </select> </div> <h3>textarea输入</h3> <p>定义多行输入字段：</p> <div>textarea: <textarea></textarea> </div> <h3>datalist :</h3> <div>datalist : <input type="url" list="url_list" name="link" /> <datalist id="url_list"> <option label="baidu" value="http://www.baidu.com.cn" /> <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /> </datalist> </div> <h3>button定义可点击按钮:</h3> <div>button: <button type="button" onclick="alert('你竟然敢单击我！╭(╯^╰)╮')">我是按钮</button> </div> </body> </html>
时间有限，后期在做补充，错误之处欢迎批评指正。
