网页前端第八次培训
2022/2/12 23:14:48
本文主要是介绍网页前端第八次培训，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
本文章为寒假记录通过b站学习HTML所得收获
一、学习网址：
【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili
二、js表单
<!--
获取表单
1.document.getElementById("id属性值")；
通过form标签的id属性值获取表单对象
2.document.表单的name属性值；
通过表单的name属性值获取表单对象
3.document.forms[下标]
通过指定下标获取表单元素
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("------------");
//获取所有的表单对象
console.log(document.forms);
//3.document.forms[下标]
console.log(document.forms[0]);
//4.document.forms[表单的name属性值]
console.log(document.forms['myform2']);
获取表单元素
<!--
获取表单元素
1.获取input元素
1.document.getElementById("id属性值")；
通过元素的id属性值获取表单元素对象
2.表单对象.表单元素的name属性值；
通过表单对象中对应的元素的name属性值获取
3.document.getElementByName("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="myform" name="myform" action="" method="get">
<!-- 文本框 -->
姓名：<input type="text" id="uname" name="uname" value="zs"/><br />
<!--- 密码框 -->
密码：<input type="password" id="upwd" name="upwd" value="1234"/><br />
<!--- 隐藏域 -->
<input type="hidden" id="uno" name="uno" value="隐藏域" />
<!-- 文本域 -->
个人说明：<textarea name="intro"></textarea>
<br>
<button type="button" onclick="getTxt();">获取元素内容</button>
<br>
<hr>
<br>
来自：
<select id="ufrom" name="ufrom">
<option value="-1">请选择</option>
<option value="beijing" selected="selected">北京</option>
<option value="shanghai">上海</option>
<option>杭州</option>
</select><br />
<button type="button" onclick="getSelect"
</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.getElementByName("name属性值");
var uno=document.getElementsByName("uno")[0].value;
console.log(uno);
//4.document.getElementsByTagName("标签名/元素名")；
var intro=document.getElementsByTagName("textarea")[0].value;
console.log(intro);
}
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);
ufrom.options[2].selected=true;
}
提交表单
<!-- 提交表单 一、使用普通按钮 type="button" 1.给按钮绑定click点击事件，绑定函数 2.在函数中，通过表单校验(非空校验) 3.如果校验通过，则手动提交表单 表单对象.submit(); 二、使用提交按钮 type="submit" 1.给按钮绑定click点击事件，绑定函数 2.函数需要有返回值，返回true或false（return false;表单不会提交。return true;表单会提交） onclick="return 函数名()" 3.在函数中，进行表单校验(非空校验、合法校验等) 4.如果校验通过，返回true，如果校验不通过，返回false 三、使用提交按钮 type="submit" 1.给表单form元素绑定submit点击事件，绑定函数 2.函数需要有返回值，返回true或false（return false;表单不会提交。return true;表单会提交） onsubmit="return 函数名()" 3.在函数中，进行表单校验(非空校验、合法校验等) 4.如果校验通过，返回true，如果校验不通过，返回false -->
例句
<form id="myform" name="myform" action="http://www.baidu.com" method="get" >
姓名：<input name="uname" id="uname"/>
<span id="msg" style="font-size: 12px;color:red;"></span><br />
<button type="button" onclick="submintForm1()">提交</button>
</form>
<hr>
<form id="myform2" action="http://www.baidu.com" method="get" >
姓名：<input name="uname2" id="uname2"/>
<span id="msg2" style="font-size: 12px;color:red;"></span><br />
<button type="submit" onclick="return submitForm2()">提交</button>
</form>
<hr>
<form id="myform3" action="http://www.baidu.com" method="get" onsubmit="return submitForm3()">
姓名：<input name="uname3" id="uname3"/>
<span id="msg3" style="font-size: 12px;color:red;"></span><br />
<button type="submit">提交</button>
</form>
<script type="text/javascript">
function submintForm1(){
var uname=document.getElementById("uname").value;
if(isEmpty(uname)){
document.getElementById("msg").innerHTML="姓名不能为空！";
return;
}
document.getElementById("myform").submit();
}
function.submitForm2(){
var uname=document.getElementById("uname2").value;
if(isEmpty(uname)){
document.getElementById("msg2").innerHTML="姓名不能为空！";
return false;
}
return true;
}
function.submitForm3(){
var uname=document.getElementById("uname3").value;
if(isEmpty(uname)){
document.getElementById("msg3").innerHTML="姓名不能为空！";
return false;
}
return true;
}
//trim(): 字符串方法，去除字符串前后空格
function isEmpty(str){
if(str==null||str.trim()==""){
return true;
}
}
return false;
Ajax
<!-- Ajax 异步无刷新技术 原生Ajax的实现流程 1.得到XMLHttpRequest对象 var xhr =new XMLHttpRequest 2.打开请求 xhr.open(method,uri,async); method:请求方式、通常是GET|POST uri:请求地址 async:是否异步。如果是true表示异步。false表示同步 3.发送请求 xhr.send(params); params.请求时需要传递的参数 如果是GET请求，设置null。(GET请求的参数设置在url后面) 、 如果是POST请求，无参数设置为null，有参数则设置参数 4.接收响应 xhr.status 响应状态 (200=响应成功 404 =资源未找到) xhr.responseText 得到响应结果 -->
例句
<script type="text/javascript">
function test01(){
// 得到XMLHttpRequest对象
var xhr=new XMLHttpRequest();
//打开请求
xhr.open("get","js/date.json",false);//同步供求
//发送请求
xhr.send(null);
//判断响应状态
if(xhr.status==200){
//获取响应结果
console.log(xhr.responseText);
}else{
console.log("状态码："+xhr.status+",原因："+xhr.responseText)
}
}
//test01;
//异步请求
function test02(){
// 得到XMLHttpRequest对象
var xhr=new XMLHttpRequest();
console.log(xhr.readyState);
//打开请求
xhr.open("get","js/date.json",true);//异步供求
console.log(xhr.readyState);
//发送请求
xhr.send(null);
xhr.onreadystatechange=function(){
if(xhr.readState==4){
if(xhr.status==200){
//获取响应结果
console.log(xhr.responseText);
}else{
console.log("状态码："+xhr.status+",原因："+xhr.responseText)
}
}
}
console.log(xhr.readyState);
//异步请求，所以需要知道后台已经将请求处理完毕，才能获取响应结果
//通过监听readyState的变化来得知后面的处理状态
xhr.onreadystatechange=function(){
}
//判断响应状态
if(xhr.status==200){
//获取响应结果
console.log(xhr.responseText);
}else{
console.log("状态码："+xhr.status+",原因："+xhr.responseText)
}
console.log("异步请求...");
}
test02();
当然还有天气请求，提取例句中的天气显示
<script type="text/javascript">
var shijian={"results":[{"location":
{"id":"WTSQQYHVQ973","name":"南京",
"country":"CN","path":"南京,南京,江苏,中国",
"timezone":"Asia/Shanghai","timezone_offset":"+08:00"},
"now":{"text":"阴","code":"9","temperature":"5"},
"last_update":"2022-02-12T09:10:49+08:00"}]}
var chengshi,tianqi,wendu;
chengshi=shijian.results[0].location.name;
tianqi=shijian.results[0].now.text;
wendu=shijian.results[0].now.temperature;
function xianshi(){
document.write("城市："+chengshi+"<br/>");
document.write("天气："+tianqi+"<br/>");
document.write("温度："+wendu+"<br/>");
}
xianshi();
</script>
先将例句存放在定义的shijian中，再定义三个用以存放，下面直接function运行即可
帮到大家的话点个赞叭
这篇关于网页前端第八次培训的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-11-15AntDesign项目实战：新手入门与初级应用教程
- 2024-11-15AntDesign-Form-rules项目实战：新手指南
- 2024-11-14ESLint课程：初学者指南
- 2024-11-14Form.List 动态表单课程：新手入门教程
- 2024-11-14Redux课程：新手入门完全指南
- 2024-11-13MobX 使用入门教程：轻松掌握前端状态管理
- 2024-11-12前端编程资料：新手入门指南与初级教程
- 2024-11-12前端开发资料入门指南
- 2024-11-12前端培训资料：适合新手与初级用户的简单教程
- 2024-11-12前端入门资料：新手必读指南
