标签：
JavaScript：
增强客户端的交互功能
可以处理的事件：
可以使用JS添加、删除、修改网页上的所有元素及属性。
在HTML网页中动态写入文本。响应网页中的事件，并做出相应处理。可用于较验客户端提交的数据。
检测浏览器类型及版本。处理Cookie.
JavaScript技术体
系核心语言定义
原生对象和内置对象
BOM
DOM
事件处理模型
写的地方：必须写在最下边/body和/html之间，（不管是外联js文件还是内联），内联只写一个script标签
需要掌握的效果：
图片轮播(工作开发用插件)：
下拉列表(左右移动，增删)：
变量：var 名称 =
大小写敏感
名称规范：一般小写，非关键字，单纯数字可能不识别
驼峰命名
原始数据类型(5种)：
undefined：未定义
null：不存在
boolean：布尔
number： 可以是小数或者整数
string： ""
typeof()数据类型，方法
Var x=“abc”;
Alert(typeof x);或alert(typeof(x));alert(0==false) 结果为true
alert(22 == 123) true 数据类型相等即为true
alert(55==‘55’);
结果为true;
alert("121" === 121) false 严格等，包括了数据类型
NaN：非数字 not a number
后来的数据类型：Array，PreExp，Object
function 名称()
js里边最重要的就是DOM
DOM 树，对浏览器的操作
document.getElementById("id").
css 一切皆为框 div
JS 一切皆为对象 object
DOM 一切皆为节点 nodes
父节点子节点
节点的增删该查
append remove innerHTML getelementByID
时间延迟settimeout
setTimeout(表达式,延时时间)在执行时,是在载入后延迟指定时间后,去执行一次表达式,次数是一次
时间间隔setinterval
setInterval(表达式,交互时间)载入后,每隔指定的时间就执行一次表达式
清除时间间隔：cleartimeout clearinterval
target 属性的默认设置是 "_self"，这意味着会在相同的窗口中打开链接。通过把 target 属性设置为 "_blank"，链接将在新窗口中打开。
document.getElementById(‘myAnchor‘).innerHTML="访问 W3School"
document.getElementById(‘myAnchor‘).href=".."
document.getElementById(‘myAnchor‘).target="_blank"
得到焦点/失去焦点
{document.getElementById(‘myAnchor‘).focus()}
{document.getElementById(‘myAnchor‘).blur()}
向输出流写HTML
document.write("<h1>Hello World!</h1>")
document.write(document.title)
document.URL
alert弹出框，弹出他的内容
var x=document.getElementById("myHeader")
alert(x.innerHTML)
有这个x的有多少个，ByName
x.length
锚点数组，第一个锚点显示的内容
document.write(document.anchors[0].innerHTML)
document.write("文档包含： " + document.forms.length + " 个表单。")
document.getElementById("Form1").name
document.images.length
---------------判断按下那个鼠标-----------------
function whichButton(event)
{
var btnNum = event.button;
if (btnNum==2)
{
alert("您点击了鼠标右键！")
}
else if(btnNum==0)
{
alert("您点击了鼠标左键！")
}
else if(btnNum==1)
{
alert("您点击了鼠标中键！");
}
else
{
alert("您点击了" + btnNum+ "号键，我不能确定它的名称。");
}
}
<body onmousedown="whichButton(event)">
----------------给出鼠标坐标-----------------
function show_coords(event)
{
x=event.clientX
y=event.clientY
alert("X 坐标: " + x + ", Y 坐标: " + y)
}
</script>
</head>
<body onmousedown="show_coords(event)">
<p>请在文档中点击。一个消息框会提示出鼠标指针的 x 和 y 坐标。</p>
----------------在键盘上按一个键。消息框会提示出该按键的 unicode--------
function whichButton(event)
{
alert(event.keyCode)
}
</script>
</head>
<body onkeyup="whichButton(event)">
----------在文档中点击某个位置。消息框会提示出指针相对于屏幕的 x 和 y 坐标-------
function coordinates(event)
{
x=event.screenX
y=event.screenY
alert("X=" + x + " Y=" + y)
}
</script>
</head>
<body onmousedown="coordinates(event)">
-------------------------------------------------
按下shifkey键
if (event.shiftKey==1)
----------在文档中点击某个位置。消息框会提示出您所点击的标签的名称--------
function whichElement(e)
{
var targ
if (!e) var e = window.event
if (e.target) targ = e.target
else if (e.srcElement) targ = e.srcElement
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode
var tname
tname=targ.tagName
alert("You clicked on a " + tname + " element.")
}
</script>
</head>
<body onmousedown="whichElement(event)">
-------------------------------------------------
事件类型 event.type
表单发送信息的方法：document.getElementById("myForm").method
组件变灰
document.getElementById("myButton").disabled=true
选中复选框，可以用按钮等实现
document.getElementById("myCheck").checked=true
得到复选框数组选中项，第一个表单的name=coffee
coffee=document.forms[0].coffee
txt=""
for (i=0;i<coffee.length;++ i)
{
if (coffee[i].checked)
{
txt=txt + coffee[i].value + " "
}
把内容转换为大写：
document.getElementById("fname").value=document.getElementById("fname").value.toUpperCase()
单选框的值：onclick="check(this.value)"
表单重置：document.getElementById("myForm").reset()
表达提交，也可以用提交按钮，地址都是表单的地址，方式是表单的额方式
document.getElementById("myForm").submit()
---------------------验证格式，可以加上正则表达式等-------------
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>
</head>
<body>
<form action="/example/hdom/hdom_submitpage.html" 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="提交">
---------------------------------------------------------------------
用API查看这些元素的方法：
1.搜索里边列出主题哪里，属于哪个主题，里边很可能有
2.进入标题，比如js，然后点击HTML DOM，右边点参考书，点击Ctrl + F，看页面有没有这个
元素(比如div的属性，html，参考书，div，属性)
文本框或者其他失去或得到焦点，光标或者外部有个虚线框
document.getElementById(‘text1‘).focus()
document.getElementById(‘text1‘).blur()
选择文本框里边的文字，相当于Ctrl A
document.getElementById("myText").select()
------------------------------------------------------
得到下拉列表并改变相对应框的内容，改变方法onchange，得到元素
function favBrowser()
{
var mylist=document.getElementById("myList")
document.getElementById("favorite").value=mylist.options[mylist.selectedIndex].text
}
</script>
</head>
<body>
<form>
请选择您喜欢的浏览器：
<select id="myList" onchange="favBrowser()">
<option>Internet Explorer</option>
<option>Netscape</option>
<option>Opera</option>
</select>
<p>您喜欢的浏览器是：<input type="text" id="favorite" size="20"></p>
</form>
------------------------------------------------------
--------------------------------------------------------
文本框满了后跳到下一个文本框，比如IP地址，文本框大小，最大长度，下标，焦点
function checkLen(x,y)
{
if (y.length==x.maxLength)
{
var next=x.tabIndex
if (next<document.getElementById("myForm").length)
{
document.getElementById("myForm").elements[next].focus()
}
}
}
</script>
</head>
<body>
<p>这段脚本在达到文本框的最大长度时跳到下一个文本框：</p>
<form id="myForm">
<input size="3" tabindex="1" maxlength="3" onkeyup="checkLen(this,this.value)">
<input size="2" tabindex="2" maxlength="2" onkeyup="checkLen(this,this.value)">
<input size="3" tabindex="3" maxlength="3" onkeyup="checkLen(this,this.value)">
</form>
-------------------------------------------------------
改变框架的源
document.getElementById("frame1").src="../example/hdom/frame_c.html"
把用户带到一个新的地址
window.location="../index.html"
重新加载文档
window.location.reload();
Option 和 Select 对象
禁用并启用下拉列表
取得包含该下拉列表的表单的 id
取得下拉列表中选项的数目
更改下拉列表中的可见行数
选择下拉列表中的多个选项
输出下拉列表中所有选项的文本
取得下拉列表中所选的选项的索引位置
更改被选选项
从下拉列表中删除选项
Screen 对象
检测有关客户机的屏幕的细节
---------------------------------
确认对话框
var r=confirm("Press a button!");
if (r==true)
{
alert("You pressed OK!");
}
else
{
alert("You pressed Cancel!");
}
}
---------------------------------
提示输入框
var name=prompt("请输入您的名字","Bill Gates")
if (name!=null && name!="")
{
document.write("你好，" + name + "！今天过得好吗？")
}
---------------------------------
简单的计时：var t=setTimeout("alert(‘5 seconds!‘)",5000)
显示计时文本
var t1=setTimeout("document.getElementById(‘txt‘).value=‘2 seconds!‘",2000)
var t2=setTimeout("document.getElementById(‘txt‘).value=‘4 seconds!‘",4000)
var t3=setTimeout("document.getElementById(‘txt‘).value=‘6 seconds!‘",6000)
}
一直计时，递归调用，带停止按钮
var c=0
var t
function timedCount()
{
document.getElementById(‘txt‘).value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
function stopCount()
{
clearTimeout(t)
}
设置时钟
---------------------------------------
显示隐藏：
document.getElementById("id1").style.display=("none");没有文档位置
document.getElementById("id1").style.visibility=("hidden");
鼠标移入移出，html里边是hover效果
onmouseout，onmouseover，两个配套使用
如果是后台加载的数据，只能是js来做，css的hover效果因为要写死，在页面内容不多，不用后台加载的时候可以用。
内联框架：iframe在本网页显示其他页面的内容
比如左边有个菜单。
步骤：一、创建，二、指向
<Iframe name="名称a">
<a href = "显示内容的新网址" target = "名称a">
网页的三种输出方法：
document.write("");网页内部
alert("");弹出窗口
console.log("");后台console显示，审查元素里边有个console可以看到，比如密码等
事件流：
window document html body div
事件捕获：从外到内 window到div
事件冒泡：从内到外
innerHTML：元素和文本
innerText：仅仅只包含文本
BOM：浏览器对象模型 (BOM)（Browser Object Model）
=JavaScript Window - 浏览器对象模型
BOM 使 JavaScript 有能力与浏览器“对话”。
JQuery：js的一个框架，把DOM和BOM进行封装，很方便
$("p").apped("sefse");
现在前端常用的是JQuery和安哥拉，js原生代码很少
IFrame框架，现在页面都没有使用框架，都使用循环的数据加载
AJAX（处理同步和异步）
步骤：创建，请求，响应，返回
用的时候直接copy，一点都不用改
标签：
原文地址：http://www.cnblogs.com/chenyuanqiu2008/p/5463987.html
