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 行 行元件中的显示元件 ...
随机推荐
- 2018/04/03 每日一个Linux命令 之 lastb/last
今天还在想暴力破解一个服务器是怎么完成的....... -- lastb功能说明:列出登录系统失败的用户相关信息. -- 单独执行 lastb 时候,它会读取/var/log 下的 btmp 文件,输 ...
- sparkuser is not in the sudoers file. This incident will be reported.
切换到root身份$su -(注意有- ,这和su是不同的,在用命令"su"的时候只是切换到root,但没有把root的环境变量传过去,还是当前用户的环境变量,用"su ...
- hbuilder 打包app简易教程
1. 新建app 2. 新建弹窗面板中选择MUi登录模版 ps:在弹出的窗口,填入应用名称,根据需求选择项目位置,以及模板内容. 3. 检验app效果 菜单栏 -> 运行 -> 手机运行 ...
- windows上apache是线程处理请求，linux上apache是进程处理请求
windows上apache是线程处理请求,linux上apache是进程处理请求
- Python3学习之路~2.3 字符串操作
字符串操作 特性:不可修改 name="my \tname is alex" print(name.capitalize()) #首字母变大写 print('Alex LI'.ca ...
- node.js 开发桌面程序， 10个令人惊讶的NodeJS开源项目
用 node-webkit 开源框架. 做企业站,杠杠地 包括电子书和支付宝系统都是node开发的,. 接收传感器发送的数据再运算...对水泵.风机.空调这些硬件进行远程控制. 细数10个令人惊讶的N ...
- HDU1010:Tempter of the Bone(dfs+剪枝)
http://acm.hdu.edu.cn/showproblem.php?pid=1010 //题目链接 http://ycool.com/post/ymsvd2s//一个很好理解剪枝思想的博客 ...
- PAT 1023 Have Fun with Numbers[大数乘法][一般]
1023 Have Fun with Numbers (20)(20 分) Notice that the number 123456789 is a 9-digit number consistin ...
- numpy中的广播(Broadcasting)
Numpy的Universal functions 中要求输入的数组shape是一致的,当数组的shape不相等的时候,则会使用广播机制,调整数组使得shape一样,满足规则,则可以运算,否则就出错 ...
- SQL Expression Language Tutorial 学习笔记二
11. Using Textual SQL 直接使用 SQL 如果实在玩不转, 还是可以通过 test() 直接写 SQL. In [51]: s = text( ...: "SELECT ...