js基础（2）

最新推荐文章于 2024-08-20 17:27:34 发布

always953

最新推荐文章于 2024-08-20 17:27:34 发布

阅读量338

点赞数

var arr = new Array();
arr[0] = new Date();
arr[1] = new Date(2001, 3, 28);
arr[2] = new Date(2002, 6, 25);
arr[3] = new Date(2002, 6, 24);
alert(arr[1].getDate());
function arcompare(da, db){
return da.getDate() - db.getDate();
}
arr.sort(arcompare);
alert(arr[1].getDate());

复制代码

13， Event对象
Event属性：不同浏览器的event对象属性不同
IE：
event.button—按下鼠标键，对于鼠标左键，这个属性值为1，而对于鼠标右键通常为2；
event.clientX—事件发生位置的X轴坐标（列，以像素为单位）。
event.clientY—事件发生位置的Y轴坐标（行，以像素为单位）。
event.ctlKey—表示事件发生时是否按下CTRL键
event.altKey—表示事件发生时是否按下ATL键

event.shiftKey—表示事件发生时是否按下SHIFT键
event.keyCode—表示按键的Unicode码。
event.srcElement—元素出现的对象。
Firefox：
event.button—按下鼠标键，对于鼠标左键，这个属性值为0，而对于鼠标右键通常为2；
event.modifiers—表示事件发生时按下了那一个修饰键。（atl，ctrl， shift）
event.pageX—事件发生位置的X轴坐标（列，以像素为单位）。
event.pageY—事件发生位置的Y轴坐标（列，以像素为单位）。
event.which—表示按键的Unicode码。
event.target—元素出现的对象。

按键显示

function displaykey(e){
if(e.keyCode) var keycode = e.keyCode;
else keycode = e.which;
var charvar = String.fromCharCode(keycode);
var ke = document.getElementById("keydis");
ke.innerHTML += charvar;
}
14，打开和关闭窗口，调整窗口大小和位置。
Window.open()：打开窗口。
Window.close()：关闭窗口。
Window.moveTo(x,y)：移动窗口的位置—绝对
Window.moveBy(x,y)：移动窗口的位置—相对
Window.resizeTo(w,h)：调整窗口的大小—绝对
Window.resizeBy(w,h)：调整窗口的大小—相对
var newwin;
function opnewwin(){
newwin = window.open("", "nwin", "toolbar=no, status=no, width=200, height=100");
}
function closenewwin(){
newwin.close();
}
function movenewwin(){
var w = document.theform.w.value;
var h = document.theform.h.value;
var x = document.theform.x.value;
var y = document.theform.y.value;
if(w && h){
newwin.resizeTo(w, h);
}
if(x && y){
newwin.moveTo(x, y);
}
}
<form name="theform">
<input type="button" value="OPEN NEW WIN" οnclick="opnewwin()"/>
<input type="button" value="CLOSE NEW WIN" οnclick="closenewwin()"/>
<br />
width:<input type="text" name="w"/>
height:<input type="text" name="h"/><br />
x-postion:<input type="text" name="x"/>
y-postion:<input type="text" name="y"/><br />
<input type="button" value="go" οnclick="movenewwin()"/>
</form>

复制代码

15， Js超时功能
Var indent = window.setTimeOut(“alert(‘aa’)”, 1000);//1000毫秒后执行一次alert
Window.clearTimeOut(ident);//停止超时事件

刷新

Var count = 0;
Function updatePage(){
Count++;
Var id = window.setTimeOut(“updatePage()”,1000);
}

复制代码

16， Window显示对话框
Window对话框有三种：
Window.alert(msg)：消息对话框
Window.confirm(msg)：确认对话框
Window.prompt(msg，default)：输入对话框

17，获取表单中元素
document.getElementById(Id)；//返回具有指定id属性的元素
document.getElementsByTagName(tag)；//返回具有指定标签名的所有元素的一个数组。可以使用同配符（*）返回含有文档中所有节点的一个数组。
document.formName.elementName；//

18， Text和textarea事件
focus()：设置文本输入焦点事件
blur()：设置文本输入焦点离开事件
select()：设置文本选择事件

onFocus：文本输入焦点时发生的事件
onBlur：文本输入失去焦点时发生的事件
onChange：文本改变后失去失去光标时发生的事件
onSelect：文本输入中文本被选择时发生的事件

焦点事件

function focusinput(){
alert("请先输入用户名");
document.theform.inp.focus();
}
<form name="theform">
用户名：<input name="inp" type="text" />
密码：<input name="in" type="text" οnfοcus="focusinput()" />
</form>

复制代码

19， Js改变CSS样式
document.getElementById(id).style.css=value

改变CSS颜色

function changesele(){
var val = document.theform.sele.value;
document.getElementById("div").style.color=val;
}
<div id="div">test color</div>
<form name="theform">
<select name="sele" οnchange="changesele()">
<option value="blue">blue</option>
<option value="red">red</option>
<option value="gray">gray</option>
</select>
</form>

复制代码

在一些CSS属性的名称中间有连字符，比如border-color等，在js中使用这类属性时，连字符隔开的两部分要合并在一起，连字符后半部分采用首字母大写形式。如borderColor。

20，节点属性和操作方法
节点属性：
nodeName：节点名称，如<div>标签名称为DIV，<input>标签名称为INPUT，文档节点document名称为#document，文本节点的名称为#text。
nodeType：描述节点类型的一个整数，1表示正常的html标签，3表示文本节点，9表示文档节点。
nodeValue：是文本节点包含的实际文本，这个属性对于其他类型的节点无效。
InnerHTML：是任意节点的html内容。

firstChild：是节点的第一个子对象。
lastChild：是节点的最后一个子对象。
childNodes：是节点的所有子节点的数组
previousSibling：是节点之前的兄弟节点。
nextSibling：是节点之后的兄弟节点。
parentNode：是节点的父节点。

document节点的操作方法：
createTextNode(text); 创建一个文本节点。
createElement(tag); 创建一个html元素。
页面中的节点方法：
appendChild(new); 把指定的新节点添加在该对象所有现有节点自后。
insertBefore(new,old); 把指定的新子节点插入到指定的原有子节点之前。
replaceChild(new,old); 把新节点替换指定的原有子节点。
removeChild(node); 从对象中删除一个子节点。
hasChildNodes();判断对象是否含有子节点，有返回true，无返回false。
cloneNode(); 为某个现有节点创建一个副本，如果传入true的参数，则该副本包括原始节点的所有子节点。

树形菜单：