02: DOM 实例
1.1 Event 对象
<body>
<a id="myAnchor" href="http://www.microsoft.com">访问 Microsoft</a>
<input type="button" onclick="changeLink()" value="改变链接"> <script type="text/javascript">
function changeLink() {
document.getElementById('myAnchor').innerHTML="访问 W3School"
document.getElementById('myAnchor').href="http://www.w3school.com.cn"
document.getElementById('myAnchor').target="_blank"
}
</script>
</body>
更改一个链接的文本、URL 以及 target
<body onmousedown="whichButton(event)">
<p>请在文档中点击鼠标。一个消息框会提示出您点击了哪个鼠标按键。</p> <script type="text/javascript">
function whichButton(event) {
var btnNum = event.button;
if (btnNum==2) {
alert("您点击了鼠标右键！")
}
else if(btnNum==0) {
alert("您点击了鼠标左键！")
}
else if(btnNum==1) {
alert("您点击了鼠标中键！");
}
else {
alert("您点击了" + btnNum+ "号键，我不能确定它的名称。");
}
}
</script>
</body>
哪个鼠标按钮被点击？
<body onmousedown="show_coords(event)">
<p>请在文档中点击。一个消息框会提示出鼠标指针的 x 和 y 坐标。</p>
<script type="text/javascript">
function show_coords(event) {
x=event.clientX;
y=event.clientY;
alert("X 坐标: " + x + ", Y 坐标: " + y)
}
</script>
</body>
光标的坐标是？
<body onkeyup="whichButton(event)">
<p><b>注释：</b>在测试这个例子时，要确保右侧的框架获得了焦点。</p>
<p>在键盘上按一个键。消息框会提示出该按键的 unicode。</p> <script type="text/javascript">
function whichButton(event) {
alert(event.keyCode)
}
</script>
</body>
被按的按键的 unicode 是？
<body onmousedown="isKeyPressed(event)">
<p>在文档中点击某个位置。消息框会告诉你是否按下了 shift 键。</p> <script type="text/javascript">
function isKeyPressed(event) {
if (event.shiftKey==1) {
alert("The shift key was pressed!")
} else {
alert("The shift key was NOT pressed!")
}
}
</script>
</body>
shift 键被按了吗？
<body onmousedown="getEventType(event)">
<p>在文档中点击某个位置。消息框会提示出被触发的事件的类型。</p>
<script type="text/javascript">
function getEventType(event) {
alert(event.type);
}
</script>
</body>
哪个事件类型发生了？
<body>
<div>
<textarea placeholder="输入咨询内容" class="my_msg" onkeydown="isEnter(event)" autofocus></textarea>
</div>
<script>
// 在textarea里按下ctrl+回车，立即调用发送函数
function isEnter(event) {
if(event.keyCode==13 && event.ctrlKey){
console.log("enter");
// send_msg();
}
}
</script>
</body>
ctrl+回车，立即调用发送函数
1.2 Form 和 Input 对象
<body>
<form id="myForm" action="/old_path/">
名称：<input type="text" value="米老鼠" />
<input type="button" onclick="changeAction()" value="改变 action 属性并提交表单" />
</form>
<script type="text/javascript">
function changeAction() {
var x=document.getElementById("myForm");
alert("Original action: " + x.action);
x.action="/newpath/";
alert("New action: " + x.action);
x.submit()
}
</script>
</body>
更改表单的 action 属性
<body>
<form id="myForm" method="post">
名称：<input type="text" value="米老鼠" />
<input type="button" onclick="showMethod()" value="显示 method" />
</form>
<script type="text/javascript">
function showMethod() {
var x=document.getElementById("myForm")
alert(x.method)
}
</script>
</body>
获取提交数据方式：post、get等
<body>
<form>
<input type="checkbox" id="myCheck" />
<input type="button" onclick="check()" value="选定复选框" />
<input type="button" onclick="uncheck()" value="取消选定复选框" />
</form>
<script type="text/javascript">
function check() {
document.getElementById("myCheck").checked=true
}
function uncheck() {
document.getElementById("myCheck").checked=false
}
</script>
</body>
选定以及不选定 checkbox
<body>
<form id="myForm">
姓名：<input type="text" size="20"><br />
年龄：<input type="text" size="20"><br />
<br />
<input type="button" onclick="formReset()" value="重置">
</form> <script type="text/javascript">
function formReset() {
document.getElementById("myForm").reset()
}
</script>
</body>
重置表单
<body>
<form id="myForm" action="/login/" method="get">
名：<input type="text" name="firstname" size="20"><br />
姓：<input type="text" name="lastname" size="20"><br />
<br />
<input type="button" onclick="formSubmit()" value="提交">
</form> <script type="text/javascript">
function formSubmit(){
document.getElementById("myForm").submit()
}
</script>
</body>
提交表单
<body>
<form action="/login/" onsubmit="return validate()">
名字（最多 10 个字符）：<input type="text" id="fname" size="20"><br />
年龄（从 1 到 100）：<input type="text" id="age" size="20"><br />
电子邮件：<input type="text" id="email" size="20"><br />
<br />
<input type="submit" value="提交">
</form> <script type="text/javascript">
function validate() {
var at=document.getElementById("email").value.indexOf("@");
var age=document.getElementById("age").value;
var fname=document.getElementById("fname").value;
submitOK="true"; if (fname.length>10) {
alert("名字必须小于 10 个字符。");
submitOK="false"
}
if (isNaN(age)||age<1||age>100) {
alert("年龄必须是 1 与 100 之间的数字。");
submitOK="false"
}
if (at==-1) {
alert("不是有效的电子邮件地址。");
submitOK="false"
}
if (submitOK=="false") {
return false
}
}
</script>
</body>
验证表单
1.3 Image 对象
<body>
<img id="compman" src="/static/aa.png" />
<br /><br />
<input type="button" onclick="changeSize()" value="改变图像的高度和宽度"> <script type="text/javascript">
function changeSize() {
document.getElementById("compman").height="270";
document.getElementById("compman").width="164"
}
</script>
</body>
更改图像的高度和宽度
<body>
<img id="myImage" src="/static/aa.png" />
<br /><br />
<input type="button" onclick="changeSrc()" value="改变图像"> <script type="text/javascript">
function changeSrc() {
document.getElementById("myImage").src="/i/eg_smile.gif"
}
</script>
</body>
更改图像的 src
02: DOM 实例的更多相关文章
- Java-Runoob-高级教程-实例-方法：02. Java 实例 – 输出数组元素
ylbtech-Java-Runoob-高级教程-实例-方法:02. Java 实例 – 输出数组元素 1.返回顶部 1. Java 实例 - 输出数组元素 Java 实例 以下实例演示了如何通过重 ...
- Java-Runoob-高级教程-实例-时间处理：02. Java 实例 - 获取当前时间
ylbtech-Java-Runoob-高级教程-实例-时间处理:02. Java 实例 - 获取当前时间 1.返回顶部 1. Java 实例 - 获取当前时间 Java 实例 以下实例演示了如何使 ...
- Java-Runoob-高级教程-实例-字符串：02. Java 实例 - 查找字符串最后一次出现的位置
ylbtech-Java-Runoob-高级教程-实例-字符串:02. Java 实例 - 查找字符串最后一次出现的位置 1.返回顶部 1. Java 实例 - 查找字符串最后一次出现的位置 Jav ...
- Java-Runoob-高级教程-实例-数组：02. Java 实例 – 数组添加元素
ylbtech-Java-Runoob-高级教程-实例-数组:02. Java 实例 – 数组添加元素 1.返回顶部 1. Java 实例 - 数组添加元素 Java 实例 以下实例演示了如何使用s ...
- no-jquery 02 DOM
DOM Manipulation Creating Elements // IE 5.5+ document.createElement('div'); Inserting Elements Befo ...
- HTML DOM 实例-Document 对象
使用 document.write() 向输出流写文本 <html><body><script type="text/javascript">d ...
- DOM实例
同一种功能两种方法: <script type='text/javascript'> <!-- var tag = document.creatElement("a&quo ...
- JS DOM 实例（5大常用实例）
第1个实例:循环单击变色 <html lang="en"> <head> <meta charset="UTF-8"> &l ...
- TERSUS无代码开发(笔记02)-简单实例加法
简单实例加法 1.用户端元件(显示元件)(40个) 图标 英文名称 元件名称 使用说明 服务器端 客户端 Pane 显示块 是一个显示块,是HTML的div标签 √ Row 行 行元件中的显示元件 ...
随机推荐
- hive体系结构
1.什么是hive Hive是一个基于Hadoop的数据仓库,可以将结构化数据映射成一张表,并提供类SQL的功能,最初由Facebook提供,使用HQL作为查询接口.HDFS作为存储底层.mapRed ...
- A Simple Problem with Integers---poj3468线段树
http://poj.org/problem?id=3468 题意:有一个比较长的区间可能是100000.长度, 每个点都有一个值(值还比较大), 现在有一些操作: C a b c, 把区间a-- ...
- 洛谷P2657 windy数 [SCOI2009] 数位dp
正解:数位dp 解题报告: 传送门! 这题一看就是个数位dp鸭,"不含前导零且相邻两个数字之差至少为2"这种的 然后就直接套板子鸭(板子戳总结,懒得放链接辣QAQ 然后就是套路 然 ...
- Memcached与redis的比较--stackoverflow（转）
原文:http://blog.nosqlfan.com/html/3729.html 这两年Redis火得可以,Redis也常常被当作Memcached的挑战者被提到桌面上来.关于Redis与Memc ...
- （4.15）存储DAS,NAS,SAN在数据库存储上的应用
关键词:存储,硬盘接口类型,磁盘类型,网络类型,DAS,DNS,SAN 转自:http://blog.51cto.com/qianzhang/1254617 一. 硬盘接口类型 1. 并行接口还是串行 ...
- mysql 数据表的增删改查 目录
mysql 表的增删改查 mysql 表的增删改查 修改表结构 mysql 复制表 mysql 删除表
- mysql 数据操作 单表查询 目录
mysql 数据操作 单表查询 mysql 数据操作 单表查询 简单查询 避免重复DISTINCT mysql 数据操作 单表查询 通过四则运算查询 mysql 数据操作 单表查询 concat()函 ...
- PHP移动互联网开发笔记（6）——MySQL数据库基础回想
近期看了一些架构方面的资料.可是发现基础知识都不怎么坚固,接下来的一段时间.我会定期总结基础知识. 一.数据类型 1.整型 数据类型 存储空间 说明 取值范围 TINYINT 1字节 很小的整 ...
- Ubuntu 下Apache安装和配置
在Ubuntu上安装Apache,有两种方式:1 使用开发包的打包服务,例如使用apt-get命令:2 从源码构建Apache.本文章将详细描述这两种不同的安装方式. 方法一:使用开发包的打包服务—— ...
- word 加载adobe acrobat ,保存word中的清晰图片
1:先安装 adobe 并激活 https://blog.csdn.net/xintingandzhouyang/article/details/82558235 2:打开word,点击 文件&g ...