-
总体知识梳理:
文章源自小温Talk.听闻 | 小温Talk-https://azureyun.azurewebsites.net/760.html
2.基本概念:
文章源自小温Talk.听闻 | 小温Talk-https://azureyun.azurewebsites.net/760.html
文章源自小温Talk.听闻 | 小温Talk-https://azureyun.azurewebsites.net/760.html
3.引入方式: 文章源自小温Talk.听闻 | 小温Talk-https://azureyun.azurewebsites.net/760.html
文章源自小温Talk.听闻 | 小温Talk-https://azureyun.azurewebsites.net/760.html
文章源自小温Talk.听闻 | 小温Talk-https://azureyun.azurewebsites.net/760.html
4.基本语法: 文章源自小温Talk.听闻 | 小温Talk-https://azureyun.azurewebsites.net/760.html
文章源自小温Talk.听闻 | 小温Talk-https://azureyun.azurewebsites.net/760.html
文章源自小温Talk.听闻 | 小温Talk-https://azureyun.azurewebsites.net/760.html
5.基本操作: 文章源自小温Talk.听闻 | 小温Talk-https://azureyun.azurewebsites.net/760.html
代码:
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="disa"><a>jfjfjfjfjfjfj</a></div> <!-- id:值是唯一的，类似于人的身份证号。实际工作id是程序员用的 --> <input type="text" id="inputs" value="xq" /> </body> <script> //var objdiv = document.getElementById("disa");//通过id得到元素对象 objdiv.innerHTML=<a href="#">6666</a>; //向相应的开始标签和结束标签中间插入内容 //插入的内容包括标签，标签被浏览器解释执行，文本直接展示，有值就进行覆盖，无值添加值 //var context = objdiv.innerHTML; //alert(context); var inputobj = document.getElementById("inputs"); //var invalue = inputobj.value;//获取表单标签中的值 /// alert(invalue); inputobj.value = "123"; //alert(invalue); </script> </html> |
6.函数:
代码:
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function add(){ //函数体 alert(1); } function add(a,b){ return a+b; } var sum = add(4,6); alert(sum); </script> </head> <body> </body> </html> |
7.事件:
代码:
01.
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function fun(){ alert(123); } </script> </head> <body> <-- onclick事件,当点击button按钮后执行onclick="fun()"中的fun()方法 --> <input type="button" value="展示" onclick="fun()" />
<input type="text" value="展示" onblur="fun()"/> </body> </html> |
02.
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function fun(){ var val = document.getElementById("inputs").value; alert(val); } </script> </head> <!--页面加载完成之后执行onload="fun()"中的fun()方法--> <body onload="fun()"> <input type="text" id="inputs" value="xq" /> </body> </html> |
8.定时器:
代码:
01
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function fun(){ setTimeout("fun2()",2000); //定时器，指定时间后去做某事 } function fun2(){ alert(2); } function fun1(){ setInterval("fun2()",2000);//周期性调用 } function fun2(){ alert(3); } </script> </head> <body> <input type="button" value="点击" onclick="fun()" /> <input type="button" value="点击" onclick="fun1()" /> </body> </html> |
02.
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> /* var t; function fun(){ alert("ok"); t=setTimeout("fun()",3000);//定时对象 } function stopfun(){ clearTimeout(t);//清除定时任务 }*/ var t; function fun(){ t=setInterval("fun2()",3000); } function fun2(){ alert(4); } function stopfun(){ clearInterval(t);//清除定时任务 } </script> </head> <body> <input type="button" value="点击" onclick="fun()" /> <input type="button" value="销毁定时任务" onclick="stopfun()" /> </body> </html> |
9.BOM简介:
代码:
01.
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> //alert(0311); var flag = confirm("你确定要删除吗？"); alert(flag); var val = prompt("请输入：","0311"); alert(val);
var str = "alert(3)"; eval(str); </script> </head> <body> </body> </html> |
02.
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function fun(){ location.href="success.html"; } </script> </head> <body> <input type="button" value="跳转" onclick="fun()" /> </body> </html> |
文章末尾固定信息