JavaScript学习06(操作BOM和表单)
操作BOM
window
所有浏览器都支持 window
对象。它代表浏览器的窗口。
所有全局 JavaScript 对象,函数和变量自动成为 window
对象的成员。
全局变量是 window
对象的属性。
全局函数是window
对象的方法。
甚至(HTML DOM 的)document
对象也是 window
对象属性:
window.document.getElementById("header");
等同于:
document.getElementById("header");
screen
window.screen
对象不带 window
前缀也可以写:
属性:
- screen.width
- screen.height
- screen.availWidth
- screen.availHeight
- screen.colorDepth
- screen.pixelDepth
Location
window.location
对象可用于获取当前页面地址(URL)并把浏览器重定向到新页面。
一些例子:
- window.location.href 返回当前页面的 href (URL)
- window.location.hostname 返回 web 主机的域名
- window.location.pathname 返回当前页面的路径或文件名
- window.location.protocol 返回使用的 web 协议(http: 或 https:)
- window.location.assign 加载新文档
History
window.history 对象包含浏览器历史。
一些方法:
- history.back() - 等同于在浏览器点击后退按钮
- history.forward() - 等同于在浏览器中点击前进按钮
Navigator
window.navigator 对象包含有关访问者的信息。
一些例子:
- navigator.appName
- navigator.appCodeName
- navigator.platform
操作表单
获取值
如果我们获得了一个 <input>
节点的引用,就可以直接调用 value
获得对应的用户输入值:
// <input type="text" id="email">
var input = document.getElementById('email');
input.value; // '用户输入的值'
这种方式可以应用于 text
、 password
、 hidden
以及 select
。但是,对于单选框和复选框, value
属性返回的永远是HTML预设的值,而我们需要获得的实际是用户是否“勾上了”选项,所以应该用 checked
判断:
// <label><input type="radio" name="weekday" id="monday" value="1">
Monday</label>
// <label><input type="radio" name="weekday" id="tuesday" value="2">
Tuesday</label>
var mon = document.getElementById('monday');
var tue = document.getElementById('tuesday');
mon.value; // '1'
tue.value; // '2'
mon.checked; // true或者false
tue.checked; // true或者false
设置值
设置值和获取值类似,对于 text
、 password
、 hidden
以及 select
,直接设置 value
就可以:
// <input type="text" id="email">
var input = document.getElementById('email');
input.value = 'test@example.com'; // 文本框的内容已更新
对于单选框和复选框,设置 checked
为true
或 false
即可。
提交表单
通过 <form>
元素的 submit()
方法提交一个表单,例如,响应一个 button
的click
事件,在JavaScript代码中提交表单:
<!-- HTML -->
<form id="test-form">
<input type="text" name="test">
<button type="button" onclick="doSubmitForm()">Submit</button>
</form>
<script>
function doSubmitForm() {
var form = document.getElementById('test-form');
// 可以在此修改form的input...
// 提交form:
form.submit();
}
</script>
这种方式的缺点是扰乱了浏览器对form
的正常提交。浏览器默认点击 <button type="submit">
时提交表单,或者用户在最后一个输入框按回车键。因此,第二种方式是响应 <form>
本身的onsubmit
事件,在提交form
时作修改:
<!-- HTML -->
<form id="test-form" onsubmit="return checkForm()">
<input type="text" name="test">
<button type="submit">Submit</button>
</form>
<script>
function checkForm() {
var form = document.getElementById('test-form');
// 可以在此修改form的input...
// 继续下一步:
return true;
}
</script>
注意要eturn true
来告诉浏览器继续提交,如果 return false
,浏览器将不会继续提交form
,这种情况通常对应用户输入有误,提示用户错误信息后终止提交form
。
JavaScript学习06(操作BOM和表单)的更多相关文章
- javascript学习笔记之DOM与表单
DOM(文档对象模型),猫叔了一个层次化的节点树 一.DOM NODE相关公共属性与方法 DOM中所有节点都实现了NODE接口,该接口的公共属性和方法如下: 1.节点基本属性 1)NodeType 节 ...
- Django学习笔记(五)—— 表单
疯狂的暑假学习之 Django学习笔记(五)-- 表单 參考:<The Django Book> 第7章 1. HttpRequest对象的信息 request.path ...
- JavaScript学习06 JS事件对象
JavaScript学习06 JS事件对象 事件对象:当事件发生时,浏览器自动建立该对象,并包含该事件的类型.鼠标坐标等. 事件对象的属性:格式:event.属性. 一些说明: event代表事件的状 ...
- 这些HTML、CSS知识点,面试和平时开发都需要 No8-No9(知识点:媒体操作、构建表单)
系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
- ng2 学习笔记(二)表单及表单验证
在上一篇文章中提到了表单,只说了表单的数据绑定,这一篇文章主要讲一下表单验证,为什么把表单单独拿出来学习,主要是因为,表单是商业应用的支柱,我们用它来执行登录.求助.下单.预订机票.安排会议,以及不计 ...
- JavaScript高级程序设计第14章表单脚本 (学习笔记)
第十四章 表单脚本 1.阻止默认表单提交 1.提交表单数据 1.使用type=submit提交按钮 2.使用submit():方法 注意:当用户点击提交按钮时,会触发submit事件,从而在这里我们有 ...
- Javascript高级编程学习笔记(75)—— 表单(3)表单字段
表单字段 表单作为web应用中不可或缺的一部分,当然也是可以使用原生的 DOM 元素来访问的 除了标准的访问方式之外,每个表单都拥有一个 elements 属性,该属性保存着该表单所有 表单元素 的集 ...
- Javascript高级编程学习笔记(77)—— 表单(5)过滤输入
在日常实践中,我们常常会需要用户按照某种规则输入数据 但是文本框在默认情况下缺少验证数据的手段,因此需要使用JS来完成此类过滤输入的操作 通过事件和DOM的结合手段就能够将普通的文本框转换为功能型控件 ...
- Javascript高级编程学习笔记(74)—— 表单(2)表单提交及重置
表单提交 表单的很大一部分作用就是帮助用户完成和服务器的交互 所以表单提交是表单中比较重要的部分 虽然现如今的大部分应用场景都使用 AJAX 的异步请求来代替表单,但是仍有部分操作需要使用表单来完成, ...
随机推荐
- 使用 K6 来给你的服务做一次负载和压力测试吧
前言 负载测试,压力测试可以衡量服务是否是一个高可用,高性能的服务.负载测试能检验在不同的工作负荷下,服务的硬件消耗和响应,从而得到不同负载情况下的性能指标.压力测试能检验软硬件环境下服务所能承受的最 ...
- JDK1.8 ArrayList 源码解析
源码的解读逻辑按照程序运行的轨迹展开 Arraylist的继承&实现关系 打开ArrayList源码,会看到有如下的属性定义, ArrayList中定义的属性 /** * Default in ...
- 暑假自学java第二天
今天学习了一些java规则 一个java源文件的公开类只能有一个,而且必学和源文件名相同. 了解到java的标识符规范,这对以后的团队协作有很大作用. 标识符规则和c++还是很相似的 java中的字面 ...
- HTTP:HTTP请求头和响应头详解
HTTP请求报文 HTTP 请求报文由3部分组成(请求行+请求头+请求体) HTTP请求报文分析 1. 是请求方法,GET和POST是最常见的HTTP方法,初次以外还包括 DELETE.HEAD.O ...
- XCTF_MFC逆向
讲道理这题有点脑洞,也可能我太菜了,首先对mfc就不太熟悉,不知道是个啥玩意,只能边看大佬的wp百度边做了,之后要恶补一下mfc的知识了. 题目一开始说flag在控件中,看到大佬都是用Mfcspy来找 ...
- pxe+kickstart部署多个版本的Linux操作系统(下)---实践篇
我们在企业运维环境中,难免会遇到使用多个Linux操作系统的情况,如果每天都需要安装不同版本的Linux系统的话,那么使用Kickstart只能安装一种版本的Linux系统的方法则显得有些捉襟 ...
- java基础---设计模式(2)
结构型模式 出处:https://blog.csdn.net/zhangerqing/article/details/8239539 一.适配器模式 适配器模式将某个类的接口转换成客户端期望的另一个接 ...
- HTTP工作过程(浏览器输入URL到返回HTML页面都经历了什么)
超文本传送协议(HyperText Transport Protocol,HTTP)是互联网上应用最为广泛的一种网络协议,它工作在应用层,使用TCP的80号端口提供服务.并且HTTP是工作在客户/服务 ...
- 锐捷路由器 RSR20-X-28
学习帮助视频 Ruijie#show run | in natip nat outsideip nat insideip nat pool NAT_POOL prefix-length 24ip na ...
- c语言:输出汉字编码
#include<stdio.h> main() { //char a[5]; //strcpy(a,"啊"); char a[5]="职"; pr ...