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 行 行元件中的显示元件 ...
随机推荐
- POJ 3580 - SuperMemo - [伸展树splay]
题目链接:http://poj.org/problem?id=3580 Your friend, Jackson is invited to a TV show called SuperMemo in ...
- ECNU 3260 - 袋鼠妈妈找孩子
题目链接:http://acm.ecnu.edu.cn/problem/3260/ Time limit per test: 1.5 seconds Time limit all tests: 10. ...
- [No00004F]史上最全Vim快捷键键位图（入门到进阶）vim常用命令总结
在命令状态下对当前行用== (连按=两次), 或对多行用n==(n是自然数)表示自动缩进从当前行起的下面n行.你可以试试把代码缩进任意打乱再用n==排版,相当于一般IDE里的code format.使 ...
- easyui datagrid加载数据和分页
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding=& ...
- Photoshop制作倒影的两种方法
图片加了倒影,画面立刻变得生动起来.而用PS,制作倒影是如此的方便. 素材1 将素材1导入文档,ctrl+J复制图层,编辑-变换-垂直翻转将翻转的图层拖至下方 为翻转的图层添加图层蒙版,选中渐变工具, ...
- flask_SQLAlchemy常用数据类型及列选项
SQLAlchemy常用数据类型:1. Integer:整形,映射到数据库中是int类型.2. Float:浮点类型,映射到数据库中是float类型.他占据的32位.3. Double:双精度浮点类型 ...
- lmathlib文件
lua的math库是通过lua扩展而来,主要对系统math库进行了一次封装,以供lua使用,一般可以从lmathlib文件开始阅读源码. //绝对值 static int math_abs (lua_ ...
- ［Google Maps API 3］Marker从Clusterer中分离及Marker置于Cluster上一层的解决办法
在Google Maps API的使用中,经常用到Clusterer来避免过密的Marker显示.但仔细看一下Clusterer的设置参数中并没有直接将某些Marker除外的方法,那遇到这样的需求,怎 ...
- 纯css打造凹进与突出效果
1.凹进效果 background:#f2f2f2 center repeat; border-bottom: 1px solid #e9e9e9;border-top: 1px solid # ...
- 分享一个自定义的 console 类，让你不再纠结JS中的调试代码的兼容
问题的产生 在写JS的过程中,为了调试我们常常会写很多 console.log.console.info.console.group.console.warn.console.error代码来查看JS ...