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 行 行元件中的显示元件 ...
随机推荐
- poj3264 balanced lineup【线段树】
For the daily milking, Farmer John's N cows (1 ≤ N ≤ 50,000) always line up in the same order. One d ...
- 1.9TF的过拟合-dropout
不带dropout程序并通过tensorboard查看loss的图像 """ Please note, this code is only for python 3+. ...
- MySQL在linux上的rpm包方式安装方法
1.下载上传mysql server和client rpm包: [root@faspdev mnt]# ls MySQL-client-5.5.53-1.el6.x86_64.rpm MySQL-se ...
- Spark-自定义排序
一.自定义排序规则-封装类 import org.apache.spark.rdd.RDD import org.apache.spark.{SparkConf, SparkContext} /** ...
- I Hate It---hdu1754线段树
题目:http://acm.hdu.edu.cn/showproblem.php?pid=1754 和上一题一样是模板题,就是那道题求得是和,这道求得是最大值: #include<iostrea ...
- 洛谷 P4697 Balloons [CEOI2011] 单调栈/dp (待补充qwq)
正解:单调栈/dp 解题报告: 先放个传送门qwq 话说这题是放在了dp的题单里呢?但是听说好像用单调栈就可以做掉所以我就落实下单调栈的解法好了qwq (umm主要如果dp做好像是要斜率优化凸壳维护双 ...
- Hadoop的那些事儿（转）
原文:http://www.searchtb.com/tag/mapreduce 在说Hadoop之前,作为一个铁杆粉丝先粉一下Google.Google的伟大之处不仅在于它建立了一个强悍 ...
- javaScript错误（一）Cannot call method 'addEventListener' of null
Cannot call method 'addEventListener' of null 原因很简单,JavaScript代码中要引用到DOM对象,但是这个DOM对象在JavaScript执行后才会 ...
- format格式化输出
python格式化输出,format print("""********** Screen: {size} Density: {dpi} Device: {device} ...
- ovs的主要代码函数及大体结构图
作者: 北京-小武 邮箱:night_elf1020@163.com 新浪微博:北京-小武 最终抽时间把openvswitch的2.0代码看的思路汇总了下,因为是曾经好早下载的.看完了也才看到2.1依 ...