网页前端培训笔记第八课

视频：

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

js表单

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>JS表单</title></head><body><!-- 获取表单 1. document.getElementById("id属性值");通过from标签的id属性值获取表单对象2. document.表单的name属性值;通过表单的name属性值获取表单对象3. document.forms[下标];通过指定下标获取表单元素4. document.forms[表单的name属性值];通过表单的name属性值获取表单对象document.forms:获取HTML文档中所有的表单对象获取表单元素1.获取input元素1. document.getElementById(""id属性值");通过元素的id属性值获取表单元素对象2．表单对象.表单元素的name属性值;通过表单对象中对应的元素的name属性值获取3. document.getELementsByName( "name属性值");通过表单元素的name属性值获取4. document.getELementsByTagName("标签名/元素名");通过标签名获取表单元素对象获取下拉选项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 id="myform1" name="myform1" action=""></form><form id="myform2" name="myform2" action=""></form><form action="" method="get" id="myform" name="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"></textarea><br><button type="button" onclick="getTxt()">获取元素内容</button><br>来自:<select id="ufrom" name="ufrom"><option value="-">请选择</option><option value="Beijing" selected="selected">北京</option><option value="Shanghai">上海</option><option >杭州</option><option value="1">上海</option>         </select><button type="button" onclick="getSelect()">获取下拉选项</button></form><script type="text/javascript">/*获取表单 *///1. document.getElementById("id属性值");console.log(document.getElementById("myform1"));//2. document.表单的name属性值;console.log(document.myform2);console.log("-------------------")//获取所有表单对象console.log(document.forms);//3. document.forms[下标];console.log(document.forms[0]);//4. document.forms[表单的name属性值];console.log(document.forms['myform2']);/*获取表单元素*/function getTxt(){//1. document.getElementById(""id属性值");var uname = document.getElementById("uname").value;console.log(uname);//2. document.表单的name属性值;var pwd = document.getElementById("myform").upwd.value;console.log(pwd);//3. document.getELementsByName( "name属性值");var uno = document.getElementsByName("uno")[0].value;console.log(uno);//4. document.getELementsByTagName("标签名/元素名");var intro = document.getElementsByTagName("textarea")[0].value;console.log(intro);}/*获取下拉选项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*/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].text;console.log("被选中项的文本:" + txt);}</script></body>
</html>

Jquery Ajax

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Jquery Ajax</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。接收响应xhr.status响应状态(200=响应成功，404=资源未找到，500=服务器异常)xhr.responseText·得到响应结果--><script type="text/javascript">/*同步请求*/function test01(){// 得到XMLHttpRequest对象var xhr = new XMLHttpRequest();console.log(xhr.readyState);//打开请求xhr.open("get","data.json",false);//同步请求console.log(xhr.readyState);//发送请求xhr.send(null);console.log(xhr.readyState);//判断响应状态if(xhr.status == 200) {console.log(xhr.responseText);}else{console.log("状态码: " + xhr.status + ",原因: " + xhr.responseText);}console.log("同步请求...");}//同步请求// test01();/*异步请求*/function test02(){//   得到XMLHttpRequest对象var xhr = new XMLHttpRequest();//打开请求xhr.open("get","data.json",true);//异步请求//发送请求xhr.send(null);/*由于是异步请求，所以需要知道后台已经将请求处理完毕，才能获取响应结果通过监听readyState的变化来得知后面的处理状态  4 = 完全处理xhr.onreadyStatechange = function(){}*/xhr.onreadystatechange = function(){//当readyState的值为4时，表示结果成功响应if(xhr.readyState == 4) {//判断响应状态if(xhr.status == 200) {console.log(xhr.responseText);}else{console.log("状态码: " + xhr.status + ",原因: " + xhr.responseText);}}}console.log("异步请求...");}//异步请求test02();</script></body>
</html>

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

第二次网页前端培训笔记
1.学习网址 hbuilder第二次培训笔记 - 幕布 2.基础操作 3.html基本框架 <!DOCTYPE html> <html> <head> ...
网页前端培训笔记（HTML标签）
学习网址:[优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili HTML 教程 | 菜鸟教程 (runoob.com) ...
第八次网页前端培训笔记
B站视频网址:(本次仅涉及P40-P43和P60)[优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili 菜 ...
梅科尔工作室-第一次网页前端培训笔记（HTML常用标签）
学习网址:[优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili 1.安装编译器 vs hBuilder X等等(本人主 ...
第五次网页前端培训笔记（js1）
1.js的基本使用 JavaScript(简称"JS") 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言.虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多 ...
第一次网页前端培训笔记（Html基础语法和常用标签）
一.什么是HTML HTML 是用来描述网页的一种语言.HTML 是一种在 Web 上使用的通用标记语言.HTML 允许你格式化文本,添加图片,创建链接.输入表单.框架和表格等等,并可将之存为文本文件 ...
第一次网页前端培训笔记
一.编辑软件 HbuilderX HBuilderX 自述文件二.html的第一次学习 1.学习链接:[优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础 ...
第七次网页前端培训笔记
B站视频网址:(本次仅涉及P24-P26)[优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili 菜鸟教程网 ...
第七次网页前端培训笔记（JS对象和事件）
一.JavaScript对象 JavaScript 中的所有事物都是对象:字符串.数值.数组.函数 JavaScript 允许自定义对象. 1.所有事物都是对象 JavaScript 提供多个内建对象 ...

网页前端培训笔记第八课

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

最新文章

热门文章