欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js入门

程序员文章站 2022-07-12 14:31:05
...

本文完全转载自   http://xmong.iteye.com/blog/1286221  原文整理的确实很经典!

 

1, JS支持三种对象类型
(1) JS内置对象(如Date,Array, String, Math等)。
(2) 文档对象模型(DOM )。
(3) 自定义对象。

2, html中运行js脚本的顺序。
(1) html中先执行<head>内的JS,无论该js是嵌入代码或是指向一个js文件,因为这些脚本不能再web页面上建立输出,所以这个位置可定义以后要使用的函数。
(2) html中后执行<body>内的JS,body中的js安先后顺序执行。
(3) html中最后执行js事件处理程序,如可以在<head>中定义事件处理函数,并在html事件处理程序中使用它们。

3, DOM对象
为了操作浏览器和文档,js使用分层的父对象和子对象,这就是DOM。dom不是js语言的一部分,而是内置在浏览器中的一个应用程序的api接口,该对象的组织类似一个树型结构,表示一个web文档的所有内容和组件,Dom对象拥有属性(描述页面或文档的变量)和方法(允许操作web页面)。

4, Window对象
在浏览器对象层次的最顶层是window对象,它表示一个浏览器窗口。

5, Window子对象
Document:document对象代表一个web文档或一个页面。
History:history对象保存着当前地址之前和之后访问过的网址信息,它包括达到前一个地址和后一个地址的方法。
Location:location对象存储的是窗口的当前url网址的信息。

6, JS的数据类型
数字:支持整数和浮点数。
布尔数:真或假两个值。
字符串:一个或多个字符组成。
空值:关键字null。

7, 数据类型的转换
字符串转换为数字类型
ParseInt():将一个字符串转换为整数值。
parseFloat():将一个字符串转换为浮点小数值。
Var strvar = “30 day”
Var numvar = parseInt(strvar);
Numvar的值为:30;
字符串转换为数字函数从字符串的开始处寻找适当的数字,如果没有发现一个有效数字,函数将返回一个特殊值NAN,意思是非数字。

8, 子字符串的使用
toUpperCase():将字符串内所有字符转换为大写
tolowerCase():将字符串内所有字符转换为小写
substring(n , m):返回一个子字符串,索引从0开始,返回从n(包含第n个)到m(不包含第m个)之间的字符串。
charAt(n):返回一个字符,索引从0开始,返回第n个字符。
indexOf(str):查找子字符串,返回子字符串在字符串中的索引值,索引从0开始。
indexOf(str , n):查找子字符串,返回子字符串在字符串中的索引值,索引从n开始。
lastIndexOf(str):查找子字符串,返回子字符串在字符串中最后一个的索引值。
split(str):将一个字符串按照分隔符str分割字符串,返回分割后的字符串数组。

9, 数组的使用
join(str):将一个数组按照连接符str连接数组,返回连接后的字符串。
reverse:返回反转后的数组。
sort():将一个数组安升降排序。
sort(funcompare):将一个数组按照funcompare函数比较排序。

10, Math内置对象
Math.ceil(n) >= n:将一个数向上舍入到上一个整数。
Math.floor(n)<=n:将一个数向下舍入到下一个整数。
Math.round(n):将一个数舍入到最接近的整数。
Math.random():可以生成0到1之间的随机小数。
保留两位小数:
Function round(num){
return Math.round(num*100)/100;
}
生成随机数
Function rand(num){
Return Math.floor(Math.random()*num)+1;
}

11, With关键字
With关键字指定一个对象,后面跟着大括号的一个语句块,对于语句块中的每一条语句,没有指定对象的属性都将被假定为该对象的属性。从而可以节约写的代码的时间。
var str = “abcdefg”;
With(str){
Alert(toUpperCase()+“,”+length);
}

12, Date对象
Date对象的创建:
Var date = new Date() // 创建当前时间。
Var date = new Date(2011, 9, 20);
Var date = new Date(2011, 9, 20, 15, 30, 20);
setDate():设置某日
setMonth():设置某月
setFullYear():设置某年
setTime():设置时间
setHours():设置小时
setMinutes():设置分钟
setSeconds():设置秒
getDate():获取某日
getMonth():获取某月
getFullYear():获取某年
getTime():获取时间
getHours():获取小时
getMinutes():获取分钟
getSeconds():获取秒

根据日期排序时间
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" onclick="opnewwin()"/>
<input type="button" value="CLOSE NEW WIN" onclick="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" onclick="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" onfocus="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" onchange="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的参数,则该副本包括原始节点的所有子节点。

树形菜单:
<script type="text/javascript" language="javascript">
function menuli(obj){
var pid = obj.getAttribute("id");
var cid = pid + "-" + "menu";
var cul = document.getElementById(cid);
var pval = obj.firstChild.nodeValue.substring(3)
if(cul.style.display=="none"){
var pr = "[-] " + pval;
obj.firstChild.nodeValue = pr;
cul.style.display = "block";
}else{
var pj = "[+] " + pval;
obj.firstChild.nodeValue = pj;
cul.style.display = "none";
}
}
</script>


<div>
<ul>
<li><a id="one" href="#" onclick="menuli(this)">[-] one menu</a>
<ul id="one-menu">
<li><a href="#">one child1</a></li>
<li><a href="#">one child2</a></li>
</ul>
</li>
<li><a id="two" href="#" onclick="menuli(this)">[-] two menu</a>
<ul id="two-menu">
<li><a href="#">two child1</a></li>
<li><a href="#">two child2</a></li>
</ul>
</li>
</ul>
</div>


21, 添加多事件处理程序
Window.addEventListener(“name”, fun, boolean); 为事件(name事件名称)添加事件(fun事件处理函数),boolean标明事件处理标志位,指明如何处理多个事件,一般设置为false。IE6,IE7和IE8没有提供对它的支持。
Window.removeEventListener(“name”, fun, boolean); 为事件(name事件名称)删除事件(fun事件处理函数)。
Window.attanchEvent(“name”,fun); IE6,IE7和IE8支持该事件添加函数。
Window.detachEvent(“name”, fun);

Window.addEventListener(“click”, clickfun, false);
Window.attanchEvent(“onClick”, clickfun);

添加单击事件
<div id="clickid">aaa</div>
<script type="text/javascript" language="javascript">

var obj = document.getElementById("clickid");
//功能检测技术
if(obj.addEventListener){
alert("a");
obj.addEventListener("click", clickfun, false);
}else if(obj.attachEvent){
obj.attachEvent("onclick", clickfun);
}

function clickfun(){
alert("click");
}
</script>

22, 浏览器信息。
navigator导航器对象,js通过该对象可以读取用户浏览器的信息。
navigator.userAgent; 用户代理头信息,请求web页面时,浏览器发送给web服务器的字符串。
navigator.appName; 浏览器的名称。
Navigator.appVersion; 浏览器版本号。
Navigator.appCodeName; 浏览器内部代码名称。
Navigator.language; 浏览器使用语言。如en_US表示为U.S
Navigator.platform; 计算机平台系统。

跨浏览器的js支持可以使用:功能检测技术。

23, 为不支持JS的浏览器提供支持
使用<noscript>标签,当浏览器不支持js时该标签内的信息会显示。

24, JS代码风范
多注释,少逻辑。
每句js语句以分号结束。
变量声明用var关键字。
多调试用alert。

25, Js错误处理
使用window.onerror属性指定一个函数来设置错误处理程序。一旦指定了错误处理程序,当脚本运行出错时,浏览器将会调用这个指定的函数,而不是弹出常规的错误对话框。
<script language="javascript" type="text/javascript">
function errmsg(message, url, line){
alert("there is error:"+message+"=="+line+"=="+url);
return true;
}
window.onerror = errmsg;

obj.get();
</script>
上面定义的errmsg为window.onerror的错误处理函数。如果该函数的返回值为true,则表示函数已对错误进行了处理,并且屏蔽了默认错误处理或对话框。相反如果返回false,则退出函数后,仍然会进行默认错误处理。

使用try和catch来处理错误代码
try{
obj.get();
}catch(err){
alert(err.description);
}

26, Ajax
Ajax过程
创建请求:
Ajaxreq = new XMLHttpRequest();
Ajaxreq = new ActiveXObject(“Microsoft.XMLHTTP”);//兼容IE5和IE6
打开URL:
Ajaxreq.open(“GET”, “url?para”, true);
Ajaxreq.open(“POST”,”url”,true);

发送请求:
Ajaxreq.send(null);
Ajaxreq.send(para); //post提交参数
等待响应:
Ajaxa.onreadystatechange = ajaxResponse;//响应函数
解释响应数据:
Ajaxreq.readyState
0(未初始化):对象创建成功,但未调用open
1(初始化):open方法调用成功,但尚未发送至服务器
2(请求发送成功):send方法调用成功,请求已经发送至服务器
3(数据下载中):服务器已经返回信息,并且开始下载数据
4(请求结束):服务器下载数据成功,或者网络连接中断请求出错。

27, Image对象。
Image对象的属性:
Complete:该属性用于指示图像是否已经被完全加载,该属性是一个boolean值。
Height和width:该属性给出了图像的尺寸信息。
Hspace和vspace:给出图像的位置信息。
Name:表示图像的属性。
Src:表示他图像的源或url。

28, Js获取窗口或对象的大小,位置
获取窗口或对象的大小
clientWidth和clientHeight:获取窗口/元素的可视区域大小,不包含滚动条和边框。
offsetWidth和offsetHeight:同样是获取窗口/元素的大小,这个属性的大小包括边框和滚动条。

<style>
#de{ position:relative; border:solid 1px gray; width:100px; height:100px; overflow:hidden;}
#te{ position:absolute; top:100px; left:5px;}
</style>


<body>
<div>
<p>jjd jl fsa lwe jdlkjew lj jwke ml wej </p>
</div>

<div id="de">
<div id="te">
<p>adf dfasdf</p>
<p>dfd jj njkjlkj j ljl jlkj j ljlj j</p>
<p>jlkj jlkj l kj kllj </p>
</div>
</div>
<script language="javascript" type="text/javascript">

var $ = function (id){
return document.getElementById(id);
}

var de = $("de"),
te = $("te");

var teh = te.offsetHeight,
deh = de.offsetHeight;


var tetop = deh;

function scrolld(){
if(--tetop < 0-teh){
tetop = deh;
te.style.top = tetop;
window.setTimeout("scrolld();", 30);
}else{
te.style.top = tetop;
window.setTimeout("scrolld();", 30);
}
}

window.setTimeout("scrolld();", 30);

</script>
</body>

获取对象的位置
offsetLeft和offsetTop:获取对象的相对位置,获取位置是比较麻烦,因为其存在浏览器兼容问题,不同的浏览器参照物可能不同,对于 IE 来说,他相对于 parentNode,对于其他浏览器来说,它相对于某个 position 不等于 static 的祖先节点。
不过,幸运的是所有浏览器都有一个 offsetParent 来指向它的参照物。那们,我们就可以轻松地获取到元素相对于其参考物的位置。写一个循环,直接其指向浏览器窗口的边缘。
function(){
var culeft = 0, cutop = 0;
if(obj.offsetParent){
culeft = obj.offsetLeft;
cutop = obj.offsetTop;
obj = obj.offsetParent;
}
return [culeft, cutop];
}
居中显示边距=======================================================
<style>
#did{ position:absolute; width:500px; border: solid 1px #aaa; padding: 10px;}
</style>

<body>
<div>
<ul>
<li>aaaaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaaaa</li>
</ul>
</div>
<div id="did">
whith:<span id="w"></span>---height:<span id="h"></span>
left:<span id="l"></span>---top:<span id="t"></span>
<p>jdfdsljf jsdflj dsfjsdaf sdljf djflsd j dfljds fdljf sdlfjd fljds fj</p>

</div>

<script type="text/javascript" language="javascript">
var $ = function(id){
return document.getElementById(id);
}

var htmlobj = document.documentElement,
divobj = $("did"),
divwid = $("w"),
divhid = $("h"),
divlid = $("l"),
divtid = $("t");

var divw = divobj.offsetWidth,
divh = divobj.offsetHeight;

var setdiv = function (){
var htmlw = htmlobj.clientWidth,
htmlh = htmlobj.clientHeight;

var marginx = htmlw > divw ? -(divw/2) : 0,
marginy = htmlh > divh ? -(divh/2): 0;

var left = marginx == 0 ? 0 : "50%",
top = marginy == 0 ? 0 : "50%";

divobj.style.left = left;
divobj.style.top = top;
divobj.style.marginLeft = marginx;
divobj.style.marginTop = marginy;
}

var getdiv = function(){
var culeft = 0, cutop = 0, obj = divobj;
if(obj.offsetParent){
culeft = obj.offsetLeft;
cutop = obj.offsetTop;
obj = obj.offsetParent;
}
divlid.innerHTML = culeft;
divtid.innerHTML = cutop;
}

window.onresize = function(){
setdiv();
getdiv();
}

</script>

</body>



29, Js控制css样式文件有效性
<link rel="stylesheet" href="test25-1.css" type="text/css" disabled="disabled"/>
<link rel="stylesheet" href="test25-2.css" type="text/css" />
<script language="javascript" type="text/javascript">

function clickstyle(n){
var lin = document.getElementsByTagName("link");

for(var i = 0; i < lin.length; i++){
if(i == n){
lin[n].disabled = true;
}else{
lin[i].disabled = false;
}
}
}

</script>

30, Eval函数
eval:将一个字符串作为javascript语句执行。
eval("x=10;y=20;document.write(x*y)"); 200
document.write(eval(“2+2”)); 4
var x = 10;
document.write(eval(x+17)); 27

相关标签: js