javascript学习笔记

输出：

document.write("Hello World!")

 

DOM中添加标签：

document.write("<h1>Hello World!</h1>")

 

 

alert("弹窗提示 '\n' ")

 

确认弹窗：

var r=confirm("Press a button!");

if (r==true)

  {

  alert("You pressed OK!");

  }

else

  {

  alert("You pressed Cancel!");

  }

}

 

输入框：

var name=prompt("请输入您的名字","this is hint");

 

 

循环遍历数组：

var x

var mycars = new Array()

mycars[0] = "宝马"

mycars[1] = "奔驰"

mycars[2] = "宾利"

 

for (x in mycars)

{

document.write(mycars[x] + "<br />")

}

 

 

异常处理：

try

   {

   adddlert("Welcome guest!")

   }

catch(err)

   {

   txt="本页中存在错误。\n\n"

   txt+="错误描述：" + err.description + "\n\n"

   txt+="点击“确定”继续。\n\n"

   alert(txt)

   }

 

 

Throw 声明：

try

{

if(x>10)

  throw "Err1"

else if(x<0)

  throw "Err2"

else if(isNaN(x))

  throw "Err3"

}

catch(er)

{

if(er=="Err1")

  alert("错误！该值太大！")

if(er == "Err2")

  alert("错误！该值太小！")

if(er == "Err3")

  alert("错误！该值不是数字！")

}

 

 

脚本错误事件：

function handleErr(msg,url,l)

{

txt="本页中存在错误。\n\n"

txt+="错误：" + msg + "\n"

txt+="URL: " + url + "\n"

txt+="行：" + l + "\n\n"

txt+="点击“确定”继续。\n\n"

alert(txt)

return true

}

 

 

检测浏览器信息：

var x = navigator;

document.write("CodeName=" + x.appCodeName);

document.write("<br />");

document.write("MinorVersion=" + x.appMinorVersion);

document.write("<br />");

document.write("Name=" + x.appName);

document.write("<br />");

document.write("Version=" + x.appVersion);

document.write("<br />");

document.write("CookieEnabled=" + x.cookieEnabled);

document.write("<br />");

document.write("CPUClass=" + x.cpuClass);

document.write("<br />");

document.write("OnLine=" + x.onLine);

document.write("<br />");

document.write("Platform=" + x.platform);

document.write("<br />");

document.write("UA=" + x.userAgent);

document.write("<br />");

document.write("BrowserLanguage=" + x.browserLanguage);

document.write("<br />");

document.write("SystemLanguage=" + x.systemLanguage);

document.write("<br />");

document.write("UserLanguage=" + x.userLanguage);

 

 

创建对象：

 

function person(firstname,lastname,age,eyecolor)

{

this.firstname=firstname

this.lastname=lastname

this.age=age

this.eyecolor=eyecolor

}

 

 

查找特定字符串的位置indexOf()：

var str="Hello world!"

document.write(str.indexOf("Hello") + "<br />")

 

 

查找特定的字符串，如果存在则输出obj.match（)：

var str="Hello world!"

document.write(str.match("world") + "<br />")

 

 

替换字符串中的字符：

var str="Visit Microsoft!"

document.write(str.replace(/Microsoft/,"W3School"))

 

 

JS Date对象实例：

var today=new Date()

var h=today.getHours()

var m=today.getMinutes()

var s=today.getSeconds()

Var day=today.getDay() //获取的是星期几

 

 

合并字符串：

var arr = new Array(3)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

 

var arr2 = new Array(3)

arr2[0] = "James"

arr2[1] = "Adrew"

arr2[2] = "Martin"

 

document.write(arr.concat(arr2))

 

 

分割字符串：

var str = "2,2,3,4,5";

var strs = new Array();

 

strs = str.split(",");  //将str分割后放到strs[i]中

 

 

将数组转换为字符串：

var arr = new Array(3);

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

 

document.write(arr.join());

 

document.write("<br />");

 

document.write(arr.join(".")); //数组元素之间的间隔符号

 

 

排序：

arr.sort();  //对文字数组排序，a-z；

 

 

//对数字排序

function sortNumber(a, b)

{

return a - b; //从小到大的顺序

}

document.write(arr.sort(sortNumber))

 

 

Math对象：

 

Math.round(x); //四舍五入

Math.random(); //取0-1之间的随机数

 

 

node节点对象：

 

在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ：

 

1. nodeName : 节点的名称

 

2. nodeValue ：节点的值

 

3. nodeType ：节点的类型

 

一、nodeName 属性: 节点的名称，是只读的。

 

1. 元素节点的 nodeName 与标签名相同

2. 属性节点的 nodeName 是属性的名称

3. 文本节点的 nodeName 永远是 #text

4. 文档节点的 nodeName 永远是 #document

 

二、nodeValue 属性：节点的值

 

1. 元素节点的 nodeValue 是 undefined 或 null

2. 文本节点的 nodeValue 是文本自身

3. 属性节点的 nodeValue 是属性的值

 

三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:

 

元素类型 节点类型

元素 1

属性 2

文本 3

注释 8

文档 9

 

插入节点：

插入节点appendChild()

在指定节点的最后一个子节点列表之后添加一个新的子节点。

 

语法:

 

appendChild(newnode)

 

参数:

 

newnode：指定追加的节点。

 

 

替换节点：

 

var newNode  = document.createElement("newNode");

var newNodeText = document.createElement("节点内容");

newNode.appendChild(newNodeText); //将内容添加到节点,obj.innerHTML

var oldNode = document.getElementById("oldNode");

oldNode.parentNode.replaceChild(newNode,oldNode);

 

 

计时器：

 

var t=setTimeout("javascript语句",毫秒)

 

clearTimeout(setTimeout_variable)

 

 

 

DOM对象属性：

body	提供对 <body> 元素的直接访问。 对于定义了框架集的文档，该属性引用最外层的 <frameset>。
cookie	设置或返回与当前文档有关的所有 cookie。
domain	返回当前文档的域名。
lastModified	返回文档被最后修改的日期和时间。
referrer	返回载入当前文档的文档的 URL。
title	返回当前文档的标题。
URL	返回当前文档的 URL。

 

DOM对象方法：

 

close()	关闭用 document.open() 方法打开的输出流，并显示选定的数据。
getElementById()	返回对拥有指定 id 的第一个对象的引用。
getElementsByName()	返回带有指定名称的对象集合。
getElementsByTagName()	返回带有指定标签名的对象集合。
open()	打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
write()	向文档写 HTML 表达式 或 JavaScript 代码。
writeln()	等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

 

 

Element对象属性和方法：

 

内容有点多，没看完，

 getAttribute(需要获取的值的属性名);

 innetHTML ;

previousSibling;

nextSibling;

nodeType;

nodeName;

nodeValue;

parentNode;

removeAttribute(属性名);

setAttribute(属性名，属性值);

removeChild();

replaceChild(newNode,oldNode);

 

element.accessKey	设置或返回元素的快捷键。
element.appendChild()	向元素添加新的子节点，作为最后一个子节点。
element.attributes	返回元素属性的 NamedNodeMap。
element.childNodes	返回元素子节点的 NodeList。
element.className	设置或返回元素的 class 属性。
element.clientHeight	返回元素的可见高度。
element.clientWidth	返回元素的可见宽度。
element.cloneNode()	克隆元素。
element.compareDocumentPosition()	比较两个元素的文档位置。
element.contentEditable	设置或返回元素的文本方向。
element.dir	设置或返回元素的文本方向。
element.firstChild	返回元素的首个子。
element.getAttribute()	返回元素节点的指定属性值。
element.getAttributeNode()	返回指定的属性节点。
element.getElementsByTagName()	返回拥有指定标签名的所有子元素的集合。
element.getFeature()	返回实现了指定特性的 API 的某个对象。
element.getUserData()	返回关联元素上键的对象。
element.hasAttribute()	如果元素拥有指定属性，则返回true，否则返回 false。
element.hasAttributes()	如果元素拥有属性，则返回 true，否则返回 false。
element.hasChildNodes()	如果元素拥有子节点，则返回 true，否则 false。
element.id	设置或返回元素的 id。
element.innerHTML	设置或返回元素的内容。
element.insertBefore()	在指定的已有的子节点之前插入新节点。
element.isContentEditable	设置或返回元素的内容。
element.isDefaultNamespace()	如果指定的 namespaceURI 是默认的，则返回 true，否则返回 false。
element.isEqualNode()	检查两个元素是否相等。
element.isSameNode()	检查两个元素是否是相同的节点。
element.isSupported()	如果元素支持指定特性，则返回 true。
element.lang	设置或返回元素的语言代码。
element.lastChild	返回元素的最后一个子元素。
element.namespaceURI	返回元素的 namespace URI。
element.nextSibling	返回位于相同节点树层级的下一个节点。
element.nodeName	返回元素的名称。
element.nodeType	返回元素的节点类型。
element.nodeValue	设置或返回元素值。
element.normalize()	合并元素中相邻的文本节点，并移除空的文本节点。
element.offsetHeight	返回元素的高度。
element.offsetWidth	返回元素的宽度。
element.offsetLeft	返回元素的水平偏移位置。
element.offsetParent	返回元素的偏移容器。
element.offsetTop	返回元素的垂直偏移位置。
element.ownerDocument	返回元素的根元素（文档对象）。
element.parentNode	返回元素的父节点。
element.previousSibling	返回位于相同节点树层级的前一个元素。
element.removeAttribute()	从元素中移除指定属性。
element.removeAttributeNode()	移除指定的属性节点，并返回被移除的节点。
element.removeChild()	从元素中移除子节点。
element.replaceChild()	替换元素中的子节点。
element.scrollHeight	返回元素的整体高度。
element.scrollLeft	返回元素左边缘与视图之间的距离。
element.scrollTop	返回元素上边缘与视图之间的距离。
element.scrollWidth	返回元素的整体宽度。
element.setAttribute()	把指定属性设置或更改为指定值。
element.setAttributeNode()	设置或更改指定属性节点。
element.setIdAttribute()
element.setIdAttributeNode()
element.setUserData()	把对象关联到元素上的键。
element.style	设置或返回元素的 style 属性。
element.tabIndex	设置或返回元素的 tab 键控制次序。
element.tagName	返回元素的标签名。
element.textContent	设置或返回节点及其后代的文本内容。
element.title	设置或返回元素的 title 属性。
element.toString()	把元素转换为字符串。
nodelist.item()	返回 NodeList 中位于指定下标的节点。
nodelist.length	返回 NodeList 中的节点数。

 

来自 <http://www.w3school.com.cn/jsref/dom_obj_all.asp>

 

js与浏览器交互：

获取window尺寸

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

 

 

• window.open() - 打开新窗口
• window.close() - 关闭当前窗口
• window.moveTo() - 移动当前窗口
• window.resizeTo() - 调整当前窗口的尺寸

 

• location.hostname 返回 web 主机的域名
• location.pathname 返回当前页面的路径和文件名
• location.port 返回 web 主机的端口 （80 或 443）
• location.protocol 返回所使用的 web 协议（http:// 或 https://）

 

• history.back() - 与在浏览器点击后退按钮相同
• history.forward() - 与在浏览器中点击按钮向前相同

 

 

Cookie相关：

设置cookie，存放name和date

function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}

 

 

检查是否存在cookie

function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
  {alert('Welcome again '+username+'!')}
else 
  {
  username=prompt('Please enter your name:',"")
  if (username!=null && username!="")
    {
    setCookie('username',username,365)
    }
  }
}

 

 

获取cookie值

function getCookie(c_name)
{
if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=")
  if (c_start!=-1)
    { 
    c_start=c_start + c_name.length+1 
    c_end=document.cookie.indexOf(";",c_start)
    if (c_end==-1) c_end=document.cookie.length
    return unescape(document.cookie.substring(c_start,c_end))
    } 
  }
return ""
}

 

 

事件句柄handler:

onabort	图像的加载被中断。
onblur	元素失去焦点。
onchange	域的内容被改变。
onclick	当用户点击某个对象时调用的事件句柄。
ondblclick	当用户双击某个对象时调用的事件句柄。
onerror	在加载文档或图像时发生错误。
onfocus	元素获得焦点。
onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按下并松开。
onkeyup	某个键盘按键被松开。
onload	一张页面或一幅图像完成加载。
onmousedown	鼠标按钮被按下。
onmousemove	鼠标被移动。
onmouseout	鼠标从某元素移开。
onmouseover	鼠标移到某元素之上。
onmouseup	鼠标按键被松开。
onreset	重置按钮被点击。
onresize	窗口或框架被重新调整大小。
onselect	文本被选中。
onsubmit	确认按钮被点击。
onunload	用户退出页面。

 

 

 

鼠标/键盘属性：

altKey	返回当事件被触发时，"ALT" 是否被按下。
button	返回当事件被触发时，哪个鼠标按钮被点击。
clientX	返回当事件被触发时，鼠标指针的水平坐标。
clientY	返回当事件被触发时，鼠标指针的垂直坐标。
ctrlKey	返回当事件被触发时，"CTRL" 键是否被按下。
metaKey	返回当事件被触发时，"meta" 键是否被按下。
relatedTarget	返回与事件的目标节点相关的节点。
screenX	返回当某个事件被触发时，鼠标指针的水平坐标。
screenY	返回当某个事件被触发时，鼠标指针的垂直坐标。
shiftKey	返回当事件被触发时，"SHIFT" 键是否被按下。

 

 

IE属性：

cancelBubble	如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。
attachEvent	用来添加事件，attachEvent(事件类型，函数);
detachEvent	用来移除事件，detachEvent(事件类型，函数);
fromElement	对于 mouseover 和 mouseout 事件，fromElement 引用移出鼠标的元素。
keyCode	对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。
offsetX,offsetY	发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。
returnValue	如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle，可以取消发生事件的源元素的默认动作。
srcElement	对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。
toElement	对于 mouseover 和 mouseout 事件，该属性引用移入鼠标的元素。
x,y	事件发生的位置的 x 坐标和 y 坐标，它们相对于用CSS动态定位的最内层包容元素。

 

标准Event属性和方法（DOM2级）：

addEventListener	添加监听器（事件），addEventListener(type事件类型,handler函数,false);
removeEventListener	移除监听器
bubbles	返回布尔值，指示事件是否是起泡事件类型。
cancelable	返回布尔值，指示事件是否可拥可取消的默认动作。
currentTarget	返回其事件监听器触发该事件的元素。
eventPhase	返回事件传播的当前阶段。
target	返回触发此事件的元素（事件的目标节点）。
timeStamp	返回事件生成的日期和时间。
type	返回当前 Event 对象表示的事件的名称。

 

注:ie不支持下列方法

initEvent()	初始化新创建的 Event 对象的属性。
preventDefault()	通知浏览器不要执行与事件关联的默认动作。
stopPropagation()	不再派发事件。

 

 

不同浏览器添加删除句柄示例：

 

//添加句柄
addHandler:function(element,type,handler){

 if(element.addEventListener){

                 element.addEventListener(type,handler,false);

 }else if(element.attachEvent){

                 element.attachEvent('on'+type, handler);

  }else{

                 element['on'+type]=handler;

  }

},

 

// 删除句柄

removeHandler: function(element,type,handler){

if(element.removeEventListener){

 

element.removeEventListener(type,handler,false);

}else if(element.detachEvent){

     element.detachEvent('on'+type,handler);

}else{

 

element['on'+type]=null;

}

},

 

//为login_btn添加click事件,自定义事件为函数showLogin

addEvent(login_btn,'click',showLogin);

addEvent(close,'click',hideLogin);}

 

javsscript修改指定id的属性：

<script> 
document.getElementById(btnZzk).style.backgroundColor = "#169fe6";
</script>