1. <script language="javascript" type="text/javascript">
JS语句。
</script>
2. 引用外部的js文件
<script language="javascript" type="text/javascript" src="hello.js">
</script>
3. 点击按钮激活事件 通过链接调用函数
<input id="btn" type="button" value="点击" οnclick="btn_click()"/>
ondblclick 双击
<a href="javascript:btn_click()">点击</a>
function btn_click()
{
alert("按了一下");
}
4. 确认用户的选择
var result=confirm("确定删除?");
点击“确定” result = true;
点击“取消” result = false;
5. 通过事件调用函数
页面加载完后,触发事件
<body οnlοad="myFunction()">
</body>
6. 延时定时
function myFunction()
{
myTimeout=window.setTimeout("alert('时间到')",3000);
}
function myFunction2()
{
window.clearTimeout(myTimeout);
}
<body>
<input type="button" value="开始作答" οnclick="myFunction()"/><br>
<hr>
<input type="button" value="A" οnclick="myFunction2()"/>
<input type="button" value="B" οnclick="myFunction2()"/>
<input type="button" value="C" οnclick="myFunction2()"/>
</body>
7. onload 事件 网页中的所有内容都从服务器下载到浏览器后,触发该事件,保证文档完全加载后再进行其他操作。
<script language="javascript" type="text/javascript">
window.οnlοad=myFunction; 不加括号,只要函数名
function myFunction(){
}
</script>
8. onblur 窗口失去焦点
onfocus 窗口获得焦点
9. 通过图片来链接
<a href="http://www.baidu.com" target="_blank"><img src="1.jpg"></a>
10. 修改文本框的值
<script language="javascript" type="text/javascript">
document.οnmοusedοwn=mouseDown;
document.οnmοuseup=mouseUp;
function mouseDown()
{
document.getElementById("txt1").value="按下";
document.getElementById("txt2").value="";
}
function mouseUp()
{
document.getElementById("txt2").value="弹起";
document.getElementById("txt1").value="";
}
</script>
<form name="myForm">
<input type="text" id="txt" value="">
</form>
<script language="javascript" type="text/javascript">
document.myForm.txt.value="xx"; 通过表单直接修改
</script>
11. 表单提交
<form name="myForm" action="javascript:alert('确定提交?');">
<input type="submit" id="txt" value="提交"> type必须为submit
</form>
12. 错误消息提示
document.getElementById("hello").innerHTML="Error";
<h1 id="hello"> </h1>
innerHTML是将等号右边的字符串放在指定标签的页面中。相当于
<h1 id="hello"> Error
</h1>
13. 在链接时调用javascript
<a href="javascript:function()">点击</a>
14. 暂停和时间间隔
可以用window对象的setTimeOut()方法设置暂停.两个参数:要执行的代码和在执行它之前要等待的毫秒数。
var outId = setTimeout(onLoad,2000);
function onLoad(){
document.write("Time");
}
取消还未执行的暂停,可以调用clearTimeOut()方法。clearTimeOut(outId) 把ID传过去。
时间间隔,它无限次地每隔指定时间段就重复一次指定的代码。 setinterval() clearInterval()
15. 后退 前进
<a href="javascript:bhistory.go(-1);">后退</a> history.back()
<a href="javascript:bhistory.go(1);">前进</a> history.forward() 效果一样
16. location.href 改变该属性的值,可导航到新页面
location.reload()重载页面 参数为false 则从缓存中载入,如果为true 则从服务器端载入。默认false
17. 在JavaScript中分配事件处理函数,要获得要处理的对象的引用
var img=document.getElementById("img");
img.οnclick=function (){
img.src="e.jpg";
}
//在IE中添加多个事件处理函数
function myFunction()
{
alert("Click Me");
}
function myFunction2()
{
var im=document.getElementById("img");
im.attachEvent("onclick",myFunction);
//do something
im.detachEvent("onclick",myFunction);
}
DOM方法 addEventListener()和removeEventListener()
18. 改变某个东西的外观
<img src="image1.gif" οnmοuseοver="this.src='image2.gif'" οnmοuseοut="this.src='image1.gif'"
19. 鼠标提示
<a href="http://www.baidu.com" title="baidu">百度</a> 将鼠标移动上去就会有提示
如果你想自定义特别的鼠标提示,则可以创建隐藏的<div />来实现。
function showTip(event)
{
var oDiv=document.getElementById("divTip1");
oDiv.style.visibility="visible";
oDiv.style.left=event.clientX+5;
oDiv.style.top=event.clientY+5;
}
function hideTip(event)
{
var oDiv=document.getElementById("divTip1");
oDiv.style.visibility="hidden";
}
<div id="div1" style="background-color:red;height:50px;width:50px"
οnmοuseοver="showTip(event)" οnmοuseοut="hideTip(event)">
</div>
<div id="divTip1"style="backgroundcolor:yellow;position:absolute;visibility:hidden;padding:5px">
<span style="font-weight:bold">Custom Tooltip</span><br/>
More details can go here
</div>
20. 可折叠区域
function toggle(sDivId)
{
var oDiv=document.getElementById(sDivId);
oDiv.style.display=(oDiv.style.display=="none")?"block":"none";
}
<div style="background-color:Blue; color:White; font-weight:bold; padding:10px; cursor:pointer;"
οnclick="toggle('divContent1')">Click Here
</div>
<div id="divContent1" style="border:3px solid blue; height:100px; padding:10px">
This is some
</div>
<p> </p>
<div style="background-color:Blue; color:White; font-weight:bold; padding:10px; cursor:pointer;"
οnclick="toggle('divContent2')">Click Here
</div>
<div id="divContent2" style="border:3px solid blue; height:100px; padding:10px">
This is some
</div>
21. 表单仅提交一次
<input type="button" value="submit" οnclick="this.disable=true;this.form.submit()">
22.