<!-- 
         提交表单
            一、使用普通按钮 type="button"
                1、给按钮绑定click点击事件，绑定函数
                2、在函数中，进行表单效验（非空效验，合法性效验）
                3、如果效验通过，则手动提交表单
                    表单对象.submit();
            二、使用提交按钮   type="submit"
                1、给按钮绑定click点击事件，绑定函数
                2、函数要有返回值----返回未true执行   否则不执行
                3、在函数中校验
                4、通过   true   不通过   false
            三、    使用提交按钮   type="submit"    
                1、给表单form元素绑定submit提交事件，绑定函数
                2、函数要有返回值----返回未true执行   否则不执行
                    οnsubmit="return submitForm3()"
         -->

 <!-- 1、使用普通按钮   type="button" --><form id="myform" name="myform"action="http://www.baidu.com" method="get">姓名:<input type="" name="uname" id="uname" value="" />&nbsp;<span id="msg" style="font-size: 12px;color:red;"></span><br><button type="button"onclick="submitForm1()">提交</button></form><hr ><!-- 2、 --><form id="myform2" name="myform2"action="http://www.baidu.com" method="get">姓名:<input type="" name="uname2" id="uname2" value="" />&nbsp;<span id="msg2" style="font-size: small;red;"></span><br><button type="submit"onclick=" return submitForm2()">提交</button></form><!-- 3、 --><form id="myform3" onsubmit="return submitForm3()"name="myform3"action="http://www.baidu.com" method="get">姓名:<input type="" name="uname3" id="uname3" value="" />&nbsp;<span id="msg3" style="font-size: small;red;"></span><br><button type="submit">提交</button></form>console.log("--------------")function submitForm1(){//得到文本框的值var uname=document.getElementById("uname").value;//判断是否为空if(isEmpty(uname)){//true//为空        设置提示信息document.getElementById("msg").innerHTML="*不能为空";//阻止表单提交return;}//手动提交表单document.getElementById("myform").submit();}function submitForm2(){var uname2=document.getElementById("uname2").value;if(isEmpty(uname2)){//true//为空        设置提示信息document.getElementById("msg2").innerHTML="*不能为空";//阻止表单提交return false;}//手动提交表单return true;}function submitForm3(){var uname3=document.getElementById("uname3").value;if(isEmpty(uname3)){//true//为空        设置提示信息document.getElementById("msg3").innerHTML="*不能为空";//阻止表单提交return false;}//手动提交表单return true;}function isEmpty(str){if(str==null||str.trim()==""){//trim字符串方法   去除空格return true;}return false;}</script>

<!-- 
        获取表单元素
            1、获取input元素
                1、document.getElementById("id属性值");
                    通过元素的id属性值获取表单元素对象
                2、表单对象.表单元素的name属性值;
                    通过表单对象中的对应元素的name属性值获取
                3、document.getElementsByName("name属性值");
                    通过表单元素的name属性值获取
                4、document.getElementByTagName("标签名/元素名");
                通过标签名获取表单元素对象
                
            2、获取单选按钮
                注意：相同的一组单选按钮，需要设置相同的name属性值
                1、document.getElementsByName("name属性值");
                    通过表单元素的name属性值获取
                2、判断单选按钮是否选中
                    checked选中状态
                    在js代码中
                        checked=true  表示选中
                        checked=false   表示不选中
                    在HTML标签中
                        checked=checked或checked表示选中
                        不设置checked属性，表示不选中
                3、获取单选按钮的值
                    与单选按钮相同
                4、获取下拉选项
                    1、获取下拉框对象
                        var 对象=document.getElementById("id属性值");
                    2、获取下拉框的下拉选项列表
                        var options=下拉框对象.options;
                    3、获取下拉框被选中项的索引
                        var index=下拉框对象.selectedIndex;
                    4、获取下拉框被选中项的值
                        var 值=下拉框对象.value;
                    5、通过选中项的下标获取下拉框被选中项的值
                        var 值=下拉框对象.options[index].value;
                    6、获取下拉框被选中项的文本
                        var 文本值=下拉框对象.options[index].text;
                    
                    
                    注意：
                        1、获取下拉框选中项的值（value）
                            如果option标签设置了value属性值，则获取value属性对应的值
                            如果option标签未设置value属性值，则获取的是option双标签中的位版本值
                        2、下拉框的选中状态
                            选中状态：selected=selected，selected，selected=true
                            未选中状态，不设置selected属性，selected=false
                        

 <form action="myform" method="get"name="myform"id="myform">姓名:<input type="text" name="uname" id="uname" value="zs" /><br>密码:<input type="password" name="upwd" id="upwd" value="1234" /><br><input type="hidden" name="uno" id="uno" value="隐藏域" />个人说明:<textarea name="intro"rows="" cols=""></textarea><br><button type="button"onclick="getTxt();">获取元素内容</button><hr ><br><input type="text" name="inputName" id="" value="aaa" /><input type="radio" name="rad" id="" value="1" class="test" />男<input type="radio" name="rad" id="" value="2" class="test" />女<button type="button" onclick="getRadio();">获取单选按钮</button><br><hr ><br>全选/全部选:<input type="checkbox" name="" id="control" value=""onclick="checkAllOrNot()" /><button type="button" onclick="checkFan()">反选</button><br><input type="checkbox" name="hobby" id="" value="sing" />唱歌<input type="checkbox" name="hobby" id="" value="dance" />跳舞<input type="checkbox" name="hobby" id="" value="rap" />说唱<button type="button"onclick="getCheckBox()">获取多选按钮</button><br><hr ><br>来自:<select id="ufrom"name="ufrom"><option value ="">请选择</option><option value ="beijing"selected="selected">北京</option><option value ="sahnghai">上海</option></select><button type="button"onclick="getSelect()">获取下拉选项</button></form><script type="text/javascript">function getTxt(){ //1、document.getElementById("id属性值");var uname=document.getElementById("uname").value;console.log(uname);//2、表单对象.表单元素的name属性值;var pwd=document.getElementById("myform").upwd.value;console.log(pwd);//3、document.getElementById("name属性值");var uno=document.getElementsByName("uno")[0].value;console.log(uno);//4、document.getElementByTagName("标签名/元素名");var intro=document.getElementsByTagName("textarea")[0].value;console.log(intro);}/*获取单选按钮*/function getRadio(){var cla=document.getElementsByName("test");console.log(cla);if(cla!=null&&cla.length>0){//判断input元素的类型for(var i=0;i<cla.length;i++){if(cla[i].type=="text"){console.log("文本框的值："+cla[i].value);}else if(cla[i].type=="radio"){console.log("值："+cla[i].value+"是否选中："+cla[i].checked);}}}}/*获取多选按钮*/function  getCheckBox(){//通过复选框的name属性值获取var checkboxs=document.getElementsByName("hobby");if(checkboxs!=null&&checkboxs.length>0){//选中复选框的值的字符串var checkeds='';//遍历for(var i=0;i<checkboxs.length;i++){//获取所有复选框//console.log("值："+checkboxs[i].value);//获取被选中的值/**if(checkboxs[i].checked){console.log("选中的值:"+checkboxs[i].value);}else{console.log("未选中的值:"+checkboxs[i].value);}是否被选中*/if(checkboxs[i].checked){checkeds+=checkboxs[i].value+',';}}}//截取字符串if(checkeds!=''){checkeds=checkeds.substring(0,checkeds.length-1);}console.log(checkeds);}/*全选或全不选*/function checkAllOrNot(){//得到控制对象var control=document.getElementById("control");//判断是否被选中var flag=control.checked;console.log(flag);//通过复选框的name属性值获取var checkboxs=document.getElementsByName("hobby");if(checkboxs!=null&&checkboxs.length>0){for(var i=0;i<checkboxs.length;i++){checkboxs[i].checked=flag;}}}/*反选**/function checkFan(){var checkboxs=document.getElementsByName("hobby");if(checkboxs!=null&&checkboxs.length>0){for(var i=0;i<checkboxs.length;i++){checkboxs[i].checked=!checkboxs[i].checked;}}}function getSelect(){var ufrom=document.getElementById("ufrom");console.log(ufrom);//获取下拉框的下拉选择项列表 var opts=ufrom.options;console.log(opts);//获取下拉框被选中项的索引var index=ufrom.selectedIndex;console.log("选中项的下标:"+index);//获取下拉框被选中的值var val=ufrom.value;console.log("被选中项的值："+val);//通过选中项的下标获取下拉框被选中项的值var val2=ufrom.options[index].value;console.log("被选中项的值："+val2);//获取下拉框被选中项的文本var txt=ufrom.options[index].txt;console.log("被选中项的文本："+txt);}</script>

PE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 获取表单1、document.getElementById("id属性值");2、document.表单的name属性值3、document.form[下标];通过指定下标获取表单元素4、document.forms[表单的name属性值]通过表单的name属性值获取表单对象document.forms:获取HTML文档中所有的表单对象--><form id="myform1" name="myform1" action=""> </form><form id="myform2" name="myform2" action=""> </form>	<script type="text/javascript">//1、document.getElementById("id属性值");console.log(document.getElementById("myform1"));//2、document.表单的name属性值console.log(document.("myform2"));//获取所有的表单对象console.log(document.forms);//3、document.form[下标];	通过指定下标获取表单元素console.log(document.form[0]);//4、document.forms[表单的name属性值]	通过表单的name属性值获取表单对象console.log(document.forms["myform2"]);</script></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- Ajax异步无刷新技术原生Ajax的实现流程1、得到XMLHttpRequest();2、打开请求xhr.open(method,uri,async);method:请求方式，通常是GET|POSTuri:请求地址async:是否异步。如果是true表示异步，否则同步3、发送请求：xhr.send(params);params:请求时需要传递的参数如果是get请求，设置null（get请求的参数放到url后面）如果是post请求，无参数设置null，有参数设置参数4、接收响应xhr.status 响应状态（200=响应成功，404=资源未找到，500=服务器异常）xhr.responseText 得到响应结果--><input type="text" name="" id="numb" value="" /><button type="button"onclick="loadXMLDoc()">获取天气</button><p id="text"></p></body><script type="text/javascript">function loadXMLDoc(){document.getElementById("text").innerHTML="请填写城市";var x,url;//获取id="numb"的值x=document.getElementById("numb").value;console.log(x);//得到对象var xhr=new XMLHttpRequest();url="http://api.seniverse.com/v3/weather/now.json?key=WNEUXAAE2G&language=zh-Hans&unit=c&location="+encodeURI(x)console.log(url);				//打开请求xhr.open("get",url,false);//同步//发送请求xhr.send(null);//判断响应状态if(xhr.status==200){//获取响应结果obj=JSON.parse(xhr.responseText);document.getElementById("text").innerHTML=obj.results[0].location.name+" "+obj.results[0].now.text+" "+obj.results[0].now.temperature;// document.getElementById("text").innerHTML=xhr.responseText;// 	console.log(xhr.responseText);}else{console.log("状态码："+xhr.status+",原因："+xhr.responseText)}}</script>
</html>