网页前端第八次培训笔记

1.学习资料

【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili

2.表单的获取以及下拉框

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><form id="myform1" name="myform1" action=""></form><form id="myform2" name="myform2" action=""></form><form id="myform" name="myform" action="" method="get">姓名:<input type="text" id="uname" name="uname" value="zhangsan" /><br />密码:<input type="password" id="upwd" name="upwd" value="1234"/><br /><input type="hidden" id="uno" name="uno" value="隐藏域" /><br />个人说明:<textarea name="utron"></textarea><br /><button type="button" onclick="getTX();">获取元素内容</button></form><script type="text/javascript">console.log(document.getElementById("myform1"));//id属性console.log(document.myform2);//name属性console.log("-----------")console.log(document.forms);console.log(document.forms[1]);console.log(document.forms['myform2']);console.log("-----------")function getTX(){var name=document.getElementById("uname").value;console.log(name);var upwd=document.getElementById("myform").upwd.value;console.log(upwd);var uno=document.getElementsByName("uno")[0].value;console.log(uno);var utron=document.getElementsByTagName("textarea")[0].value;console.log(utron);}</script></body>
</html>

2.1 获取表单，单选按钮

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><select id="uform" name="uform"><option value="">请选择</option><option value="beijing" selected="selected">北京</option><option value="shanghai">上海</option><option>杭州</option></select><button type="button" onclick="gethh()">获取下拉选项</button><script type="text/javascript">function gethh(){var uform=document.getElementById("uform");//获取下拉框对象console.log(uform);var opts=uform.options;//获取下拉框的下拉选项列表console.log(opts);var index=uform.selectedIndex;//获取下拉框被选中项的索引console.log("选中项的下标:"+index);var val=uform.value;//获取下拉框被选中项的值console.log("被选中项的值:"+val);var val2=uform.options[index].value;//通过选中项的下标获取下拉框被选中的值console.log("被选中的值:"+val2);var txt=uform.options[index].text;//获取下拉框被选中的文本项console.log("被选中的文本:"+txt);//设置上海被选中的项uform.options[2].selected=true;}</script></body>
</html>

2.2 提交按钮（submit一定要设置返回值当为false是阻止事件发生）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><form id="my" action="https://www.baidu.com/?tn=62095104_34_oem_dg" method="get">姓名<input name="uname" id="uname"/>&nbsp;<span id="msg" style="font-size: 12px; color: #00FFFF;"></span> <br/><button type="button" onclick="getl()">提交</button></form><form id="my2" action="https://www.baidu.com/?tn=62095104_34_oem_dg" method="get">姓名<input name="uname2" id="uname2"/>&nbsp;<span id="msg2" style="font-size: 12px; color: #00FFFF;"></span> <br/><button type="submit" onclick="return get2()">提交</button></form><script type="text/javascript">function getl(){var name=document.getElementById("uname").value;if(empty(name)){document.getElementById("msg").innerHTML="姓名不能为空！"return;}document.getElementById("my").submit();}function empty(str){if(str==null||str.trim()==""){return true;}return false}function get2(){var name1=document.getElementById("uname2").value;if(empty(name1)){document.getElementById("msg2").innerHTML="姓名不能为空！"return false;}return true;}</script></body>
</html>

当有信息时，会进行页面的跳转，因为我的action是百度

3.原生Ajax实现流程

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!--Ajax异步无刷新技术原生Ajax的实现流程1。得到XMLHttpRequest对象var xhr =new XMLHttpRequest();2。打开请求xhr.open(method , uri, async);method:请求方式，通常是GET | POSTuri:请求地址async:是否异步。如果是true表示异步，false表示同步3。发送请求xhr.send(params);params:请求时需要传递的参数如果是GET请求,设置null。(GEt请求的参数设置在url后面)如果是POST请求,无参数设置为null，有参数则设置参数4。接收xhci atus响应状态(200=响应成功，404=资源未找到，500=服务器异常)xhr.responseText·得到响应结果!--><script type="text/javascript">//得到XMLHttpRequest对象var xhr = new XMLHttpRequest();//打开请求xhr.open( "get", "jp/data.json" ,false);  //·同步请求//发送请求xhr. send(null);//判断响应状态if (xhr. status == 200) {console.log(xhr.responseText) ;}else {console.log("状态码: "+ xhr.status + "，原因:" + xhr.responseText)}
//同步请求/***异步请求*/function text02(){//得到XMLHttpRequest对象var xhr = new XMLHttpRequest();//打开请求xhr.open("get", "jp/data.json" ,true);//异步请求//发送请求xhr. send(null);xhr.onreadystatechange=function(){//当值为4时，相应成功if(xhr.readyState==4){//判断响应状态if (xhr.status == 200) {//获取响应结果console.log(xhr.responseText);} else {console.log("状态码:"+ xhr.status + "，原因:"+ xhr.responseText);}console.log("异步请求... ");}}}//异步请求test02();text02();</script></body>
</html>

网页前端第八次培训笔记相关推荐

网络前端第六次培训笔记（js)
学习内容:对象和事件学习内容视频链接: [优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibilix 学习笔记 ...
前端第八次培训（JS表单）
表单基础 Web表单在HTML中以form元素表示,在js中以HTMLFormElement类型表示 HTMLFormElement类型继承自HTMLElement,但是它有自己的属性和方法: a ...
网页前端第五次培训JavaScript
1.基本语法 2.数据类型 3.数据类型转换
网页前端第七次培训任务
1,JS 对象定义 JavaScript 对象可以跨越多行,空格跟换行不是必须的(如:) var person = {firstName:"John",lastName:&quo ...
第二次网页前端培训笔记
1.学习网址 hbuilder第二次培训笔记 - 幕布 2.基础操作 3.html基本框架 <!DOCTYPE html> <html> <head> ...
网页前端培训笔记（HTML标签）
学习网址:[优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili HTML 教程 | 菜鸟教程 (runoob.com) ...
web前端网页设计作业_如何学习网页前端设计培训？
学习网页的前端设计分为几个步骤或者说几个网页设计教程大类. 一个是熟练掌握各种网页设计需要的操作软件,然后就是WEB界面设计与项目设计,最后还有WEB整站设计实训. 如何学习网页的前端设计呢? 许多零 ...
网页前端培训（HTML）
1.安装编译器网址:HBuilderX-高效极客技巧选择windows标准版 2. HTML基础学习网址: 1.HTML 基础 | 菜鸟教程 2.[优极限] HTML+CSS+JavaScrip ...
物联网技术部培训——网页前端之HTML
物联网技术部培训--网页前端之HTML 此博文用Markdown所写,会自动将标签转换成HTML,故以下有关标签都以代码块表示网页物联网技术部培训--网页前端之HTML 1. 什么是网页 1.1 ...

网页前端第八次培训笔记

网页前端第八次培训笔记相关推荐

最新文章

热门文章