前言: 昨天写了篇关于 JavaScript 的,今天写篇 Dom 的 (插入 4 个实例),写完之后感觉知识点还不少~ 内容当然会用到的知识。下篇博客会写关于 jQuery~~
- 1 <!DOCTYPE html>
- 2 <html lang="en">
- 3 <head>
- 4 <meta charset="UTF-8">
- 5 <title>Title</title>
- 6 </head>
- 7 <body>
- 8 <div>
- 9 <div id="aa">zcl</div>
- 10 </div>
- 11 <ul>
- 12 <li>11</li>
- 13 <li>22</li>
- 14 <li>33</li>
- 15 </ul>
- 16 <div>
- 17 <div class="bb">zcl</div>
- 18 <div class="bb">zcl</div>
- 19 <div class="bb">zcl</div>
- 20 </div>
- 21
- 22 <form>
- 23 <p>用户名:<input name="username" value="zcl"/></p>
- 24 <p>密码:<input name="pwd" value="123"/></p>
- 25 </form>
- 26
- 27 <script type="text/javascript"> //<script> 其实默认为<script type="text/javascript"> 表示要写JS代码
- 28 var nid = document.getElementById("aa");
- 29 nid.innerText = "alex";
- 30
- 31 var lis = document.getElementsByTagName("li");
- 32 for(var i in lis){
- 33 var item = lis[i];
- 34 item.innerText = i;
- 35 }
- 36
- 37 var lis2 = document.getElementsByClassName("bb");
- 38 console.log(lis2); //打印: [div.bb, div.bb, div.bb]
- 39
- 40 var username = document.getElementsByName("username")[0];
- 41 var pwd = document.getElementsByName("pwd")[0];
- 42 console.log(username, pwd); //打印: <input name="username" value="zcl"> <input name="pwd" value="123">
- 43 console.log(username.value, pwd.value); //打印: zcl 123
- 44 </script>
- 45
- 46 </body>
- 47 </html>
运行界面:
实例一: 自增数
接下来做一个好玩的东西,在界面做一个按纽 (不会做出按纽,建议看我写的),按纽前面是数字 1,你一按 button,数字变为 2,再按变为 3.……
View Code
- 1 <!DOCTYPE html>
- 2 <html lang="en">
- 3 <head>
- 4 <meta charset="UTF-8">
- 5 <title>s3</title>
- 6 </head>
- 7 <body>
- 8
- 9 <div>
- 10 <div id="num">1</div>
- 11 <!--一点击button,就会执行onclick属性里面的值(eg:某个函数)-->
- 12 <input type="button" value="+1" onclick="Add()"/>
- 13 </div>
- 14
- 15 <script>
- 16 function Add() {
- 17 // alert("hello");
- 18 var nid = document.getElementById("num");
- 19 var text = nid.innerText;
- 20 text = parseInt(text);
- 21 text += 1;
- 22 nid.innerText = text;
- 23 }
- 24 </script>
- 25 </body>
- 26 </html>
下面用个例子来说明两者区别:
- 1 <!DOCTYPE html>
- 2 <html lang="en">
- 3 <head>
- 4 <meta charset="UTF-8">
- 5 <title>Title</title>
- 6 </head>
- 7 <body>
- 8 <div id = "n1">
- 9 zcl
- 10 <h2>alex</h2>
- 11 </div>
- 12
- 13 <script type="text/javascript">
- 14 var text = document.getElementById("n1");
- 15 console.log(text.innerText); //只取文本内容,取alex而不是<h2>alex</h2>
- 16 console.log(text.innerHTML);
- 17 </script>
- 18
- 19 </body>
- 20 </html>
运行界面:
下面以 textarea 为例 (input,select 测试只需在下面代码改下 id 便可~),获取文本框原有值 zcl, 点击确定后将 zcl 修改为 alex:
View Code
- 1 <!DOCTYPE html>
- 2 <html lang="en">
- 3 <head>
- 4 <meta charset="UTF-8">
- 5 <title>s5</title>
- 6 </head>
- 7 <body>
- 8 <h3><input type="button" onclick="GetValue()" value="获取值"></h3>
- 9 <input id = "n2" type="text"/>
- 10 <select id="n3">
- 11 <option value="1">上海</option>
- 12 <option value="2">北京</option>
- 13 <option value="3">广州</option>
- 14 </select>
- 15 <textarea id="n4">alex</textarea>
- 16
- 17
- 18 <script type="text/javascript">
- 19 function GetValue() {
- 20 var obj = document.getElementById("n4");
- 21 alert(obj.value);//获取值
- 22 //obj.value = "";//可对获取的值进行修改如:清空
- 23 //obj.value = "2"; //将获取的值修改为2,即北京
- 24 obj.value = "zcl";
- 25 }
- 26
- 27 </script>
- 28
- 29 </body>
- 30 </html>
运行界面 (3 张图):
前面说到了 onclick 事件,事件肯定不止 onclick 一个啦~~
实例二: 下面以 onfocus 和 onblur 事件为例,做一个高大上的搜索框:
搜索框实例可看做以下知识的综合:
功能讲解:
搜索框默认文字是 "请输入关键字",当鼠标一点 (即框获得焦点),原本的 "请输入关键字" 消失;
若原本框内文字为空 (或内容为空格),当框失去焦点时,恢复原本的内容 "请输入关键字"。感觉好高大上!!!
View Code
- 1 < !DOCTYPE html > 2 < html lang = "en" > 3 < head > 4 < meta charset = "UTF-8" > 5 < title > s5 < /title>
- 6 </head > 7 < body > 8 < input type = "text"id = "search"value = "请输入关键字"onfocus = "Focus()"onblur = "Blur()" / >9 10 < script type = "text/javascript" > 11
- function Focus() {
- 12
- var nid = document.getElementById("search");
- 13
- var value = nid.value;
- 14
- if (value == "请输入关键字") {
- 15 nid.value = "";
- 16
- }
- 17
- }
- 18
- function Blur() {
- 19
- var nid = document.getElementById("search");
- 20
- var value = nid.value;
- 21
- if (value.trim() == "") {
- 22 nid.value = "请输入关键字";
- 23
- }
- 24
- }
- 25 26 < /script>
- 27 </body > 28 < /html>/
- <a href="http://www.cnblogs.com/0zcl/" target="_blank" onclick="return AddElement();">
- 添加
- </a>
下面给出结论:
代码实例:
View Code对于第二种: 不能通过 innerText 往里添加 (nid.innerText = createObj;),添加的只是 href, 如下图:
操作实例见下图:
提交表单有两种形式:
1. 通过 submit 提交表单, 一点提交,将输入的内容链接到 sogou 进行搜索 (说实话, 第一次运行出现搜索的内容时,我的天呐!! 神奇啊!!!):
- 1 <!DOCTYPE html>
- 2 <html lang="en">
- 3 <head>
- 4 <meta charset="UTF-8">
- 5 <title>s7</title>
- 6 </head>
- 7 <body>
- 8 <form id="form" action="https://www.sogou.com/web" method="get">
- 9 <input name="query" type="text" />
- 10 <input type="submit" value="提交" />
- 11 </form>
- 12
- 13 </body>
- 14 </html>
2. 通过 JS 提交表单:
View Code
- 1 <!DOCTYPE html>
- 2 <html lang="en">
- 3 <head>
- 4 <meta charset="UTF-8">
- 5 <title>s7</title>
- 6 </head>
- 7 <body>
- 8 <form id="form" action="https://www.sogou.com/web" method="get">
- 9 <input name="query" type="text" />
- 10 <!--<input type="submit" value="提交" />-->
- 11 <div onclick="Sumbit();">提交</div>
- 12 </form>
- 13
- 14 <script>
- 15 function Sumbit() {
- 16 document.getElementById("form").submit();
- 17 }
- 18 </script>
- 19 </body>
- 20 </html>
实例三: 接下来做个高逼格的搜索框 (为实例二的进阶版):
View Code
- 1 <!DOCTYPE html>
- 2 <html lang="en">
- 3 <head>
- 4 <meta charset="UTF-8">
- 5 <title>form</title>
- 6 </head>
- 7 <body>
- 8 <form action="https://www.sogou.com/web" method="get">
- 9 <input type="text" name="query" />
- 10 <!--当输入为空时,不提交-->
- 11 <input id="submit" type="submit" onclick="return MySubmit();" value="提交" />
- 12 </form>
- 13 <script>
- 14 function MySubmit() {
- 15 var q = document.getElementsByName("query")[0];
- 16 var value = q.value;
- 17 if(value.trim()){ //有值时
- 18 return true;
- 19 }else {
- 20 alert("请输入内容");
- 21 return false; //不执行submit
- 22 }
- 23 }
- 24 </script>
- 25 </body>
- 26 </html>
当提交表单为空时,一提交会弹出下面的提示框:
前三个可在浏览器 Console 界面下运行,第 4、5 个之前早就用过了,懂的,下面讲下 confirm.
- 1 window.location.href //返回当前的url
- 2 window.location.reload() //刷新
- 3 window.location.href = "http://www.cnblogs.com/0zcl/" //跳转到我的博客网址
- 4 console.log()
- 5 alert()
- 6 confirm() //会弹出一个框,可点击确定或取消
confirm 实例代码:
View Code
- 1 <!DOCTYPE html>
- 2 <html lang="en">
- 3 <head>
- 4 <meta charset="UTF-8">
- 5 <title>特殊</title>
- 6 </head>
- 7 <body>
- 8 <input type="button" value="over me" onmouseover="Myconfirm();" />
- 9 <script>
- 10 function Myconfirm() {
- 11 var ret = confirm("SB");
- 12 console.log(ret); //返回true(当按确定时)或false(当按取消时);
- 13 }
- 14 </script>
- 15 </body>
- 16 </html>
鼠标一接触按钮就会弹出下面的框 (注意 Console 界面的 true,false):
啥是跑马灯? 根据我在网上找到的某个定义: 跑马灯在编程中,通常指有时需要用一矩形条显示少量用户特别关心的信息,这条信息串首尾相连,向一个方向循环滚动。证券业中常用 "跑马灯" 来显示不断变化的股票行情;实际应用中也常通过 "跑马灯" 来监视是否死机。(感觉很高大上!)
问题一: 如何使字体向一个方向循环滚动
我可以设置一个方向 Func,每执行一次 Func,便使第一个字符移动到最后一个; 接下来只要每隔一小段时间来调用 Func() 便 OK 了!
问题二: 如何每隔一小段时间便调用 Func()?这就需要定时器的知识了。
- obj = setInterval("Func()", 500); //设置定时器(每0.5s执行一次Func方法)并获取句柄(全局变量); 创建一个定时器时默认会返回一个句柄;
问题三: 如何清除定时器,使字体不继续滚动
可以写个按钮,一按 button 就调用某个方法清除定时器:
- 1
- function StopInterval() {
- 2 //清除定时器
- 3 clearInterval(obj);
- 4
- }
问题四: 你现在挑剔到变态了,只想字符串移动一次后停止,如何让定时器执行一次后清除。如何实现呢??(应用场景: 删除 QQ 邮箱邮件时,上方会出现删除成功字样,一小段时间后会消失。)
- obj = setTimeout("Func()", 5000); //5s后执行一次后停止,想要停止的话可用clearTimeout(obj);
跑马灯代码:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9 10 /*
- 11 setInterval("操作", "间隔(默认为毫秒)");
- 12 其实是每隔一段时间创建一个线程
- 13 */
- 14 // 创建一个定时器时默认会返回一个句柄;设置定时器并获取句柄(全局变量)
- 15 obj = setInterval("Func()", 500);
- 16 // obj = setTimeout("Func()", 5000); //5s后执行一次后停止,想要停止的话可用clearTimeout();
- 17
- 18 function StopInterval() {
- 19 //清除定时器
- 20 clearInterval(obj);
- 21 }
- 22
- 23 function Func() {
- 24 var text = document.title; //获取title的内容
- 25 var firstChar = text.charAt(0); //获取第一个字符的内容
- 26 var subText = text.substring(1, text.length);
- 27 var newTitle = subText + firstChar;
- 28 document.title = newTitle;
- 29 }
- 30
- 31
- 32
截了两张图:
写了很久~~
转发注明出处:
来源: http://www.cnblogs.com/0zcl/p/6417506.html