js学习之路--2

最新推荐文章于 2018-01-30 14:52:56 发布

张张张的博客

最新推荐文章于 2018-01-30 14:52:56 发布

阅读量2.3k

点赞数 1

分类专栏： web前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_28292937/article/details/51915907

版权

web前端专栏收录该内容

34 篇文章 2 订阅

订阅专栏

<span style="font-family: song, Verdana; font-size: 14px; line-height: 22.4px; background-color: rgb(240, 243, 250);">保留两位小数：</span>

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" ο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的参数，则该副本包括原始节点的所有子节点。

树形菜单：

<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="#" οnclick="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="#" οnclick="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>