JavaScript
引用外部js : <script src="2.js"type="text/javascript"></script>
Java是一门弱类型的语言;
变量的声明用var
全局变量:1.在方法外声明的变量;
2.在方法内声明,没有加var声明的变量
局部变量:在方法内部用var声明的变量
Javascript:void(0);用于超链接
数据类型:
1. undefined未定义(声明变量,但未赋值)
2. null 空
3. boolean
4. 字符串string (单引号,双引号)
5. 数值 number
6. 对象object
1/0=NaN!=NaN
数据类型的转换:
布尔型↔字符串↔数字
* true↔”true” ↔1
* false↔”false” ↔0
数字↔字符串
* 1234↔”1234”
null ↔布尔型↔数字↔字符串
* null↔false↔0↔”null”
undefined ↔布尔型↔数字↔字符串
* undefined ↔false↔NaN↔” undefined ”
} === 等同符:不会发生类型的自动转化!
} == 等值符:会发生类型自动转化、自动匹配!
函数声明: function 函数名(形参列表){函数体}
var 函数名 = new Function(函数体;);
var 函数名 = function() {函数体;}
return 同Java;
函数属于对象
函数可以作为参数传递
事件机制:
作用
? 1.验证用户输入窗体的数据。
? 2.增加页面的动感效果。
window方法:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>window方法</title>
</head>
<body>
<input type="button" value="alert消息框" onclick="testAlert();" />
<input type="button" value="confirm确认框" onclick="testConfrim();" />
<input type="button" value="preompt询问框" onclick="testPrompt();" />
<input type="button" id="" value="测试Open" onclick="testOpen();" />
</body>
<script>
var bj=90909;
function testAlert(){
window.alert("其实‘window.‘可以省略");
}
function testConfrim(){
var f =window.confirm("你真的要离我而去吗?");
if(f){
window.alert("你去死,我再也不想见到你....");
}else{
alert("你好讨厌....");
}
}
function testPrompt(){
var m=window.prompt("请输入你想输入的话!","默认不输")
}
function testOpen(){
window.open("son.html", "wndowName", "height=300, width=500, top=200, left=400, toolbar=yes, menubar=no, scrollbars=no, resizable=no, location=no, status=yes");
}
</script>
</html>
操作元素节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3> 元素节点,直接获取
<input type="button" value="直接获取" onclick="testGetDirect();" />
</h3>
<h3> 元素节点,间接获取
<input type="button" value="间接获取" onclick="testGetInirect();" />
</h3>
<div id="showDiv">
<input class="aaa" type="text" name="uname" id="uname" />
<input type="password" name="pwd" id="pwd" />
<input type="text" name="realname" id="realname" />
<input type="text" name="email" id="email" />
<input type="radio" name="gender" value="1" />
<input type="radio" name="gender" value="2" />
</div>
</body>
<script>
function testGetDirect() {
//通过ID获取
var uname = document.getElementById("uname");
//通过标签的名字
var inputs = document.getElementsByTagName("gender");
//通过名字获取
var names = document.getElementsByName("input");
//通过类的名字获取
var clazz = document.getElementsByClassName("abc");
alert(clazz.length);
}
function testGetInirect(){
//父子关系
var parent = document.getElementById("showDiv");
var children = parent.childNodes;
//子父关系
var child =document.getElementById("uname");
var father = child.parentNode;
//兄弟节点
var sibling = document.getElementById("realname");
var previous = sibling.previousSibling;
var next = sibling.nextSibling;
var pm = sibling.previousElementSibling;
var nm = sibling.nextElementSibling;
}
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>操作元素节点</title>
</head>
<body>
<h3>属性
<input type="button" value="testAttribtue" onclick="testAttribute();" />
</h3>
<h3>文本
<input type="button" value="testTest" onclick="testText();" />
</h3>
<h3>样式
<input type="button" value="testCss" onclick="testCss();" />
</h3>
<h3>样式
<input type="button" value="testNode" onclick="testNode();"
</h3>
<hr />
<input type="text" id="uname" value="北京尚学堂" abb="1234563" />
<div id="showDiv">北京北京北京北京北京北京</div>
<div id="oper" class="divred">
<input type="text" id="school" value="北京尚学堂" />
</div>
</body>
<script>
function testAttribute() {
var uname = document.getElementById("uname");
// 操作属性
uname.value = "尚学堂";
uname.type = "button";
alert(uname.value + "-------------" + uname.type);
// 操作属性
alert(uname.getAttribute("type"));
uname.setAttribute("type", "button");
alert(uname.getAttribute("abb"));
alert(uname.getAttribute("value"));
}
function testText() {
var div = document.getElementById("showDiv");
//操作文本
div.innerHTML = "wlecom tobjbjbjbjbjbj";
alert(div.innerHTML);
div.innerHTML = "<h1 style=‘color:red;‘>div.innerHTML</h1>";
}
function testCss() {
var div = document.getElementById("showDiv");
//操作类
div.className = "divred";
//操作具体样式
div.style.height = "200px";
div.style.width = "600px";
div.style.backgroundColor = "gray";
div.style.lineHeight = "200px";
div.style.fontSize = "40px";
div.style.textAlign = "center";
div.style.fontFamily = "楷体";
}
function testNode() {
var div = document.getElementById("oper");
var school = document.getElementById("school");
//创建节点
var n = document.createElement("input");
n.type = "button";
n.value = "bjsxt" + Math.random();
n.onclick = function() {
//alert(this.value);
this.parentNode().removeChild(this);
};
//添加节点
//div.appendChild(n);
// //插入节点
//div.insertBefore(n, school);
// //替换节点
// div.replaceChild(n, school);
// //删除节点
// div.removeChild(school);
}
</script>
</html>
javascript事件列表 |
|||
事件 |
浏览器支持 |
解说 |
|
一般事件 |
onclick |
IE3、N2 |
鼠标点击时触发此事件 |
ondblclick |
IE4、N4 |
鼠标双击时触发此事件 |
|
onmousedown |
IE4、N4 |
按下鼠标时触发此事件 |
|
onmouseup |
IE4、N4 |
鼠标按下后松开鼠标时触发此事件 |
|
onmouseover |
IE3、N2 |
当鼠标移动到某对象范围的上方时触发此事件 |
|
onmousemove |
IE4、N4 |
鼠标移动时触发此事件 |
|
onmouseout |
IE4、N3 |
当鼠标离开某对象范围时触发此事件 |
|
onkeypress |
IE4、N4 |
当键盘上的某个键被按下并且释放时触发此事件. |
|
onkeydown |
IE4、N4 |
当键盘上某个按键被按下时触发此事件 |
|
onkeyup |
IE4、N4 |
当键盘上某个按键被按放开时触发此事件 |
|
页面相关事件 |
onabort |
IE4、N3 |
图片在下载时被用户中断 |
onbeforeunload |
IE4、N |
当前页面的内容将要被改变时触发此事件 |
|
onerror |
IE4、N3 |
出现错误时触发此事件 |
|
onload |
IE3、N2 |
页面内容完成时触发此事件 |
|
onmove |
IE、N4 |
浏览器的窗口被移动时触发此事件 |
|
onresize |
IE4、N4 |
当浏览器的窗口大小被改变时触发此事件 |
|
onscroll |
IE4、N |
浏览器的滚动条位置发生变化时触发此事件 |
|
onstop |
IE5、N |
浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断 |
|
onunload |
IE3、N2 |
当前页面将被改变时触发此事件 |
|
表单相关事件 |
onblur |
IE3、N2 |
当前元素失去焦点时触发此事件 |
onchange |
IE3、N2 |
当前元素失去焦点并且元素的内容发生改变而触发此事件 |
|
onfocus |
IE3 、N2 |
当某个元素获得焦点时触发此事件 |
|
onreset |
IE4 、N3 |
当表单中RESET的属性被激发时触发此事件 |
|
onsubmit |
IE3 、N2 |
一个表单被递交时触发此事件 |
|
滚动字幕事件 |
onbounce |
IE4、N |
在Marquee内的内容移动至Marquee显示范围之外时触发此事件 |
onfinish |
IE4、N |
当Marquee元素完成需要显示的内容后触发此事件 |
|
onstart |
IE4、 N |
当Marquee元素开始显示内容时触发此事件 |
|
编辑事件 |
onbeforecopy |
IE5、N |
当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发此事件 |
onbeforecut |
IE5、 N |
当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发此事件 |
|
onbeforeeditfocus |
IE5、N |
当前元素将要进入编辑状态 |
|
onbeforepaste |
IE5、 N |
内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发此事件 |
|
onbeforeupdate |
IE5、 N |
当浏览者粘贴系统剪贴板中的内容时通知目标对象 |
|
oncontextmenu |
IE5、N |
当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件 |
|
oncopy |
IE5、N |
当页面当前的被选择内容被复制后触发此事件 |
|
oncut |
IE5、N |
当页面当前的被选择内容被剪切时触发此事件 |
|
ondrag |
IE5、N |
当某个对象被拖动时触发此事件 [活动事件] |
|
ondragdrop |
IE、N4 |
一个外部对象被鼠标拖进当前窗口或者帧 |
|
ondragend |
IE5、N |
当鼠标拖动结束时触发此事件,即鼠标的按钮被释放了 |
|
ondragenter |
IE5、N |
当对象被鼠标拖动的对象进入其容器范围内时触发此事件 |
|
ondragleave |
IE5、N |
当对象被鼠标拖动的对象离开其容器范围内时触发此事件 |
|
ondragover |
IE5、N |
当某被拖动的对象在另一对象容器范围内拖动时触发此事件 |
|
ondragstart |
IE4、N |
当某对象将被拖动时触发此事件 |
|
ondrop |
IE5、N |
在一个拖动过程中,释放鼠标键时触发此事件 |
|
onlosecapture |
IE5、N |
当元素失去鼠标移动所形成的选择焦点时触发此事件 |
|
onpaste |
IE5、N |
当内容被粘贴时触发此事件 |
|
onselect |
IE4、N |
当文本内容被选择时的事件 |
|
onselectstart |
IE4、N |
当文本内容选择将开始发生时触发的事件 |
|
数据绑定 |
onafterupdate |
IE4、N |
当数据完成由数据源到对象的传送时触发此事件 |
oncellchange |
IE5、N |
当数据来源发生变化时 |
|
ondataavailable |
IE4、N |
当数据接收完成时触发事件 |
|
ondatasetchanged |
IE4、N |
数据在数据源发生变化时触发的事件 |
|
ondatasetcomplete |
IE4、N |
当来子数据源的全部有效数据读取完毕时触发此事件 |
|
onerrorupdate |
IE4、N |
当使用onBeforeUpdate事件触发取消了数据传送时,代替onAfterUpdate事件 |
|
onrowenter |
IE5、N |
当前数据源的数据发生变化并且有新的有效数据时触发的事件 |
|
onrowexit |
IE5、N |
当前数据源的数据将要发生变化时触发的事件 |
|
onrowsdelete |
IE5、N |
当前数据记录将被删除时触发此事件 |
|
onrowsinserted |
IE5、N |
当前数据源将要插入新数据记录时触发此事件 |
|
外部事件 |
onafterprint |
IE5、N |
当文档被打印后触发此事件 |
onbeforeprint |
IE5、N |
当文档即将打印时触发此事件 |
|
onfilterchange |
IE4、N |
当某个对象的滤镜效果发生变化时触发的事件 |
|
onhelp |
IE4、N |
当浏览者按下F1或者浏览器的帮助选择时触发此事件 |
|
onpropertychange |
IE5、N |
当对象的属性之一发生变化时触发此事件 |
|
onreadystatechange |
IE4、N |
当对象的初始化属性值发生变化时触发此事件 |
待续.....
其它高级功能参见W3C: http://www.w3chtml.com/js/